/* STEP52 — Vode redesign */
.vode-hub{
  --water-accent: #7fd6df;
  --water-accent-strong: #5bc2cf;
  padding-top: 22px;
  padding-bottom: 44px;
}
.vode-hub .page-hero{
  padding: 0 !important;
  margin-bottom: 18px;
  background-position: center center !important;
  background-size: cover !important;
}
.vode-hub .page-hero-inner{
  max-width: 980px;
  padding: 30px 32px !important;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(10,33,39,.9), rgba(7,19,24,.94));
  border: 1px solid rgba(127,214,223,.18);
  box-shadow: 0 22px 48px rgba(0,0,0,.34);
}
.vode-hub .page-hero h1{
  font-size: clamp(2rem, 5vw, 3.15rem) !important;
  margin-bottom: 12px !important;
}
.vode-hub .lead{
  max-width: 72ch;
  font-size: clamp(1rem, 1.5vw, 1.08rem);
}
.anchor-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.anchor-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background: rgba(127,214,223,.10);
  border:1px solid rgba(127,214,223,.18);
  color: var(--ink);
  font-weight:700;
}
.anchor-nav a:hover{ background: rgba(127,214,223,.18); }
.compact-pillar{ margin-top: 0 !important; margin-bottom: 18px !important; }
.compact-intro{ margin-top: 0 !important; }
.compact-intro p{ max-width: 78ch; }
.compact-header{ margin-bottom: 18px !important; }
.compact-header h2{ margin-bottom: 8px !important; }
.clean-topic-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.clean-topic-cards .topic-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 214px;
  text-decoration:none;
}
.topic-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(127,214,223,.14);
  color: var(--water-accent-strong);
  font-size: 1.25rem;
  line-height:1;
}
.topic-link{
  margin-top:auto;
  font-weight:700;
  color: var(--water-accent-strong);
}
.section-head-inline{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
}
.btn-ghost{
  background: transparent !important;
  border:1px solid rgba(127,214,223,.24) !important;
  color: var(--ink) !important;
}
.featured-trio .vbk-card .vbk-body,
.story-archive-grid .vbk-card .vbk-body{
  min-height: 178px;
}
.story-archive-grid .vbk-card .vbk-title,
.featured-trio .vbk-card .vbk-title{
  -webkit-line-clamp: 2;
}
.story-archive-grid .vbk-card .vbk-excerpt,
.featured-trio .vbk-card .vbk-excerpt{
  -webkit-line-clamp: 3;
}
.guides-grid .topic-card{ min-height: 202px; }
.slim-container{
  max-width: 980px;
  padding: 0 !important;
}
.clean-cta{
  margin-top: 24px;
  padding: 26px 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10,36,44,.92), rgba(8,21,26,.96));
  border: 1px solid rgba(127,214,223,.16);
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.clean-cta h2{
  margin: 6px 0 8px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}
.clean-cta p{ color: var(--muted); margin:0; }
.vode-hub .content-block,
.vode-hub .hub-pillar-card,
.vode-hub .clean-cta,
.vode-hub .page-hero-inner{
  max-width: 1180px;
  margin-left:auto;
  margin-right:auto;
}
.vode-hub .hub-pillar-card{
  background: linear-gradient(180deg, rgba(9,35,42,.94), rgba(7,19,24,.98));
  border-color: rgba(127,214,223,.14);
}
.vode-hub .vbk-grid{ gap: 22px !important; }
.vode-hub .vbk-card,
.vode-hub .topic-card{
  background: linear-gradient(180deg, rgba(15,42,49,.92), rgba(9,23,29,.96)) !important;
  border-color: rgba(127,214,223,.12) !important;
}
.vode-hub .faq details + details{ margin-top: 12px; }
@media (max-width: 980px){
  .clean-topic-cards,
  .vode-hub .vbk-grid{
    grid-template-columns: 1fr !important;
  }
  .section-head-inline,
  .clean-cta{
    flex-direction:column;
    align-items:flex-start;
  }
  .vode-hub .page-hero-inner{ padding: 24px 22px !important; }
}

