/* ==========================================================
   VYVE premium layer - shared across public pages
   Loaded after each page's own styles. No italics, ever.
   ========================================================== */
:root {
  --vp-gold: #C9A84C;
  --vp-dark: #0D2B2B;
  --vp-ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { font-style: normal !important; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(77,170,170,0.28); color: inherit; }

/* Type: tighter, more editorial headings */
h1, h2 { letter-spacing: -0.018em; }
h1 { text-wrap: balance; }
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Navigation: frosted glass */
nav, .nav { backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }

/* Eyebrow tags: fine gold rule */
.section-tag, .audience-label, .hero-badge {
  letter-spacing: 0.16em;
}
.section-tag::before, .audience-label::before {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: var(--vp-gold); margin-right: 10px; vertical-align: middle;
  position: relative; top: -1px;
}

/* Buttons: calm lift on hover */
a[class*="btn"], button[class*="btn"], .nav-cta, .hero-path-card {
  transition: transform .3s var(--vp-ease), box-shadow .3s var(--vp-ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}
a[class*="btn"]:hover, button[class*="btn"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(13,43,43,0.18);
}

/* Cards: softer, deeper shadows on hover */
.card, .pillar-card, .feature-card, .benefit-card, .value-card, .step-card, .testimonial-card {
  transition: transform .35s var(--vp-ease), box-shadow .35s var(--vp-ease);
}
.card:hover, .pillar-card:hover, .feature-card:hover, .benefit-card:hover, .value-card:hover, .testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(13,43,43,0.10);
}

/* ---------- Hero photography (inner pages) ---------- */
.vp-has-photo { position: relative; overflow: hidden; }
.vp-has-photo > .container { position: relative; z-index: 2; }
.vp-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 47%; margin: 0; z-index: 1; }
.vp-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--vp-dark) 0%, rgba(13,43,43,0.72) 22%, rgba(13,43,43,0.18) 55%, rgba(13,43,43,0) 75%),
    linear-gradient(0deg, rgba(13,43,43,0.55) 0%, rgba(13,43,43,0) 35%),
    linear-gradient(180deg, rgba(13,43,43,0.45) 0%, rgba(13,43,43,0) 30%);
}
.vp-hero-photo figcaption {
  position: absolute; right: 28px; bottom: 26px; z-index: 2;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  display: flex; align-items: center; gap: 10px;
}
.vp-hero-photo figcaption::before { content: ""; width: 22px; height: 1px; background: var(--vp-gold); }
@media (min-width: 901px) {
  .vp-has-photo .hero-inner, .vp-has-photo .page-hero-inner { max-width: min(620px, 50vw); }
}
/* Full-bleed variant for centred heroes */
.vp-hero-photo.vp-full { width: 100%; }
.vp-hero-photo.vp-full::after {
  background: linear-gradient(180deg, rgba(13,43,43,0.80) 0%, rgba(13,43,43,0.74) 50%, rgba(13,43,43,0.92) 100%);
}
@media (max-width: 900px) {
  .vp-hero-photo:not(.vp-full) {
    position: relative; width: auto; height: 260px;
    margin: -40px 20px 32px; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
  }
  .vp-hero-photo:not(.vp-full)::after {
    background: linear-gradient(0deg, rgba(13,43,43,0.55) 0%, rgba(13,43,43,0) 45%);
  }
}

/* Images in content: gentle rounding and depth */
.vp-rounded { border-radius: 18px; box-shadow: 0 28px 60px rgba(13,43,43,0.14); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Round 2: one brand across every page ---------- */
/* Logo: app icon everywhere, matching the homepage */
.vp-logo { display: inline-flex; align-items: center; }
.vp-logo img { height: 44px; width: auto; display: block; border-radius: 11px; mix-blend-mode: lighten; }
#navbar .vp-logo img { height: 46px; }

/* Buttons: pill shape site-wide, matching the homepage hero */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-white, .btn-outline-white, .btn-ghost,
.members-btn, .nav-cta a, .hero-actions a, .cta-actions a, .dropdown-cta, a.btn-primary, button.btn-primary {
  border-radius: 999px !important;
}
.nav-cta a, .members-btn { padding-left: 18px !important; padding-right: 18px !important; }



/* ---------- Round 3: no icons, editorial numerals ---------- */
.dp-icon, .included-icon, .why-point-icon, .partner-icon, .csr-point-icon, .sol-icon, .feature-card-icon,
.culture-icon, .panel-icon, .pillar-big-icon, .vp-num-inline {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  width: auto !important; height: auto !important; min-width: 2.2rem;
  display: block; justify-content: flex-start !important; align-items: flex-start !important;
  font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important;
  font-size: 1.15rem !important; line-height: 1.2 !important; letter-spacing: 0.02em;
  color: var(--vp-gold) !important; padding: 0 !important; flex-shrink: 0;
}
.sol-icon, .feature-card-icon, .culture-icon { margin-bottom: 14px !important; }
.sol-icon::after, .feature-card-icon::after, .culture-icon::after { content: ""; display: block; width: 24px; height: 1px; background: rgba(201,168,76,0.6); margin-top: 10px; }
.pillar-big-icon { font-size: 3.2rem !important; line-height: 1 !important; margin-bottom: 18px !important; }
.panel-icon { font-size: 0.95rem !important; min-width: 1.8rem; }
.dp-icon { padding-top: 2px !important; }

/* ---------- Round 4: authentic imagery that breaks up the text ---------- */
/* Real app screen in a phone frame */
.vp-phone { width: 100%; max-width: 250px; margin: 0 auto; border-radius: 34px; padding: 9px; background: #0a1c1c;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 30px 70px rgba(13,43,43,0.35); }
.vp-phone img { display: block; width: 100%; height: auto; border-radius: 26px; }
/* Pillar visual cards led by a real screen */
.pillar-visual.vp-with-screen { padding: 40px 32px 34px; }
.pillar-visual.vp-with-screen .vp-phone { max-width: 230px; margin: 0 auto 28px; }
.pillar-visual.vp-with-screen .vp-phone img { aspect-ratio: 9 / 13; object-fit: cover; object-position: top; }
/* Inside-the-app strip */
.vp-app-strip { padding: 110px 0; background: #0D2B2B; color: #fff; overflow: hidden; }
.vp-app-strip .vp-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.vp-app-strip .vp-head h2 { color: #fff; margin: 0.5rem 0 1rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; }
.vp-app-strip .vp-head p { color: rgba(224,242,242,0.72); font-size: 1.05rem; line-height: 1.75; }
.vp-app-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.vp-app-row figure { margin: 0; text-align: center; }
.vp-app-row figure:nth-child(even) { transform: translateY(36px); }
.vp-app-row .vp-phone img { aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }
.vp-app-row figcaption { margin-top: 20px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.vp-app-row figcaption b { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #fff; margin-bottom: 4px; }
/* Full-bleed photo band with a quote-style line */
.vp-photo-band { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.vp-photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,43,43,0.88) 0%, rgba(13,43,43,0.35) 45%, rgba(13,43,43,0.05) 100%); }
.vp-photo-band .vp-band-text { position: relative; z-index: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 2rem 56px; }
.vp-photo-band .vp-band-text span { display: inline-flex; align-items: center; gap: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #C9A84C; margin-bottom: 14px; }
.vp-photo-band .vp-band-text span::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.vp-photo-band .vp-band-text p { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; color: #fff; max-width: 720px; margin: 0; }
@media (max-width: 900px) {
  .vp-app-row { grid-template-columns: repeat(2, 1fr); gap: 36px 18px; }
  .vp-app-row figure:nth-child(even) { transform: none; }
  .vp-photo-band { min-height: 360px; }
}

/* ---------- Round 5: plain ampersand + consistent type and spacing ---------- */
/* Any "&" set in Playfair Display uses a clean sans ampersand instead of the decorative one */
@font-face { font-family: 'Playfair Display'; src: local('Inter'), local('Helvetica Neue'), local('Helvetica'), local('Arial'); font-weight: 100 900; font-style: normal; unicode-range: U+0026; }

/* One type scale for every public page */
body:has(#navbar) h1, body:has(#main-nav) h1 { font-size: clamp(2.6rem, 4.6vw, 4rem) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; }
body:has(#main-nav) .hp-hero h1 { font-size: clamp(3rem, 6.2vw, 5.6rem) !important; line-height: 1.04 !important; }
body:has(#navbar) section h2, body:has(#main-nav) section h2 { font-size: clamp(2rem, 3.2vw, 2.75rem) !important; line-height: 1.14 !important; letter-spacing: -0.015em !important; }
body:has(#navbar) section h2 + p, body:has(#main-nav) section h2 + p { font-size: 1.05rem !important; line-height: 1.75 !important; }

/* Centred section headers: same measure everywhere */
body:has(#navbar) section h2[style*="center"], body:has(#navbar) section :is(.section-header,.pillars-heading,.how-header,.app-showcase-header,.hp-life-head,.vp-head,.solution-header,.features-header,.values-header,.culture-header,.jobs-header) ,
body:has(#main-nav) section :is(.section-header,.how-header,.app-showcase-header,.hp-life-head,.vp-head) { max-width: 720px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
body:has(#navbar) section :is(.section-header,.pillars-heading,.how-header,.app-showcase-header,.hp-life-head,.vp-head,.solution-header,.features-header,.values-header) p,
body:has(#main-nav) section :is(.section-header,.how-header,.app-showcase-header,.hp-life-head,.vp-head) p { max-width: 620px; margin-left: auto !important; margin-right: auto !important; }

/* Consistent vertical rhythm between sections */
body:has(#navbar) section:not([class*="hero"]):not(.vp-photo-band):not(.cta):not(.cta-section):not(.cta-banner),
body:has(#main-nav) section:not([class*="hero"]):not(.vp-photo-band):not(.cta-banner) { padding-top: 80px !important; padding-bottom: 80px !important; }
@media (max-width: 768px) {
  body:has(#navbar) section:not([class*="hero"]):not(.vp-photo-band),
  body:has(#main-nav) section:not([class*="hero"]):not(.vp-photo-band) { padding-top: 56px !important; padding-bottom: 56px !important; }
}
/* Body copy: one size and line height */
body:has(#navbar) section p, body:has(#main-nav) section p { line-height: 1.7; }

/* ---------- Round 6: one navigation on every page ---------- */
#navbar .nav-inner { gap: 24px; }
.vp-nav { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0 auto; padding: 0; }
.vp-nav > li > a { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.86); padding: 28px 0; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.vp-nav > li > a:hover, .vp-nav > li > a.active { color: var(--teal-lt, #4DAAAA); }
.vp-dd { position: relative; }
.vp-dd-top::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: .7; }
.vp-dd-menu { position: absolute; top: calc(100% - 10px); left: -18px; min-width: 220px; padding: 10px; border-radius: 14px;
  background: #0D2B2B; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 50px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 1100; }
.vp-dd:hover .vp-dd-menu, .vp-dd:focus-within .vp-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.vp-dd-menu a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 0.88rem; color: rgba(255,255,255,0.82); white-space: nowrap; }
.vp-dd-menu a:hover, .vp-dd-menu a.active { background: rgba(77,170,170,0.14); color: #fff; }
#navbar .nav-cta { display: flex; gap: 10px; align-items: center; }
#navbar .nav-cta .members-btn { padding: 10px 18px !important; font-size: 0.84rem !important; font-weight: 600 !important; border: 0 !important; }
#navbar .nav-cta .vp-login { background: transparent !important; color: rgba(255,255,255,0.9) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28) !important; }
#navbar .nav-cta .vp-login:hover { box-shadow: inset 0 0 0 1px var(--teal-lt, #4DAAAA) !important; }
#navbar .nav-cta .vp-primary { background: var(--teal, #1B7878) !important; color: #fff !important; }
@media (max-width: 1024px) { .vp-nav, #navbar .nav-cta { display: none !important; } }
/* Mobile menu */
.mobile-menu .vp-m-home { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem !important; }
.mobile-menu .vp-m-group { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.mobile-menu .vp-m-group span { font-size: 0.7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #C9A84C; }
.mobile-menu .vp-m-group a { font-size: 1.05rem !important; }
.mobile-menu .vp-m-ctas { display: flex; gap: 10px; margin-top: 18px; }
.mobile-menu .vp-m-ctas a { padding: 12px 22px; border-radius: 999px; font-size: 0.95rem !important; font-weight: 600; }
.mobile-menu .vp-m-login { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); color: #fff; }
.mobile-menu .vp-m-primary { background: var(--teal, #1B7878); color: #fff !important; }
.mobile-menu { overflow-y: auto; justify-content: flex-start !important; padding-top: 96px !important; padding-bottom: 40px !important; gap: 8px !important; }

/* ---------- Round 7: premium footer + trial line ---------- */
.vp-trial { margin: -6px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--teal, #1B7878); }
footer.vp-footer { background: #071616; color: rgba(255,255,255,0.72); padding: 0 !important; font-family: 'Inter', system-ui, sans-serif; }
.vp-f-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.vp-f-cta { background: linear-gradient(135deg, #0D2B2B 0%, #145454 60%, #1B7878 100%); padding: 72px 0; }
.vp-f-cta .vp-f-wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.vp-f-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #C9A84C; margin-bottom: 14px; }
.vp-f-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.vp-f-cta h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 3.4vw, 2.9rem) !important; line-height: 1.1; color: #fff; margin: 0 0 10px; }
.vp-f-cta p { margin: 0; font-size: 1.05rem; color: rgba(224,242,242,0.8); }
.vp-f-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.vp-f-btn { display: inline-flex; align-items: center; padding: 15px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: transform .25s, background .25s, box-shadow .25s; }
.vp-f-primary { background: #fff; color: #0D2B2B !important; }
.vp-f-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.25); }
.vp-f-ghost { color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
.vp-f-ghost:hover { box-shadow: inset 0 0 0 1px #fff; transform: translateY(-2px); }
.vp-f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-top: 72px; padding-bottom: 56px; }
.vp-f-brand img { height: 48px; width: auto; border-radius: 12px; mix-blend-mode: lighten; display: block; margin-bottom: 18px; }
.vp-f-brand p { max-width: 320px; font-size: 0.95rem; line-height: 1.7; color: rgba(255,255,255,0.62); margin: 0; }
.vp-f-col { display: flex; flex-direction: column; gap: 12px; }
.vp-f-col h4 { font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #C9A84C; margin: 0 0 6px; }
.vp-f-col a { font-size: 0.95rem; color: rgba(255,255,255,0.78); transition: color .2s; }
.vp-f-col a:hover { color: #4DAAAA; }
.vp-f-legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.vp-f-legal span:last-child { display: flex; gap: 22px; }
.vp-f-legal a { color: rgba(255,255,255,0.6); }
.vp-f-legal a:hover { color: #fff; }
@media (max-width: 900px) {
  .vp-f-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .vp-f-brand { grid-column: 1 / -1; }
  .vp-f-legal { flex-direction: column; align-items: flex-start; }
}
/* Avoid two CTAs back to back: hide the footer CTA band where the page already ends on a CTA section */
body:has(section.cta, section.cta-section, section.cta-banner, section.no-role-section) .vp-f-cta { display: none; }

/* ---------- Round 8: mobile hardening ---------- */
html, body { max-width: 100%; overflow-x: clip; }
img, video, svg { max-width: 100%; }
@media (max-width: 900px) {
  /* inline two-column layouts stack on mobile */
  [style*="grid-template-columns"]:not(.vp-keep-grid) { grid-template-columns: 1fr !important; gap: 36px !important; }
  [style*="display:flex"][style*="gap:80px"], [style*="display: flex"][style*="gap: 80px"] { flex-direction: column !important; gap: 36px !important; }
  .container, .container-wide { padding-left: 20px !important; padding-right: 20px !important; }
  #navbar .vp-logo img, .nav-logo img { height: 40px !important; display: block !important; }
  #navbar .nav-logo { display: inline-flex !important; }
}
.vp-f-legal span { max-width: 100%; }
.vp-f-legal span:last-child { flex-wrap: wrap; gap: 10px 22px; }
.vp-nav > li > a, #navbar .nav-cta a { white-space: nowrap; }
.vp-nav { gap: 26px; }
@media (max-width: 1200px) { .vp-nav, #navbar .nav-cta { display: none !important; } #navbar .nav-hamburger { display: flex !important; } }

/* ---------- Round 9: centred text in every content box ---------- */
.app-feature, .pillars-grid .pillar-card, .pillar-card, .how-step, .dashboard-point, .testimonial-card, .testimonial,
.feature-card, .app-screen-item, .value-card, .partner-item, .faq-item, .contact-link, .cost-item, .solution-card,
.partner-card, .culture-card, .pt-card, .pt-feature, .pt-steps > div, .pt-examples > div, .pt-build, .mission-visual,
.why-quote, .mission-stat, .csr-stat, .milestone-card, .charity-stat, .vp-box, .pillar-visual, .episode-content {
  text-align: center !important;
}
.pillar-card .pillar-content, .pillar-card .pillar-body, .pillar-card h3, .pillar-card p { text-align: center !important; }
/* row-style boxes (number or icon beside text) stack and centre */
.dashboard-point, .partner-item, .partner-card, .contact-link, .vp-box, .pt-examples > div, .app-screen-item {
  flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
}
.vp-row-rev { flex-direction: column-reverse !important; }
.vp-row { border-left: 0 !important; border-top: 3px solid var(--teal) !important; padding: 20px 18px !important; }
.vp-row strong { white-space: normal !important; }
.vp-row span { text-align: center !important; }
.vp-box > div, .dashboard-point > div, .partner-item > div, .partner-card > div, .contact-link > div { text-align: center !important; }
.how-step .step-number, .value-card .value-num, .feature-card .feature-card-icon, .solution-card .sol-icon, .culture-card .culture-icon,
.partner-card .partner-icon, .partner-item .partner-icon, .dashboard-point .dp-icon, .pt-num, .vp-box .vp-num-inline { margin-left: auto !important; margin-right: auto !important; }
.pt-num::after, .value-num::after, .culture-icon::after, .sol-icon::after, .feature-card-icon::after { margin-left: auto !important; margin-right: auto !important; }
.testimonial-author, .testimonial-card .testimonial-author { justify-content: center !important; text-align: center !important; }
.episode-content .episode-links { justify-content: center !important; }
.pillar-visual .vp-screen, .pillar-visual img { margin-left: auto !important; margin-right: auto !important; }
/* text that was too small for its box */
.app-feature p { font-size: 0.95rem !important; line-height: 1.6 !important; }
.app-feature h4 { font-size: 1.08rem !important; }
.app-screen-item strong { font-size: 1rem !important; }
.app-screen-item span { font-size: 0.9rem !important; line-height: 1.55 !important; }
.mission-stat span, .mission-stat p, .csr-stat span, .csr-stat p, .csr-stat div:not(:first-child), .mission-stat div:not(:first-child) { font-size: 0.92rem !important; line-height: 1.55 !important; }
.testimonial-card .testimonial-quote, .testimonial > p { font-size: 1rem !important; line-height: 1.7 !important; }
.vp-box strong { font-size: max(1rem, 100%) ; }
.vp-box span { font-size: 0.92rem !important; line-height: 1.55 !important; }
.contact-link .link-text strong, .contact-link .link-text span { display: block; }
/* Round 9b: refinements */
.pillar-card .pillar-features { padding: 0 !important; list-style: none !important; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pillar-card .pillar-features li { text-align: center !important; padding-left: 0 !important; list-style: none !important; }
.pillar-card .pillar-features li::before { position: static !important; display: inline-block !important; vertical-align: middle; margin: 0 8px 2px 0 !important; }
.cost-item { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; }
.cost-item .cost-label { font-size: 0.95rem !important; }
.partner-text strong { font-size: 1rem !important; }
.partner-text span { font-size: 0.92rem !important; color: rgba(255,255,255,0.68) !important; line-height: 1.55 !important; display: block; }
.app-feature, .app-feature-list.right .app-feature { border-left: 0 !important; border-right: 0 !important; border-top: 3px solid var(--teal) !important; }
.pt-examples > div { border-left: 1px solid #e3eeee !important; border-top: 3px solid var(--teal) !important; }
div:has(> div > .vp-box) > h3, div:has(> div > .vp-box) > p, div:has(> .vp-box) > h3, div:has(> .vp-box) > p { text-align: center !important; }
.mission-visual h3 { text-align: center !important; }
.vp-steps-box, .charity-how { text-align: center !important; }
.vp-steps-box > div > div, .charity-how .charity-step { flex-direction: column !important; align-items: center !important; gap: 8px !important; text-align: center !important; }

/* ---------- Round 10: content pages (FAQ, support, trust, team, insights, press, accessibility) ---------- */
.vx-sec { padding: 96px 0; background: var(--white, #fff); }
.vx-sec.vx-alt { background: var(--off-white, #F4FAFA); }
.vx-sec.vx-dark { background: var(--dark, #0D2B2B); color: #fff; }
.vx-narrow { max-width: 780px; margin: 0 auto; }
.vx-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.vx-head h2 { font-family: var(--font-head); color: var(--dark); margin: 6px 0 14px; }
.vx-dark .vx-head h2 { color: #fff; }
.vx-head p { color: var(--grey); font-size: 1.05rem; line-height: 1.75; }
.vx-dark .vx-head p { color: rgba(224,242,242,.75); }
.vx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vx-grid.vx-2 { grid-template-columns: repeat(2, 1fr); }
.vx-card { background: #fff; border: 1px solid #e3eeee; border-radius: 18px; padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.vx-alt .vx-card { background: #fff; }
.vx-dark .vx-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.vx-card h3 { font-family: var(--font-head); font-size: 1.3rem; color: var(--dark); margin: 0 0 10px; }
.vx-dark .vx-card h3 { color: #fff; }
.vx-card p { color: var(--grey); font-size: 1rem; line-height: 1.7; margin: 0; }
.vx-dark .vx-card p { color: rgba(224,242,242,.72); }
.vx-num { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #C9A84C; margin-bottom: 14px; }
.vx-num::after { content: ""; display: block; width: 24px; height: 1px; background: rgba(201,168,76,.6); margin: 10px auto 0; }
.vx-big { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--teal); line-height: 1.1; margin: 4px 0 10px; letter-spacing: .01em; }
.vx-dark .vx-big { color: #C9A84C; }
.vx-meta { font-size: .85rem !important; color: var(--grey); margin-top: 12px !important; }
.vx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 12px 22px; border-radius: 999px; background: var(--teal); color: #fff !important; font-weight: 600; font-size: .95rem; text-decoration: none; }
.vx-btn:hover { background: #15605f; }
.vx-btn.vx-ghost { background: transparent; color: var(--teal) !important; box-shadow: inset 0 0 0 1.5px var(--teal); }
.vx-callout { border-radius: 18px; padding: 30px 32px; background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.45); text-align: center; }
.vx-callout h3 { font-family: var(--font-head); font-size: 1.35rem; color: var(--dark); margin: 0 0 8px; }
.vx-callout p { color: var(--charcoal, #33403f); line-height: 1.7; margin: 0; }
/* FAQ accordion */
.vx-faq-group { margin-bottom: 44px; }
.vx-faq-group > h3 { font-family: var(--font-head); font-size: 1.5rem; color: var(--dark); text-align: center; margin: 0 0 18px; }
.vx-faq details { background: #fff; border: 1px solid #e3eeee; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.vx-faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 600; font-size: 1.05rem; color: var(--dark); position: relative; }
.vx-faq summary::-webkit-details-marker { display: none; }
.vx-faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--teal); }
.vx-faq details[open] summary::after { content: "\2212"; }
.vx-faq details[open] summary { color: var(--teal); }
.vx-faq .vx-a { padding: 0 24px 22px; color: var(--grey); line-height: 1.75; font-size: 1rem; }
.vx-faq .vx-a p { margin: 0 0 10px; } .vx-faq .vx-a a { color: var(--teal); font-weight: 600; }
.vx-search { display: block; width: 100%; max-width: 560px; margin: 0 auto 40px; padding: 16px 22px; border-radius: 999px; border: 1.5px solid #d6e6e6; font-size: 1rem; font-family: var(--font-body); background: #fff; }
.vx-search:focus { outline: none; border-color: var(--teal); }
/* Team */
.vx-avatar { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: #C9A84C; background: radial-gradient(circle at 30% 30%, #1B7878, #0D2B2B); margin-bottom: 18px; box-shadow: 0 14px 30px rgba(13,43,43,.18); }
.vx-role { font-size: .78rem !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal) !important; margin: 0 0 12px !important; }
/* Articles */
.vx-article { max-width: 740px; margin: 0 auto; }
.vx-article h2 { font-family: var(--font-head); font-size: 1.8rem !important; color: var(--dark); margin: 44px 0 14px; }
.vx-article p, .vx-article li { font-size: 1.08rem; line-height: 1.85; color: #3b4a49; }
.vx-article p { margin: 0 0 18px; }
.vx-article ul { padding-left: 22px; margin: 0 0 20px; } .vx-article li { margin-bottom: 8px; }
.vx-article a { color: var(--teal); font-weight: 600; }
.vx-article .vx-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 32px; }
.vx-article .vx-stat-row > div { background: var(--off-white, #F4FAFA); border-radius: 14px; padding: 22px 16px; text-align: center; border-top: 3px solid var(--teal); }
.vx-article .vx-stat-row strong { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--teal); }
.vx-article .vx-stat-row span { font-size: .92rem; color: var(--grey); line-height: 1.5; display: block; }
.vx-sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid #e3eeee; font-size: .9rem !important; color: var(--grey); }
.vx-sources a { font-weight: 500; }
.vx-byline { color: rgba(224,242,242,.7); font-size: .95rem; margin-top: 8px; }
.vx-post { text-decoration: none; }
.vx-post .vx-tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); background: rgba(27,120,120,.08); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.vx-post:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(13,43,43,.08); }
.vx-post { transition: transform .25s, box-shadow .25s, border-color .25s; }
.vx-post .vx-more { margin-top: 18px; color: var(--teal); font-weight: 600; font-size: .95rem; }
/* Footer additions: stores, socials, newsletter, safety line */
.vp-f-grid { grid-template-columns: 1.5fr repeat(4, 1fr) !important; gap: 40px !important; }
.vp-f-stores { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.vp-store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 138px; padding: 9px 18px; border-radius: 12px; background: #000; border: 1px solid rgba(255,255,255,.28); color: #fff !important; line-height: 1.15; text-decoration: none; transition: border-color .2s, transform .2s; }
.vp-store small { font-size: .66rem; letter-spacing: .04em; color: rgba(255,255,255,.75); }
.vp-store b { font-size: 1.05rem; font-weight: 600; }
.vp-store:hover { border-color: #4DAAAA; transform: translateY(-2px); }
.vp-f-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.vp-f-social a { font-size: .8rem; color: rgba(255,255,255,.78); padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.vp-f-social a:hover { color: #fff; box-shadow: inset 0 0 0 1px #4DAAAA; }
.vp-f-news { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 32px; padding-bottom: 36px; border-top: 1px solid rgba(255,255,255,.08); }
.vp-f-news h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; color: #fff; margin: 0 0 6px; }
.vp-f-news p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.6); max-width: 440px; line-height: 1.6; }
.vp-news-form { display: flex; gap: 10px; flex: 1; max-width: 480px; min-width: 260px; }
.vp-news-form input[type=email] { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: .95rem; font-family: inherit; }
.vp-news-form input[type=email]::placeholder { color: rgba(255,255,255,.45); }
.vp-news-form input[type=email]:focus { outline: none; border-color: #4DAAAA; }
.vp-news-form button { padding: 14px 24px; border-radius: 999px; border: 0; background: #1B7878; color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.vp-news-form button:hover { background: #22908f; }
.vp-news-msg { width: 100%; font-size: .9rem; color: #4DAAAA; }
.vp-f-safety { font-size: .82rem; color: rgba(255,255,255,.55); padding-bottom: 18px; line-height: 1.6; }
.vp-f-safety a { color: #4DAAAA !important; font-weight: 600; }
@media (max-width: 1100px) { .vp-f-grid { grid-template-columns: 1fr 1fr 1fr !important; } .vp-f-brand { grid-column: 1 / -1; } }
@media (max-width: 900px) { .vx-grid, .vx-grid.vx-2, .vx-article .vx-stat-row { grid-template-columns: 1fr; } .vx-sec { padding: 72px 0; } .vp-f-grid { grid-template-columns: 1fr 1fr !important; } .vp-news-form { flex-direction: column; max-width: none; } }
/* Official store badges */
.vp-store.vp-badge { background: none !important; border: 0 !important; padding: 0 !important; min-width: 0 !important; border-radius: 9px; }
.vp-store.vp-badge img { height: 46px; width: auto; display: block; }
.vp-store.vp-badge:hover { transform: translateY(-2px); opacity: .92; }
.vp-f-stores .vp-store.vp-badge img { height: 38px; }

/* ---------- Round 7: one shared navigation base on every page ---------- */
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 0; background: var(--dark, #0D2B2B); box-shadow: 0 2px 20px rgba(0,0,0,0.3); border-bottom: 0; }
#navbar .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: none; height: auto; padding: 0; }
#navbar .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
#navbar .nav-hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }
#mobileMenu { display: none; position: fixed; inset: 0; background: var(--dark, #0D2B2B); z-index: 1001; flex-direction: column; align-items: center; justify-content: safe center; gap: 18px; overflow-y: auto; padding: 72px 20px 40px; }
#mobileMenu.open { display: flex; }
#mobileMenu a { font-size: 1.15rem; font-weight: 600; color: #fff; text-decoration: none; }
#mobileMenu .mobile-close { position: absolute; top: 22px; right: 22px; font-size: 1.8rem; line-height: 1; color: #fff; cursor: pointer; background: none; border: none; }
@media (max-width: 1200px) { #navbar .nav-hamburger { display: flex !important; } }
body:has(#navbar) .hp-hero h1 { font-size: clamp(3rem, 6.2vw, 5.6rem) !important; line-height: 1.04 !important; }