/* STEP58 — Vode fine polish */
.vode-hub{
  padding-top: 18px;
}
.vode-hub .page-hero{
  margin-bottom: 16px;
}
.vode-hub .page-hero-inner{
  max-width: 940px;
  padding: 24px 28px !important;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(10,33,39,.92), rgba(7,19,24,.95));
}
.vode-hub .page-hero h1{
  font-size: clamp(1.95rem, 4.6vw, 3rem) !important;
  margin-bottom: 10px !important;
}
.vode-hub .lead{
  max-width: 66ch;
}
.vode-hub .hero-actions{
  gap: 10px;
  margin-top: 14px;
}
.vode-hub .hero-actions .btn,
.vode-hub .anchor-nav a{
  min-height: 38px;
}
.vode-hub .hub-pillar-card{
  padding-top: 20px;
  padding-bottom: 20px;
}
.vode-hub .vbk-grid.story-archive-grid{
  gap: 24px !important;
}
.vode-hub .story-archive-grid .vbk-card .vbk-body{
  min-height: 164px;
}
.vode-hub .story-archive-grid .vbk-card .vbk-excerpt{
  -webkit-line-clamp: 2;
}
.vode-hub .clean-cta{
  padding: 22px 24px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.vode-hub .clean-cta .btn,
.vode-hub .clean-cta .btn-primary{
  padding: 11px 16px;
  border-radius: 14px;
}
@media (max-width: 980px){
  .vode-hub .page-hero-inner{
    padding: 22px 20px !important;
  }
  .vode-hub .clean-cta{
    padding: 20px;
  }
}

/* STEP60 — Vode fine polish 2 */
.vode-hub .page-hero{
  background-position: center center !important;
}
.vode-hub .page-hero::before{
  background: linear-gradient(90deg, rgba(5,18,24,.90) 0%, rgba(5,18,24,.78) 52%, rgba(5,18,24,.62) 100%);
}
.vode-hub .page-hero-inner{
  max-width: 900px;
  padding: 26px 28px !important;
  background: linear-gradient(180deg, rgba(8,28,35,.95), rgba(5,15,19,.97));
  border-color: rgba(127,214,223,.22);
}
.vode-hub .page-hero h1{
  font-size: clamp(1.9rem, 4.5vw, 2.92rem) !important;
  line-height: 1.06;
}
.vode-hub .lead{
  max-width: 62ch;
}
.vode-hub .hero-actions{
  display:flex;
  gap: 12px;
  margin-top: 14px;
}
.vode-hub .hero-actions .btn{
  background: rgba(127,214,223,.12);
  border-color: rgba(127,214,223,.28);
}
.vode-hub .hero-actions .btn.primary{
  background: rgba(127,214,223,.22);
  border-color: rgba(127,214,223,.44);
}
.vode-hub .anchor-nav{
  gap: 10px;
  margin-top: 16px;
}
.vode-hub .hub-pillar-card{
  max-width: 1080px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.vode-hub .vbk-grid.story-archive-grid{
  gap: 28px !important;
}
.vode-hub .story-archive-grid .vbk-card .vbk-body{
  min-height: 156px;
}
.vode-hub .clean-cta{
  padding: 20px 22px;
}
@media (max-width: 980px){
  .vode-hub .page-hero-inner{
    padding: 22px 20px !important;
  }
}


/* STEP64 — Vode micro polish */
.vode-hub .page-hero::before{background:linear-gradient(90deg, rgba(5,17,22,.84) 0%, rgba(5,17,22,.68) 50%, rgba(5,17,22,.50) 100%) !important;}
.vode-hub .page-hero-inner{max-width:820px;width:min(820px, calc(100% - 36px));padding:24px 26px !important;border-radius:24px;background:linear-gradient(180deg, rgba(7,25,31,.90), rgba(4,13,18,.95));box-shadow:0 18px 38px rgba(0,0,0,.24);}
.vode-hub .page-hero h1{font-size:clamp(1.9rem, 4.3vw, 2.9rem) !important;line-height:1.06;}
.vode-hub .lead{max-width:58ch;font-size:1.02rem;}
.vode-hub .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
.vode-hub .hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:14px;background:rgba(127,214,223,.10) !important;border:1px solid rgba(127,214,223,.26) !important;color:var(--ink) !important;text-decoration:none;box-shadow:none !important;}
.vode-hub .hero-actions .btn.primary{background:rgba(127,214,223,.18) !important;border-color:rgba(127,214,223,.38) !important;}
.vode-hub .anchor-nav{gap:10px;margin-top:16px;}
.vode-hub .anchor-nav a{min-height:38px;padding:0 13px;}
.vode-hub .hub-pillar-card{max-width:1040px;padding-top:19px;padding-bottom:19px;}
.vode-hub .story-archive-grid{gap:24px !important;}
.vode-hub .story-archive-grid .vbk-card .vbk-body{min-height:148px;}
.vode-hub .story-archive-grid .vbk-card .vbk-excerpt{-webkit-line-clamp:2;line-clamp:2;}
.vode-hub .clean-cta{padding:19px 22px;}
.vode-hub .clean-cta .btn,.vode-hub .clean-cta .btn-primary{padding:10px 15px;border-radius:13px;}
@media (max-width:980px){.vode-hub .page-hero-inner{width:min(100%, calc(100% - 24px));padding:21px 18px !important;}}