/* ===================================================================
   test.com skin: extracted from NM4 netministry-homepage-mockup.html
   Light-mode skin, Inter font, gold accent, navy header/footer.
   Auto-loaded by the platform PreLoad macro as <ContentFolder>/style.css
   =================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #B0741A;        /* accent text, icons, prices, links */
  --gold-fill: #E0851F;   /* button + badge fills (dark text on top) */
  --gold-light: #EFA248;  /* hover */
  --gold-dark: #8A5A12;
  --ink: #16213E;         /* primary text */
  --bg: #FFFFFF;          /* main background */
  --bg-2: #EFF2F7;        /* alternating sections */
  --bg-3: #FFFFFF;
  --card: #FFFFFF;
  --gray-200: #1F2940;    /* prominent body text */
  --gray-300: #38415A;    /* nav, feature lists */
  --gray-400: #5A6478;    /* subtitles, muted body */
  --gray-500: #828B9C;    /* faint labels */
  --gray-600: #AAB1BF;    /* faintest */
  --line: rgba(22,33,62,0.09);
  --line-2: rgba(22,33,62,0.14);
  --advoc8-blue: #7C3AED;
  --gradient-gold: linear-gradient(135deg, #C57A1C 0%, #E89A3A 50%, #C57A1C 100%);
  --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F7F9FC 100%);
  --shadow-card: 0 1px 2px rgba(22,33,62,.04), 0 14px 34px rgba(22,33,62,.06);
  --green: #4C8C2E;
  --green-dark: #16804A;
  --gradient-green: linear-gradient(135deg, #22A65E 0%, #16804A 100%);
  --red: #D9483B;}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.text-gold { color: var(--gold); }

#divHeaderArea 
{
    background-color:#000000;
      margin-bottom:1em;

}

#divHeader 
{
    padding:25px 0px;
    max-width:inherit;
}

#divHeader.desktop 
{
    padding:0px 25px;
}

/* ==================== QUIET EYEBROW ==================== */
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.section-header .eyebrow { text-align: center; }

/* ==================== TOP BAR ==================== */
.top-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 13px;
}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.top-bar-left { display: flex; align-items: center; gap: 8px; }
/* the signed-in bar carries two links (Dashboard + Sign Out), so this side needs a row too */
.top-bar-right { display: flex; align-items: center; gap: 8px; }
.top-bar a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 14px; border-radius: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: var(--gray-400); text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.top-bar a.muted { opacity: 0.85; }
.top-bar a:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.22); color: var(--gold); }

@media (max-width: 768px) {
  /* Two rows maximum. Smaller type and tighter boxes buy the width; stacking the two sides as
     separate full width rows is what pushed it to three or four. */
  .top-bar { font-size: 11px; }
  .top-bar .container { flex-wrap: wrap; gap: 6px; }
  /* the sides stop being boxes of their own so all the links wrap as one sequence */
  .top-bar-left, .top-bar-right { display: contents; }
  /* natural width, then grow to fill whatever row each lands on */
  .top-bar a { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
}

/* ==================== HEADER ==================== */
.header {
  background: rgba(255,255,255,0.85);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { height: 60px; width: auto; max-width: 100%; display: block; }
.nav { display: flex; gap: 6px; }
.nav a {
  color: var(--gray-300);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  position: relative;
}
.nav a:hover { color: var(--gold); background: rgba(224, 133, 31, 0.10); }
.header-cta { display: flex; align-items: center; gap: 16px; }

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  /* A label never breaks mid-phrase. If it will not fit, the button responds:
     stacked, full width, or with less padding. The text is the last thing to yield. */
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: #C8801C; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224, 133, 31, 0.32); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-secondary:hover { border-color: var(--ink); background: rgba(22,33,62,0.04); }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 10px; }
.btn-ghost { background: transparent; color: var(--gray-300); padding: 12px 16px; }
.btn-ghost:hover { color: var(--ink); }
/* Narrow screens: a button sheds padding before anything else, because the label cannot
   wrap. This is what keeps the long CTAs inside the narrow cards on Pricing, Support and
   the blog sidebar once no-wrap is in force. */
@media (max-width: 420px) {
.btn { padding: 11px 16px; }
.btn-lg { padding: 14px 20px; font-size: 15px; }
}

/* ==================== FOOTER ==================== */
.footer { background: var(--bg); padding: 80px 0 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 48px; margin-bottom: 48px; }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p { color: var(--gray-500); font-size: 14px; margin-bottom: 16px; max-width: 280px; }
.footer-brand .phone { color: var(--gold); font-size: 16px; font-weight: 600; }
.footer-col h4 { color: var(--gray-400); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
.footer-col a { display: block; color: var(--gray-400); text-decoration: none; font-size: 14px; margin-bottom: 12px; transition: color 0.2s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid var(--line); }
.footer-legal { color: var(--gray-600); font-size: 13px; }
.footer-legal a { color: var(--gray-600); text-decoration: none; margin-left: 16px; }
.footer-legal a:hover { color: var(--gold); }
.powered-by { display: flex; align-items: center; gap: 8px; color: var(--gray-500); font-size: 13px; }
.advoc8-badge { background: var(--advoc8-blue); color: white; padding: 4px 10px; border-radius: 4px; font-weight: 600; font-size: 11px; }

/* ==================== DARK HEADER + FOOTER (navy) ==================== */
.top-bar { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,0.1); }
.top-bar a { color: rgba(255,255,255,0.72); }
.top-bar a:hover { color: var(--gold-light); }
.header { background: rgba(22,33,62,0.92); border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav a { color: rgba(255,255,255,0.82); }
.nav a:hover { color: var(--gold-light); background: rgba(224, 133, 31, 0.15); }
.footer { background: var(--ink); color: #fff; border-top: none; }
.footer-brand p { color: rgba(255,255,255,0.6); }
.footer-brand .phone { color: var(--gold-light); }
.footer-col h4 { color: rgba(255,255,255,0.72); }
.footer-col a { color: rgba(255,255,255,0.58); }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.footer-legal { color: rgba(255,255,255,0.5); }
.footer-legal a { color: rgba(255,255,255,0.5); }
.footer-legal a:hover { color: var(--gold-light); }
.powered-by { color: rgba(255,255,255,0.55); }

/* ==================== RESPONSIVE (chrome) ==================== */
@media (max-width: 768px) {
  .nav { display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; font-size: 13px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   BASE COMPONENTS  (shared across pages incl. home; deltas below)
   ================================================================== */

.btn-sm { font-size: 13px; padding: 10px 18px; }
.card { box-shadow: var(--shadow-card); padding: 24px; border: 1px solid var(--line); background: var(--card); border-radius: 16px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--gray-400); }
.card:hover { transform: translateY(-4px); border-color: rgba(224, 133, 31, 0.4); }
.chip { font-size: 12px; text-decoration: none; align-items: center; padding: 8px 14px; border: 1px solid var(--line-2); background: var(--card); display: inline-flex; color: var(--gray-300); border-radius: 999px; gap: 6px; }
.chip.active { color: var(--ink); border-color: rgba(224, 133, 31, 0.5); background: rgba(224, 133, 31, 0.12); }
.contact-card { border-radius: 16px; padding: 32px; border: 1px solid var(--line); background: var(--bg-2); }
.contact-card h3 { font-size: 18px; margin-bottom: 16px; font-weight: 600; }
.contact-card p { margin-bottom: 20px; }
.contact-method { gap: 12px; align-items: center; display: flex; }
.contact-method-icon { font-size: 15px; flex-shrink: 0; align-items: center; width: 36px; background: rgba(224, 133, 31, 0.1); display: flex; justify-content: center; color: var(--gold); border-radius: 8px; height: 36px; }
.contact-methods { flex-direction: column; gap: 12px; display: flex; }
.cta { border-radius: 20px; padding: 40px; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.cta h2 { font-size: 28px; margin-bottom: 8px; }
.cta p { color: var(--gray-400); }
.cta-buttons { gap: 16px; justify-content: center; display: flex; }
.cta-phone { color: var(--gray-400); font-size: 15px; margin-top: 24px; }
.cta-phone a { color: var(--gold); text-decoration: none; font-weight: 600; }
.cta-section { text-align: center; padding: 120px 0; background: linear-gradient(rgba(22,33,62,0.82), rgba(22,33,62,0.9)), url("https://images.unsplash.com/photo-1758272133786-ee98adcc6837?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; }
.cta-section .container { position: relative; }
.cta-section h2 { font-size: 44px; margin-bottom: 16px; font-weight: 700; }
.cta-section p { color: rgba(255,255,255,0.85); font-size: 18px; max-width: 550px; margin-left: auto; margin-right: auto; }
.cta-section::before { pointer-events: none; content: ''; background: radial-gradient(ellipse at 50% 100%, rgba(224, 133, 31, 0.14) 0%, transparent 60%); position: absolute; }
.faq-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; display: grid; }
.faq-item { border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-card); }
.faq-item p { color: var(--gray-400); font-size: 14px; }
.faq-section { padding: 100px 0; background: var(--bg); }
.filters { gap: 10px; flex-wrap: wrap; justify-content: center; display: flex; }
.funding-compare { align-items: stretch; margin: 0 auto 36px; justify-content: center; display: flex; flex-wrap: wrap; gap: 16px; max-width: 640px; }
.funding-compare .tag { margin-top: 6px; display: block; }
.funding-compare div { font-size: 14px; padding: 20px; flex: 1; border-radius: 14px; min-width: 200px; }
.funding-them { color: var(--gray-400); border: 1px solid var(--line); background: rgba(22,33,62,0.03); }
.funding-them .amt { font-weight: 700; font-size: 26px; text-decoration: line-through; color: var(--gray-400); }
.funding-us { border: 1px solid rgba(224, 133, 31, 0.35); background: rgba(224, 133, 31, 0.1); }
.funding-us .amt { font-weight: 700; font-size: 26px; color: var(--gold); }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; display: grid; }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; display: grid; }
/* .grid-2 and .grid-3 are global helpers, but every page using them re-declared the same
   mobile collapse (13 pages for .grid-3 alone). Declaring it once means a new page gets
   correct mobile behaviour without remembering to. The per-page copies carry identical
   values and still win on specificity, so nothing renders differently today. */
@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
/* .hero::before is a 1000px absolutely positioned glow. Without position/overflow here it
   anchors to the page and spills 313px past a 375px viewport. Twenty pages each re-declared
   "position: relative; overflow: hidden" to contain it and three (Privacy, Terms and the
   More-*-Visitors landing page) never did. Containing it at the source fixes those three and
   makes the twenty duplicates redundant. */
.hero { padding: 80px 0 60px; background: var(--bg); position: relative; overflow: hidden; }
/* Lifts hero content above the ::before glow, which is positioned and would otherwise paint
   over it. 23 pages each re-declared this; Privacy and Terms never did. */
.hero .container { position: relative; }
.hero h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; margin-bottom: 16px; font-weight: 700; }
.hero h1 .highlight { color: var(--gold); }
.hero-badge { font-size: 12px; font-weight: 600; display: inline-block; color: var(--gold); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 18px; }
.hero-cta { gap: 16px; justify-content: center; display: flex; }
.hero-subtitle { line-height: 1.7; font-size: 18px; color: var(--gray-400); }
.hero::before { pointer-events: none; content: ''; left: 50%; width: 1000px; transform: translateX(-50%); background: radial-gradient(circle, rgba(224, 133, 31, 0.1) 0%, transparent 60%); position: absolute; height: 1000px; top: -30%; }
.public-icon { font-size: 22px; align-items: center; width: 52px; background: rgba(224, 133, 31, 0.12); display: flex; justify-content: center; color: var(--gold); border-radius: 14px; margin-bottom: 14px; height: 52px; }
.lead-magnet { border: 1px solid var(--ink); background: var(--ink); }
.meta { color: var(--gray-500); font-size: 12px; }
.search-bar { box-shadow: var(--shadow-card); border: 1px solid var(--line-2); background: var(--bg); display: flex; transition: border-color 0.2s, box-shadow 0.2s; border-radius: 12px; overflow: hidden; }
.search-bar button { font-size: 18px; cursor: pointer; padding: 18px 28px; border: none; background: var(--gold-fill); color: var(--ink); transition: background 0.2s; }
.search-bar button:hover { background: var(--gold-light); }
.search-bar input { font-size: 16px; padding: 18px 24px; border: none; background: transparent; flex: 1; color: var(--ink); outline: none; }
.search-bar input::placeholder { color: var(--gray-500); }
.search-bar:focus-within { border-color: var(--gold); }
.search-container { margin: 0 auto; max-width: 560px; }
.section { padding: 80px 0; }
.section-header { margin-bottom: 32px; }
.section-header h2 { font-size: 32px; font-weight: 700; }
.section-header p { color: var(--gray-400); }
.section.alt { background: var(--bg-2); }
.sr-only { width: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0,0,0,0); height: 1px; overflow: hidden; white-space: nowrap; }
.stat-label { color: var(--gray-400); font-size: 14px; }
.stat-number { font-weight: 700; font-size: 48px; margin-bottom: 8px; color: var(--gold); }
.stats-grid { grid-template-columns: repeat(4, 1fr); gap: 48px; display: grid; }
.sticky-cta { align-items: center; box-shadow: 0 16px 40px rgba(22,33,62,0.18); z-index: 1200; padding: 12px 16px; border: 1px solid rgba(224, 133, 31, 0.35); background: rgba(255,255,255,0.97); display: flex; bottom: 24px; border-radius: 14px; gap: 12px; position: fixed; }
.sticky-cta span { color: var(--gray-300); font-size: 13px; }
.tag { font-size: 11px; align-items: center; padding: 4px 10px; background: rgba(224, 133, 31, 0.15); display: inline-flex; color: var(--gold); border-radius: 999px; }

/* ==================================================================
   PAGE-SCOPED DELTAS  (each .page-<name>, incl. .page-home)
   ================================================================== */

/* ---------- page-about ---------- */
.page-about .hero { padding: 100px 0 80px; position: relative; overflow: hidden; }
.page-about .hero::before { width: 1200px; height: 1200px; }
.page-about .hero .container { position: relative; text-align: center; }
.page-about .hero-badge { display: inline-flex; align-items: center; gap: 8px; }
.page-about .hero h1 { line-height: 1.15; margin-bottom: 20px; }
.page-about .hero-subtitle { max-width: 650px; margin: 0 auto; }
.page-about .stats-bar { padding: 60px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-about .stat-item { text-align: center; }
.page-about .stat-number { line-height: 1; }
.page-about .story-section { padding: 100px 0; background: var(--bg); }
.page-about .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.page-about .story-content h2 { font-size: 40px; font-weight: 700; margin-bottom: 24px; line-height: 1.2; }
.page-about .story-content p { color: var(--gray-400); font-size: 17px; line-height: 1.8; margin-bottom: 20px; }
.page-about .story-content p strong { color: var(--ink); }
.page-about .story-visual { position: relative; }
.page-about .story-image-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 48px; position: relative; box-shadow: var(--shadow-card); }
.page-about .story-image-placeholder { background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); border-radius: 16px; height: 300px; display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 14px; }
.page-about .story-image-photo { width: 100%; height: 300px; object-fit: cover; border-radius: 16px; display: block; }
.page-about .story-badge { position: absolute; bottom: -20px; right: 40px; background: var(--gold-fill); color: var(--ink); padding: 16px 24px; border-radius: 12px; font-weight: 700; font-size: 14px; box-shadow: 0 18px 40px rgba(22,33,62,0.18); }
.page-about .story-badge span { display: block; font-size: 28px; margin-bottom: 4px; }
.page-about .mission-section { padding: 100px 0; background: var(--bg-2); }
.page-about .section-header { text-align: center; margin-bottom: 64px; }
.page-about .section-header h2 { font-size: 40px; margin-bottom: 16px; }
.page-about .section-header p { font-size: 18px; max-width: 600px; margin: 0 auto; }
.page-about .mission-card { background: linear-gradient(135deg, rgba(224, 133, 31, 0.1) 0%, rgba(224, 133, 31, 0.02) 100%); border: 1px solid rgba(224, 133, 31, 0.28); border-radius: 24px; padding: 64px; text-align: center; max-width: 900px; margin: 0 auto; box-shadow: var(--shadow-card); }
.page-about .mission-icon { width: 80px; height: 80px; background: rgba(224, 133, 31, 0.12); color: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px; }
.page-about .mission-card h3 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.page-about .mission-card p { color: var(--gray-300); font-size: 20px; line-height: 1.7; max-width: 700px; margin: 0 auto; }
.page-about .values-section { padding: 100px 0; background: var(--bg); }
.page-about .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-about .value-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px 32px; text-align: center; box-shadow: var(--shadow-card); transition: all 0.3s ease; }
.page-about .value-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-about .value-icon { width: 72px; height: 72px; background: rgba(224, 133, 31, 0.12); color: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 24px; }
.page-about .value-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.page-about .value-card p { color: var(--gray-400); font-size: 14px; line-height: 1.7; }
.page-about .timeline-section { padding: 100px 0; background: var(--bg-2); }
.page-about .timeline { max-width: 800px; margin: 0 auto; position: relative; }
.page-about .timeline::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: var(--line-2); }
.page-about .timeline-item { display: flex; align-items: flex-start; gap: 0; margin-bottom: 48px; position: relative; }
.page-about .timeline-item:nth-child(even) { flex-direction: row-reverse; }
.page-about .timeline-item:nth-child(even) .timeline-content { text-align: right; padding-left: 0; padding-right: 44px; }
.page-about .timeline-item:nth-child(even) .timeline-year { text-align: right; }
.page-about .timeline-year { width: 50%; flex-shrink: 0; text-align: left; }
/* Year labels are editorial numerals, not buttons. No fill and no chip: a large tabular
   figure with a short accent rule beneath it, which also gives the alternating column a
   rhythm as the eye runs down 14 entries. */
.page-about .timeline-year span { display: inline-block; background: none; color: var(--gold); padding: 0; border-radius: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.page-about .timeline-year span::after { content: ''; display: block; width: 26px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--gold-fill); }
/* on the right-hand entries the rule sits under the last digit, not the first */
.page-about .timeline-item:nth-child(even) .timeline-year span::after { margin-left: auto; }
.page-about .timeline-dot { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 16px; height: 16px; background: var(--bg); border: 3px solid var(--gold); border-radius: 50%; z-index: 1; }
.page-about .timeline-content { width: 50%; flex-shrink: 0; text-align: left; padding-left: 44px; }
.page-about .timeline-content h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.page-about .timeline-content p { color: var(--gray-400); font-size: 14px; line-height: 1.6; }
.page-about .team-section { padding: 100px 0; background: var(--bg); }
.page-about .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-about .team-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-align: center; box-shadow: var(--shadow-card); transition: all 0.3s ease; }
.page-about .team-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.page-about .team-photo { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.page-about .team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.page-about .team-avatar { width: 100px; height: 100px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: var(--ink); }
.page-about .team-info { padding: 24px; }
.page-about .team-info h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.page-about .team-info .title { color: var(--gold); font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.page-about .team-info p { color: var(--gray-500); font-size: 13px; line-height: 1.5; }
.page-about .brands-section { padding: 100px 0; background: var(--bg-2); }
.page-about .brands-intro { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.page-about .brands-intro h2 { font-size: 36px; font-weight: 700; margin-bottom: 16px; }
.page-about .brands-intro p { color: var(--gray-400); font-size: 17px; line-height: 1.7; }
.page-about .brands-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-about .brand-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; text-align: center; box-shadow: var(--shadow-card); transition: all 0.2s; }
.page-about .brand-card:hover { border-color: var(--line-2); }
.page-about .brand-logo { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.page-about .brand-logo.netministry { color: var(--gold); }
.page-about .brand-logo.advoc8 { color: var(--advoc8-blue); }
.page-about .brand-logo.nmc { color: var(--green); }
.page-about .brand-card p { color: var(--gray-400); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.page-about .brand-link { color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.page-about .brand-link:hover { color: var(--gold); }
.page-about .testimonials-section { padding: 100px 0; background: var(--bg); }
.page-about .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.page-about .testimonial-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; box-shadow: var(--shadow-card); }
.page-about .testimonial-quote { font-size: 18px; line-height: 1.7; margin-bottom: 24px; position: relative; color: var(--gray-200); }
.page-about .testimonial-quote::before { content: '"'; position: absolute; top: -20px; left: -10px; font-size: 80px; color: rgba(224, 133, 31, 0.18); font-weight: 700; line-height: 1; }
.page-about .testimonial-author { display: flex; align-items: center; gap: 16px; }
.page-about .testimonial-avatar { width: 48px; height: 48px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); font-size: 16px; }
.page-about .testimonial-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.page-about .testimonial-info p { color: var(--gray-500); font-size: 13px; }
.page-about .location-section { padding: 100px 0; background: var(--bg-2); }
.page-about .location-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; box-shadow: var(--shadow-card); }
.page-about .location-map { background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; min-height: 400px; color: var(--gray-600); font-size: 14px; }
.page-about .location-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-about .location-info { padding: 64px; }
.page-about .location-info h2 { font-size: 32px; font-weight: 700; margin-bottom: 24px; }
.page-about .location-detail { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.page-about .location-icon { width: 44px; height: 44px; background: rgba(224, 133, 31, 0.12); color: var(--gold); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.page-about .location-detail h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.page-about .location-detail p { color: var(--gray-400); font-size: 14px; line-height: 1.5; }
.page-about .location-detail a { color: var(--gold); text-decoration: none; }
.page-about .cta-section { position: relative; overflow: hidden; }
.page-about .cta-section h2 { color: #fff; }
.page-about .cta-section p { margin-bottom: 40px; margin-left: auto; margin-right: auto; }
@media (max-width: 1024px) {
.page-about .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.page-about .story-grid { grid-template-columns: 1fr; gap: 48px; }
.page-about .values-grid { grid-template-columns: repeat(2, 1fr); }
.page-about .timeline::before { left: 24px; }
.page-about .timeline-item { flex-direction: column !important; gap: 16px; padding-left: 60px; }
.page-about .timeline-item .timeline-content { text-align: left !important; }
.page-about .timeline-dot { left: 24px; }
.page-about .timeline-item:nth-child(even) .timeline-year span::after { margin-left: 0; }
.page-about .timeline-year, .page-about .timeline-content { width: auto !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; }
.page-about .team-grid { grid-template-columns: repeat(2, 1fr); }
.page-about .brands-grid { grid-template-columns: 1fr; }
.page-about .testimonials-grid { grid-template-columns: 1fr; }
.page-about .location-card { grid-template-columns: 1fr; }
.page-about .location-map { min-height: 250px; }
}
@media (max-width: 768px) {
.page-about .stats-grid { grid-template-columns: 1fr; }
.page-about .values-grid { grid-template-columns: 1fr; }
.page-about .team-grid { grid-template-columns: 1fr; }
.page-about .cta-buttons { flex-direction: column; }
}

/* ---------- page-blog ---------- */
.page-blog { --gray-600: #AAB4AE; }
.page-blog .hero { position: relative; overflow: hidden; text-align: center; }
.page-blog .hero .container { position: relative; }
.page-blog .hero-badge { margin-bottom: 16px; }
.page-blog .hero h1 { line-height: 1.15; }
.page-blog .hero-subtitle { max-width: 700px; margin: 0 auto 32px; }
.page-blog .search-bar:focus-within { box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.15); }
.page-blog .search-bar button { display: flex; align-items: center; justify-content: center; }
.page-blog .filters { margin-top: 20px; }
.page-blog .chip { box-shadow: var(--shadow-card); }
.page-blog .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-blog .section-header p { max-width: 560px; }
.page-blog .card { transition: all 0.2s ease; color: inherit; text-decoration: none; display: block; }
.page-blog .featured { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; overflow: hidden; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.page-blog .featured:hover { border-color: rgba(224, 133, 31, 0.4); }
.page-blog .featured-media { background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; min-height: 260px; color: var(--gray-600); }
.page-blog .featured-content { padding: 28px; }
.page-blog .tag { gap: 6px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.page-blog .featured-content h3 { font-size: 24px; margin-bottom: 12px; }
.page-blog .featured-content p { color: var(--gray-400); margin-bottom: 16px; }
.page-blog .author { display: flex; align-items: center; gap: 12px; color: var(--gray-400); font-size: 13px; }
.page-blog .avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(224, 133, 31, 0.18); display: flex; align-items: center; justify-content: center; color: var(--gold); font-weight: 700; }
.page-blog .card h3 { font-weight: 600; }
.page-blog .card p { font-size: 14px; margin-bottom: 12px; }
.page-blog .meta { display: flex; align-items: center; gap: 12px; }
.page-blog .newsletter { background: var(--ink); border: 1px solid var(--ink); border-radius: 20px; padding: 40px; text-align: center; position: relative; overflow: hidden; }
.page-blog .newsletter::before { content: ''; position: absolute; bottom: -50%; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse at 50% 100%, rgba(224, 133, 31, 0.18) 0%, transparent 60%); pointer-events: none; }
.page-blog .newsletter > * { position: relative; }
.page-blog .newsletter h2 { font-size: 28px; margin-bottom: 12px; color: #fff; }
.page-blog .newsletter p { color: rgba(255,255,255,0.72); margin-bottom: 16px; }
.page-blog .newsletter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 0 auto; }
.page-blog .newsletter-form input { min-width: 0; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #fff; outline: none; transition: border-color 0.2s; }
.page-blog .newsletter-form .field-wide { grid-column: 1 / -1; }
.page-blog .newsletter-form .btn { grid-column: 1 / -1; }
.page-blog .newsletter-form input:focus { border-color: var(--gold-light); }
.page-blog .newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
@media (max-width: 1024px) {
.page-blog .grid-3 { grid-template-columns: repeat(2, 1fr); }
.page-blog .featured { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-blog .grid-3, .page-blog .grid-2 { grid-template-columns: 1fr; }
.page-blog .section-header { flex-direction: column; align-items: flex-start; }
.page-blog .newsletter-form { grid-template-columns: 1fr; }
}

/* ---------- page-blog-post ---------- */
.page-blog-post .hero { position: relative; overflow: hidden; }
.page-blog-post .hero::before { background: radial-gradient(circle, rgba(224, 133, 31, 0.12) 0%, transparent 60%); }
.page-blog-post .hero .container { position: relative; max-width: 980px; }
.page-blog-post .breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--gray-400); font-size: 13px; margin-bottom: 20px; }
.page-blog-post .breadcrumb a { color: var(--gray-400); text-decoration: none; }
.page-blog-post .breadcrumb a:hover { color: var(--gold); }
.page-blog-post .hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.15; }
.page-blog-post .hero-subtitle { margin-bottom: 24px; }
.page-blog-post .meta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--gray-400); font-size: 13px; }
.page-blog-post .meta-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(224, 133, 31, 0.12); border: 1px solid rgba(224, 133, 31, 0.3); color: var(--gold); padding: 6px 12px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.page-blog-post .article-wrap { padding: 60px 0 100px; }
.page-blog-post .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.page-blog-post .article { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; box-shadow: var(--shadow-card); }
.page-blog-post .article > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.page-blog-post .article h2 { font-size: 26px; font-weight: 700; margin: 32px auto 12px; color: var(--ink); letter-spacing: -0.01em; }
.page-blog-post .article h3 { font-size: 20px; font-weight: 600; margin: 24px auto 10px; color: var(--ink); }
.page-blog-post .article p { color: var(--gray-300); margin-bottom: 16px; }
.page-blog-post .article ul { color: var(--gray-300); padding-left: 18px; margin-bottom: 16px; }
.page-blog-post .article li { margin-bottom: 8px; }
.page-blog-post .article strong { color: var(--ink); }
.page-blog-post .article blockquote { border-left: 3px solid var(--gold); padding: 16px 20px; background: rgba(224, 133, 31, 0.08); border-radius: 12px; margin: 24px auto; color: var(--gray-200); font-style: italic; }
.page-blog-post .featured-image { height: 320px; max-width: 720px; border-radius: 18px; background: linear-gradient(135deg, rgba(224, 133, 31, 0.16), rgba(124, 58, 237, 0.12)); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-weight: 600; margin: 0 auto 24px; }
.page-blog-post .author-box { display: flex; gap: 16px; background: var(--bg-2); border: 1px solid var(--line); padding: 18px; border-radius: 14px; margin: 32px auto 0; max-width: 720px; }
.page-blog-post .author-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--gold-fill); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); }
.page-blog-post .author-meta h4 { margin-bottom: 4px; font-weight: 600; }
.page-blog-post .author-meta p { color: var(--gray-400); font-size: 13px; }
.page-blog-post .sidebar { display: flex; flex-direction: column; gap: 20px; }
.page-blog-post .side-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-card); }
.page-blog-post .lead-magnet { background: rgba(224, 133, 31, 0.08); border: 1px solid rgba(224, 133, 31, 0.3); }
.page-blog-post .lead-magnet h4 { margin-bottom: 8px; }
.page-blog-post .lead-magnet p { color: var(--gray-400); font-size: 14px; margin-bottom: 14px; }
.page-blog-post .side-card h4 { margin-bottom: 12px; font-weight: 600; }
.page-blog-post .side-link { display: block; color: var(--gray-300); text-decoration: none; margin-bottom: 10px; font-size: 14px; }
.page-blog-post .side-link:hover { color: var(--gold); }
.page-blog-post .tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.page-blog-post .tag { padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--gray-300); font-size: 12px; text-decoration: none; transition: all 0.2s; }
.page-blog-post .tag:hover { border-color: rgba(224, 133, 31, 0.4); color: var(--gold); }
.page-blog-post .share-row { display: flex; gap: 10px; margin-top: 4px; }
.page-blog-post .share-btn { flex: 1; text-align: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--gray-300); text-decoration: none; font-size: 13px; transition: all 0.2s; }
.page-blog-post .share-btn:hover { color: var(--ink); border-color: rgba(224, 133, 31, 0.4); }
.page-blog-post .cta { background: var(--gradient-card); padding: 28px; text-align: center; }
.page-blog-post .cta h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.page-blog-post .cta p { margin-bottom: 16px; }
.page-blog-post .related-section { padding: 0 0 100px; }
.page-blog-post .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-blog-post .section-header h2 { font-size: 28px; letter-spacing: -0.02em; }
.page-blog-post .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-blog-post .card { background: var(--gradient-card); padding: 22px; color: inherit; text-decoration: none; display: block; transition: all 0.2s ease; }
.page-blog-post .card h3 { font-weight: 600; margin-bottom: 10px; }
.page-blog-post .card p { font-size: 14px; }
@media (max-width: 1100px) {
.page-blog-post .article-grid { grid-template-columns: 1fr; }
.page-blog-post .sidebar { order: -1; }
.page-blog-post .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-blog-post .card-grid { grid-template-columns: 1fr; }
.page-blog-post .article { padding: 26px; }
}

/* ---------- page-careers ---------- */
.page-careers .hero { padding: 90px 0 60px; position: relative; overflow: hidden; text-align: center; }
.page-careers .hero::before { top: -35%; background: radial-gradient(circle, rgba(224, 133, 31, 0.12) 0%, transparent 60%); }
.page-careers .hero .container { position: relative; }
.page-careers .hero h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin-bottom: 18px; }
.page-careers .hero-subtitle { max-width: 700px; margin: 0 auto 28px; }
.page-careers .section-header { margin-bottom: 40px; }
.page-careers .section-header h2 { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 8px; }
.page-careers .section-header p { font-size: 17px; }
.page-careers .card { background: var(--gradient-card); transition: all 0.3s ease; }
.page-careers .card .ico { font-size: 22px; color: var(--gold); margin-bottom: 14px; }
.page-careers .card h3 { font-weight: 600; }
.page-careers .card p { font-size: 14px; }
.page-careers .jobs { display: grid; gap: 14px; }
.page-careers .job { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-card); transition: all 0.2s ease; }
.page-careers .job:hover { border-color: rgba(224, 133, 31, 0.4); }
.page-careers .job strong { color: var(--ink); }
.page-careers .job span { color: var(--gray-400); font-size: 13px; }
.page-careers .cta { background: var(--gradient-card); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.page-careers .cta h2 { font-weight: 700; }
@media (max-width: 1024px) {
.page-careers .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-careers .grid-3 { grid-template-columns: 1fr; }
.page-careers .cta { flex-direction: column; align-items: flex-start; }
.page-careers .job { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- page-contact ---------- */
.page-contact .hero { padding: 90px 0 60px; position: relative; overflow: hidden; text-align: center; }
.page-contact .hero::before { top: -35%; }
.page-contact .hero .container { position: relative; }
.page-contact .hero-badge { margin-bottom: 16px; }
.page-contact .hero h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin-bottom: 18px; }
.page-contact .hero-subtitle { max-width: 700px; margin: 0 auto 28px; }
.page-contact .section { background: var(--bg); }
.page-contact .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
.page-contact .card h3 { font-weight: 600; margin-bottom: 10px; }
.page-contact .card > p { color: var(--gray-400); }
.page-contact .form { display: grid; gap: 14px; }
.page-contact .form-field { display: grid; gap: 6px; }
.page-contact .form-field label { font-size: 13px; font-weight: 600; color: var(--gray-300); }
.page-contact .form input { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; color: var(--ink); font-size: 14px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.page-contact .form textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; color: var(--ink); font-size: 14px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.page-contact .form select { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; color: var(--ink); font-size: 14px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.page-contact .form input::placeholder { color: var(--gray-500); }
.page-contact .form textarea::placeholder { color: var(--gray-500); }
.page-contact .form input:focus { outline: none; border-color: var(--gold-fill); box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.18); }
.page-contact .form textarea:focus { outline: none; border-color: var(--gold-fill); box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.18); }
.page-contact .form select:focus { outline: none; border-color: var(--gold-fill); box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.18); }
.page-contact .form textarea { min-height: 120px; resize: vertical; }
.page-contact .info-list { display: grid; gap: 12px; margin-top: 16px; }
.page-contact .info-item { display: flex; gap: 12px; align-items: center; }
.page-contact .info-item a { color: var(--ink); text-decoration: none; }
.page-contact .info-item a:hover { color: var(--gold); }
.page-contact .info-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(224, 133, 31, 0.12); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 16px; flex-shrink: 0; }
.page-contact .cta-section { padding: 110px 0; }
.page-contact .cta-section h2 { font-size: 40px; color: #fff; }
.page-contact .cta-section p { margin-bottom: 32px; margin-left: auto; margin-right: auto; }
@media (max-width: 1024px) {
.page-contact .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {

}

/* ---------- page-demo ---------- */
.page-demo { --gray-600: #AAB4AE; }
.page-demo .btn-secondary { color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.page-demo .btn-secondary:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.page-demo .demo-section { padding: 80px 0 100px; background: var(--bg); position: relative; overflow: hidden; }
.page-demo .demo-section::before { content: ''; position: absolute; top: -20%; right: -10%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(224, 133, 31, 0.1) 0%, transparent 60%); pointer-events: none; }
.page-demo .demo-grid { display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: start; position: relative; }
.page-demo .demo-content { padding-top: 20px; }
.page-demo .demo-badge { display: inline-block; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px; }
.page-demo .demo-content h1 { font-size: 48px; font-weight: 700; line-height: 1.15; margin-bottom: 20px; letter-spacing: -0.02em; }
.page-demo .demo-content h1 .highlight { background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-demo .demo-content > p { font-size: 18px; color: var(--gray-400); line-height: 1.7; margin-bottom: 40px; }
.page-demo .demo-includes { margin-bottom: 48px; }
.page-demo .demo-includes h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; color: var(--gray-300); }
.page-demo .demo-includes-list { display: flex; flex-direction: column; gap: 16px; }
.page-demo .demo-includes-item { display: flex; align-items: flex-start; gap: 16px; }
.page-demo .demo-includes-icon { width: 44px; height: 44px; background: rgba(224, 133, 31, 0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; color: var(--gold); }
.page-demo .demo-includes-item h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.page-demo .demo-includes-item p { font-size: 14px; color: var(--gray-500); line-height: 1.5; }
.page-demo .demo-stats { display: flex; gap: 40px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 48px; }
.page-demo .demo-stat { text-align: center; }
.page-demo .demo-stat-value { font-size: 32px; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.page-demo .demo-stat-label { font-size: 13px; color: var(--gray-500); }
.page-demo .demo-photo { width: 100%; height: 220px; border-radius: 16px; overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-card); background: center/cover no-repeat; }
.page-demo .demo-testimonial { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; position: relative; box-shadow: var(--shadow-card); }
.page-demo .demo-testimonial::before { content: '"'; position: absolute; top: 16px; right: 24px; font-size: 64px; color: rgba(224, 133, 31, 0.18); font-weight: 700; line-height: 1; }
.page-demo .demo-testimonial p { font-size: 15px; line-height: 1.7; margin-bottom: 20px; position: relative; color: var(--gray-200); }
.page-demo .demo-testimonial-author { display: flex; align-items: center; gap: 12px; }
.page-demo .demo-testimonial-avatar { width: 44px; height: 44px; background: var(--gold-fill); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--ink); }
.page-demo .demo-testimonial-info h4 { font-size: 14px; font-weight: 600; }
.page-demo .demo-testimonial-info span { font-size: 12px; color: var(--gray-500); }
.page-demo .demo-form-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 40px; position: relative; box-shadow: var(--shadow-card); }
.page-demo .form-header { text-align: center; margin-bottom: 32px; }
.page-demo .form-header h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.page-demo .form-header p { color: var(--gray-400); font-size: 14px; }
.page-demo .demo-form { display: flex; flex-direction: column; gap: 20px; }
.page-demo .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.page-demo .form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.page-demo .form-group label { font-size: 13px; font-weight: 500; color: var(--gray-300); }
.page-demo .form-group label .required { color: var(--gold); }
.page-demo .form-input { width: 100%; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; }
.page-demo .form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.18); }
.page-demo .form-input::placeholder { color: var(--gray-500); }
.page-demo select.form-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23828B9C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 48px; }
.page-demo textarea.form-input { min-height: 100px; resize: vertical; }
.page-demo .form-submit { margin-top: 8px; }
.page-demo .form-submit .btn { width: 100%; }
.page-demo .form-note { text-align: center; font-size: 12px; color: var(--gray-500); margin-top: 16px; }
.page-demo .form-note i { vertical-align: middle; margin-right: 4px; color: var(--gold); }
.page-demo .expect-section { padding: 100px 0; background: var(--bg-2); }
.page-demo .section-header { text-align: center; margin-bottom: 64px; }
.page-demo .section-header h2 { font-size: 36px; margin-bottom: 16px; }
.page-demo .section-header p { font-size: 17px; max-width: 550px; margin: 0 auto; }
.page-demo .expect-timeline { display: flex; justify-content: space-between; max-width: 1000px; margin: 0 auto; position: relative; }
.page-demo .expect-timeline::before { content: ''; position: absolute; top: 40px; left: 80px; right: 80px; height: 2px; background: linear-gradient(90deg, var(--gold-fill), var(--gold-dark)); }
.page-demo .expect-step { text-align: center; flex: 1; max-width: 220px; position: relative; }
.page-demo .expect-step-number { width: 80px; height: 80px; background: var(--card); border: 3px solid var(--gold-fill); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--gold); margin: 0 auto 24px; position: relative; z-index: 1; box-shadow: var(--shadow-card); }
.page-demo .expect-step h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.page-demo .expect-step p { color: var(--gray-400); font-size: 14px; line-height: 1.6; }
.page-demo .faq-grid { gap: 20px; max-width: 1000px; margin: 0 auto; }
.page-demo .faq-item { padding: 24px; }
.page-demo .faq-item h4 { font-size: 16px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px; }
.page-demo .faq-item h4 span { color: var(--gold); }
.page-demo .faq-item p { line-height: 1.7; padding-left: 28px; }
.page-demo .alt-cta { padding: 80px 0; background: var(--bg-2); }
.page-demo .alt-cta-card { background: linear-gradient(135deg, rgba(22,33,62,0.9) 0%, rgba(22,33,62,0.82) 100%),
        url("https://images.unsplash.com/photo-1758272133786-ee98adcc6837?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; border: 1px solid var(--line); border-radius: 20px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; box-shadow: var(--shadow-card); }
.page-demo .alt-cta-content h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.page-demo .alt-cta-content p { color: rgba(255,255,255,0.85); font-size: 15px; }
.page-demo .alt-cta-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.page-demo .alt-cta-phone { text-align: center; }
.page-demo .alt-cta-phone-label { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.page-demo .alt-cta-phone-number { font-size: 20px; font-weight: 700; color: var(--gold-light); text-decoration: none; }
.page-demo .alt-cta-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.25); }
@media (max-width: 1024px) {
.page-demo .demo-grid { grid-template-columns: 1fr; gap: 60px; }
.page-demo .demo-form-card { max-width: 500px; margin: 0 auto; }
.page-demo .expect-timeline { flex-direction: column; gap: 40px; align-items: center; }
.page-demo .expect-timeline::before { display: none; }
.page-demo .expect-step { max-width: 300px; }
.page-demo .faq-grid { grid-template-columns: 1fr; }
.page-demo .alt-cta-card { flex-direction: column; text-align: center; }
.page-demo .alt-cta-actions { flex-direction: column; }
.page-demo .alt-cta-divider { width: 100px; height: 1px; }
}
@media (max-width: 768px) {
.page-demo .form-row { grid-template-columns: 1fr; }
.page-demo .demo-stats { flex-wrap: wrap; justify-content: center; }
}

/* ---------- page-domains ---------- */
.page-domains { --gray-600: #AAB4AE; --green: #16A34A; }
.page-domains .hero { padding: 90px 0 60px; position: relative; overflow: hidden; text-align: center; }
.page-domains .hero::before { top: -35%; }
.page-domains .hero .container { position: relative; }
.page-domains .hero h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin-bottom: 18px; }
.page-domains .hero-subtitle { max-width: 700px; margin: 0 auto 28px; }
.page-domains .search-bar { background: #FFFFFF; max-width: 560px; margin: 0 auto; transition: border-color 0.2s; }
.page-domains .search-bar button { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.page-domains .card { background: var(--gradient-card); transition: all 0.3s ease; }
.page-domains .card .card-icon { width: 48px; height: 48px; background: rgba(224, 133, 31, 0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gold); margin-bottom: 16px; }
/* Icon sits beside the text, not above it. Same pattern as .page-platform cards; every child
   placed explicitly so nothing relies on grid auto-flow. */
.page-domains .grid-3 .card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: start; }
.page-domains .grid-3 .card .card-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; align-self: start; }
.page-domains .grid-3 .card h3 { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
.page-domains .grid-3 .card p { grid-column: 2; grid-row: 2; margin-bottom: 0; }
.page-domains .card p { font-size: 14px; }
@media (max-width: 1024px) {
.page-domains .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-domains .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width:768px) {

}

/* ---------- page-gallery ---------- */
.page-gallery .hero { padding: 90px 0 60px; position: relative; overflow: hidden; text-align: center; }
.page-gallery .hero::before { top: -35%; }
.page-gallery .hero .container { position: relative; }
.page-gallery .hero-badge { margin-bottom: 16px; }
.page-gallery .hero h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin-bottom: 18px; }
.page-gallery .hero-subtitle { max-width: 700px; margin: 0 auto 28px; }
.page-gallery .hero-reassurance { font-size: 14px; color: var(--gray-400); margin: -8px auto 28px; max-width: 700px; }
.page-gallery .hero-reassurance strong { color: var(--gold); font-weight: 600; }
.page-gallery .chip { background: var(--bg); transition: all 0.2s; }
.page-gallery .chip:hover { border-color: rgba(224, 133, 31, 0.4); color: var(--ink); }
.page-gallery .chip.active { color: var(--gold-dark); border-color: rgba(224, 133, 31, 0.45); background: rgba(224, 133, 31, 0.1); font-weight: 600; }
.page-gallery .section { background: var(--bg); }
.page-gallery .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-gallery .tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: border-color 0.3s ease, transform 0.3s ease; }
.page-gallery a.tile:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-gallery .tile-media { height: 200px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 13px; }
.page-gallery .tile-content { padding: 18px; }
.page-gallery .tile-content h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.page-gallery .tile-content p { color: var(--gray-400); font-size: 13px; }
.page-gallery .tile-result { color: var(--gold); font-size: 13px; font-weight: 600; margin-top: 10px; }
.page-gallery .tile-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--gray-300); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.page-gallery .tile-link:hover { color: var(--gold); }
.page-gallery .cta-section { padding: 110px 0; background: linear-gradient(135deg, rgba(22,33,62,0.9) 0%, rgba(22,33,62,0.82) 100%),
        url("https://images.unsplash.com/photo-1758272133786-ee98adcc6837?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; }
.page-gallery .cta-section h2 { font-size: clamp(32px, 4vw, 44px); color: #fff; }
.page-gallery .cta-section p { margin: 0 auto 32px; max-width: 560px; }
.page-gallery .cta-buttons { flex-wrap: wrap; }
.page-gallery .cta-section .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.45); }
.page-gallery .cta-section .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
@media (max-width: 1024px) {
.page-gallery .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-gallery .grid { grid-template-columns: 1fr; }
}

/* ---------- page-growth ---------- */
.page-growth { --gray-600: #AAB4AE; }
.page-growth .btn-green { background: var(--gold); color: #fff; }
.page-growth .btn-green:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224, 133, 31, 0.32); }
.page-growth .hero-badge { margin-bottom: 16px; }
.page-growth .mcv-badge { display: inline-block; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px; }
.page-growth .hero { padding: 100px 0 80px; position: relative; overflow: hidden; }
.page-growth .hero::before { width: 1200px; height: 1200px; }
.page-growth .hero .container { position: relative; text-align: center; }
.page-growth .hero h1 { line-height: 1.15; margin-bottom: 20px; }
.page-growth .hero-subtitle { max-width: 650px; margin: 0 auto 40px; }
.page-growth .case-study-highlight { padding: 40px 0 40px; }
.page-growth .case-study-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: center; box-shadow: var(--shadow-card); }
.page-growth .case-study-card h3 { font-size: 22px; margin-bottom: 8px; }
.page-growth .case-study-card p { color: var(--gray-400); margin-bottom: 0; }
.page-growth .case-study-photo { grid-column: 1 / -1; height: 200px; border-radius: 16px; overflow: hidden; margin-bottom: 4px; background: center/cover no-repeat; box-shadow: var(--shadow-card); }
.page-growth .case-study-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.page-growth .case-metric { background: rgba(224, 133, 31, 0.08); border: 1px solid rgba(224, 133, 31, 0.28); border-radius: 14px; padding: 16px; text-align: center; }
.page-growth .case-metric strong { display: block; font-size: 22px; color: var(--gold); margin-bottom: 4px; }
.page-growth .case-metric span { color: var(--gray-400); font-size: 13px; }
.page-growth .stats-bar { padding: 60px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-growth .stat-item { text-align: center; }
.page-growth .stat-number { line-height: 1; }
.page-growth .intro-section { padding: 100px 0; background: var(--bg); }
.page-growth .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.page-growth .intro-content h2 { font-size: 40px; font-weight: 700; margin-bottom: 24px; line-height: 1.2; }
.page-growth .intro-content p { color: var(--gray-400); font-size: 17px; line-height: 1.8; margin-bottom: 20px; }
.page-growth .intro-content p strong { color: var(--ink); }
.page-growth .partner-badge { display: inline-flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 24px; margin-top: 24px; }
.page-growth .partner-badge-logo { font-size: 14px; font-weight: 700; color: var(--gold); }
.page-growth .partner-badge-text { font-size: 13px; color: var(--gray-400); }
.page-growth .intro-visual { position: relative; }
.page-growth .growth-diagram { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 48px; box-shadow: var(--shadow-card); }
.page-growth .growth-funnel { display: flex; flex-direction: column; gap: 16px; }
.page-growth .funnel-stage { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; transition: all 0.2s; }
.page-growth .funnel-stage:hover { border-color: rgba(224, 133, 31, 0.35); background: rgba(224, 133, 31, 0.06); }
.page-growth .funnel-icon { width: 48px; height: 48px; background: rgba(224, 133, 31, 0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; color: var(--gold); }
.page-growth .funnel-info h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.page-growth .funnel-info p { font-size: 13px; color: var(--gray-500); margin: 0; }
.page-growth .funnel-arrow { text-align: center; color: var(--gray-500); font-size: 20px; }
.page-growth .mcv-section { padding: 90px 0; background: var(--bg); }
.page-growth .mcv-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 48px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; box-shadow: var(--shadow-card); }
.page-growth .mcv-card h2 { font-size: 36px; margin-bottom: 12px; }
.page-growth .mcv-card p { color: var(--gray-400); line-height: 1.7; margin-bottom: 20px; }
.page-growth .mcv-list { list-style: none; margin-bottom: 28px; }
.page-growth .mcv-list li { display: flex; align-items: center; gap: 10px; color: var(--gray-300); margin-bottom: 12px; font-size: 14px; }
.page-growth .mcv-list li i { color: var(--gold); flex-shrink: 0; }
.page-growth .mcv-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.page-growth .mcv-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.page-growth .mcv-panel h3 { font-size: 18px; margin-bottom: 16px; }
.page-growth .mcv-panel ul { list-style: none; }
.page-growth .mcv-panel li { color: var(--gray-400); margin-bottom: 12px; font-size: 14px; }
.page-growth .services-section { padding: 100px 0; background: var(--bg-2); }
.page-growth .section-header { text-align: center; margin-bottom: 64px; }
.page-growth .section-header h2 { font-size: 40px; margin-bottom: 16px; }
.page-growth .section-header p { font-size: 18px; max-width: 600px; margin: 0 auto; }
.page-growth .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-growth .service-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px 32px; transition: all 0.3s ease; box-shadow: var(--shadow-card); }
.page-growth .service-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-growth .service-card.featured { border-color: var(--gold-fill); background: linear-gradient(145deg, rgba(224, 133, 31, 0.08) 0%, #FFFFFF 100%); }
.page-growth .service-icon { width: 64px; height: 64px; background: rgba(224, 133, 31, 0.12); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 24px; color: var(--gold); }
.page-growth .service-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.page-growth .service-card .service-tagline { color: var(--gold); font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.page-growth .service-card p { color: var(--gray-400); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.page-growth .service-features { list-style: none; margin-bottom: 32px; }
.page-growth .service-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray-300); margin-bottom: 12px; }
.page-growth .service-features li i { color: var(--gold); flex-shrink: 0; }
.page-growth .service-price { font-size: 32px; font-weight: 700; color: var(--gold); margin-bottom: 24px; }
.page-growth .service-price span { font-size: 16px; font-weight: 400; color: var(--gray-500); }
.page-growth .capabilities-section { padding: 100px 0; background: var(--bg); }
.page-growth .capabilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.page-growth .capability-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; display: flex; gap: 24px; transition: all 0.2s; box-shadow: var(--shadow-card); }
.page-growth .capability-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-growth .capability-icon { width: 56px; height: 56px; background: rgba(224, 133, 31, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; color: var(--gold); }
.page-growth .capability-content h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.page-growth .capability-content p { color: var(--gray-400); font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
/* the 16px cleared the "Learn about X" link that used to follow; with that gone the
   paragraph is the last child and the gap is just dead space at the card foot. */
.page-growth .capability-content p:last-child { margin-bottom: 0; }
.page-growth .capability-link { color: var(--gold); font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.page-growth .capability-link:hover { text-decoration: underline; }
.page-growth .grants-section { padding: 100px 0; background: var(--bg-2); }
.page-growth .grants-card { background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.02) 100%); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: 24px; padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; box-shadow: var(--shadow-card); }
.page-growth .grants-content h2 { font-size: 36px; font-weight: 700; margin-bottom: 16px; }
.page-growth .grants-content h2 .amount { color: var(--advoc8-blue); }
.page-growth .grants-content p { color: var(--gray-400); font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.page-growth .grants-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.page-growth .grants-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray-300); }
.page-growth .grants-feature i { color: var(--advoc8-blue); }
.page-growth .grants-visual { text-align: center; }
.page-growth .grants-amount-display { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 48px; box-shadow: var(--shadow-card); }
.page-growth .grants-amount-display .label { font-size: 14px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.page-growth .grants-amount-display .amount { font-size: 64px; font-weight: 700; color: var(--advoc8-blue); line-height: 1; margin-bottom: 8px; }
.page-growth .grants-amount-display .period { font-size: 18px; color: var(--gray-400); }
.page-growth .grants-amount-display .yearly { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--gray-500); }
.page-growth .grants-amount-display .yearly strong { color: var(--ink); font-size: 24px; }
.page-growth .case-studies-section { padding: 100px 0; background: var(--bg); }
.page-growth .case-studies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-growth .case-studies-section .case-study-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; display: block; padding: 0; box-shadow: var(--shadow-card); }
.page-growth .case-studies-section .case-study-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-growth .case-study-image { height: 180px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 13px; }
/* has-photo turns the placeholder panel into an image frame. overflow:hidden is the part
   that matters: an 800x500 capture in a 180px box without it spills below the frame and
   the card text paints on top, which is exactly what happened with the team photos. */
/* Client captures are shown whole. The frame takes the image ratio rather than a fixed
   height, so nothing is cropped and there is no letterboxing either. contain is used
   rather than cover so a future image of a different shape letterboxes instead of
   silently losing its edges. */
.page-growth .case-study-image.has-photo { overflow: hidden; padding: 0; height: auto; aspect-ratio: 600 / 338; background: var(--bg-2); }
.page-growth .case-study-image.has-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* the highlight banner is 1099x464, shown at its own ratio so the whole council photo
   and the wordmark are visible */
.page-growth .case-study-photo { height: auto; aspect-ratio: 1099 / 464; background-size: contain; background-position: center; }
/* A soft diagonal sheen on the three case study card images only, so a flat screenshot
   reads as glass rather than a pasted rectangle. Same angle and falloff as the hero panel
   (.page-home .hero-screen::after), so the two treatments match. */
.page-growth .case-study-image.has-photo { position: relative; }
.page-growth .case-study-image.has-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(116deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 17%, rgba(255,255,255,0) 42%);
}
.page-growth .case-study-content { padding: 28px; }
.page-growth .case-study-type { font-size: 11px; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.page-growth .case-study-content h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; line-height: 1.4; }
.page-growth .case-study-results { display: flex; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.page-growth .case-study-stat { text-align: center; }
/* 18px rather than 24px: three stats share about 87px each in a card, so a word-based
   value ("Doubled", "2x more") needs the smaller size to sit on one or two tidy lines. */
.page-growth .case-study-stat .number { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--gold); }
.page-growth .case-study-stat .label { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.page-growth .nmc-section { padding: 100px 0; background: var(--bg-2); }
.page-growth .nmc-card { background: linear-gradient(135deg, rgba(224, 133, 31, 0.1) 0%, rgba(224, 133, 31, 0.02) 100%); border: 1px solid rgba(224, 133, 31, 0.28); border-radius: 24px; padding: 64px; text-align: center; box-shadow: var(--shadow-card); }
.page-growth .nmc-logo { font-size: 28px; font-weight: 700; color: var(--gold); margin-bottom: 16px; }
.page-growth .nmc-card h2 { font-size: 36px; font-weight: 700; margin-bottom: 16px; }
.page-growth .nmc-card > p { color: var(--gray-400); font-size: 17px; max-width: 700px; margin: 0 auto 40px; line-height: 1.7; }
.page-growth .nmc-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
.page-growth .nmc-service { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; text-align: center; box-shadow: var(--shadow-card); }
.page-growth .nmc-service-icon { font-size: 32px; margin-bottom: 12px; color: var(--gold); }
.page-growth .nmc-service h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.page-growth .nmc-service p { font-size: 12px; color: var(--gray-500); }
.page-growth .cta-section { background: linear-gradient(135deg, rgba(22,33,62,0.9) 0%, rgba(22,33,62,0.82) 100%),
        url("https://images.unsplash.com/photo-1758272133786-ee98adcc6837?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; position: relative; overflow: hidden; }
.page-growth .cta-section::before { bottom: 0; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; background: radial-gradient(ellipse at 50% 100%, rgba(224, 133, 31, 0.18) 0%, transparent 60%); }
.page-growth .cta-section h2 { color: #fff; }
.page-growth .cta-section p { margin-bottom: 40px; margin-left: auto; margin-right: auto; }
.page-growth .sticky-cta { right: 24px; }
.page-growth .cta-phone { color: rgba(255,255,255,0.75); }
.page-growth .cta-phone a { color: var(--gold-light); }
.page-growth .cta-section .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.45); }
.page-growth .cta-section .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
@media (max-width: 1024px) {
.page-growth .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.page-growth .intro-grid { grid-template-columns: 1fr; gap: 48px; }
.page-growth .mcv-card { grid-template-columns: 1fr; }
.page-growth .services-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
.page-growth .capabilities-grid { grid-template-columns: 1fr; }
.page-growth .grants-card { grid-template-columns: 1fr; gap: 48px; }
.page-growth .case-studies-grid { grid-template-columns: 1fr; }
.page-growth .nmc-services { grid-template-columns: repeat(2, 1fr); }
.page-growth .case-study-card { grid-template-columns: 1fr; text-align: center; }
.page-growth .sticky-cta { display: none; }
}
@media (max-width: 768px) {
.page-growth .stats-grid { grid-template-columns: 1fr; }
.page-growth .hero-cta { flex-direction: column; align-items: center; }
.page-growth .grants-features { grid-template-columns: 1fr; }
.page-growth .nmc-services { grid-template-columns: 1fr; }
.page-growth .cta-buttons { flex-direction: column; }
}

@media (max-width: 600px) {
/* Growth cards were built at desktop insets and never eased for a phone. On a 375px screen
   the container is 327px, so the grants card spends 128px of it on its own padding and the
   $10,000 figure nested inside gets 103px to live in. Every nested inset comes down together. */
.page-growth .nmc-card, .page-growth .grants-card { padding: 32px 24px; }
.page-growth .mcv-card { padding: 28px 22px; }
.page-growth .grants-amount-display { padding: 28px 20px; }
.page-growth .mcv-panel { padding: 22px 18px; }
/* "NonprofitMarketingCenter.com" is one 28-character word with nothing to break on, so it
   has to scale rather than wrap. overflow-wrap is the backstop if it ever grows. */
.page-growth .nmc-logo { font-size: clamp(14px, 4.4vw, 28px); overflow-wrap: anywhere; }
.page-growth .nmc-card h2, .page-growth .grants-content h2, .page-growth .mcv-card h2 { font-size: 26px; }
.page-growth .grants-amount-display .amount { font-size: 44px; }
.page-growth .grants-amount-display .yearly strong { font-size: 20px; }
/* The partner badge is an inline-flex row: on a phone it squeezes its two children into
   ragged columns instead of stacking. */
.page-growth .partner-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px; }
.page-growth .partner-badge-logo { overflow-wrap: anywhere; }
/* Three stat blocks in a nowrap flex row do not fit a 320px card. */
.page-growth .case-study-results { flex-wrap: wrap; gap: 16px 20px; }
}

/* NMC card CTA: the full domain label needs 303px and does not fit inside this card until
   480px wide, so below that the short label is shown instead. The domain is not lost, it is
   the .nmc-logo headline at the top of the same card. Exactly one of the two is ever shown. */
.page-growth .nmc-cta-short { display: none; }
@media (max-width: 479px) {
.page-growth .nmc-cta-long { display: none; }
.page-growth .nmc-cta-short { display: inline-flex; }
}

/* Long unbreakable tokens (domains, email addresses, brand names like NonprofitWebsites)
   set a min-content width that blows out whatever grid or card they sit in, so a narrow
   screen gets horizontal page scroll instead of a wrapped word. Let them break. This only
   ever acts on a word that would otherwise overflow. Buttons are unaffected: their
   white-space:nowrap wins over this. */
@media (max-width: 600px) {
body { overflow-wrap: anywhere; }
}

/* ---------- page-guides ---------- */
.page-guides { --gray-600: #AAB4AE; }
.page-guides .hero { position: relative; overflow: hidden; text-align: center; }
.page-guides .hero .container { position: relative; }
.page-guides .hero-badge { margin-bottom: 16px; }
.page-guides .hero h1 { line-height: 1.15; }
.page-guides .hero-subtitle { max-width: 700px; margin: 0 auto 32px; }
.page-guides .search-bar:focus-within { box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.15); }
.page-guides .search-bar button { display: flex; align-items: center; justify-content: center; }
.page-guides .filters { margin-top: 20px; }
.page-guides .chip { box-shadow: var(--shadow-card); }
.page-guides .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-guides .section-header p { max-width: 560px; }
.page-guides .card { transition: all 0.2s ease; color: inherit; text-decoration: none; display: block; }
.page-guides .media { height: 180px; border-radius: 12px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); margin-bottom: 16px; position: relative; overflow: hidden; }
.page-guides .tag { gap: 6px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.page-guides .card h3 { font-weight: 600; }
.page-guides .card p { font-size: 14px; margin-bottom: 12px; }
.page-guides .meta { display: flex; align-items: center; gap: 12px; }
.page-guides .lead-magnet { border-radius: 20px; padding: 40px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.page-guides .lead-magnet::before { content: ''; position: absolute; top: -40%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(224, 133, 31, 0.18) 0%, transparent 60%); pointer-events: none; }
.page-guides .lead-magnet > * { position: relative; }
.page-guides .lead-magnet h2 { font-size: 28px; margin-bottom: 12px; color: #fff; }
.page-guides .lead-magnet p { color: rgba(255,255,255,0.72); margin-bottom: 16px; }
.page-guides .lead-magnet-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-guides .lead-magnet-form input { min-width: 0; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #fff; outline: none; transition: border-color 0.2s; }
.page-guides .lead-magnet-form .field-wide { grid-column: 1 / -1; }
.page-guides .lead-magnet-form .btn { grid-column: 1 / -1; }
.page-guides .no-results { grid-column: 1 / -1; margin: 0; padding: 32px 0; text-align: center; color: var(--gray-400); font-size: 15px; }
.page-guides .no-results a { color: var(--gold); text-decoration: none; font-weight: 600; }
.page-guides .lead-magnet-form input:focus { border-color: var(--gold-light); }
.page-guides .lead-magnet-form input::placeholder { color: rgba(255,255,255,0.5); }
.page-guides .ebook { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 24px; text-align: center; }
.page-guides .ebook h4 { font-size: 18px; margin-bottom: 8px; color: #fff; }
.page-guides .ebook p { color: rgba(255,255,255,0.72); font-size: 13px; }
.page-guides .pagination { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.page-guides .page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.page-guides .page:hover { border-color: var(--gold-fill); color: var(--gold-dark); }
.page-guides .page:focus-visible { outline: 2px solid var(--gold-fill); outline-offset: 2px; }
.page-guides .page.active { background: var(--gold-fill); border-color: transparent; color: var(--ink); font-weight: 600; }
.page-guides .page.active:hover { color: var(--ink); }
@media (max-width: 1024px) {
.page-guides .grid-3 { grid-template-columns: repeat(2, 1fr); }
.page-guides .lead-magnet { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-guides .grid-3, .page-guides .grid-2 { grid-template-columns: 1fr; }
.page-guides .section-header { flex-direction: column; align-items: flex-start; }
.page-guides .lead-magnet-form { grid-template-columns: 1fr; }
}

/* ---------- page-help-center ---------- */
.page-help-center { --gray-600: #AAB4AE; }
.page-help-center .hero { position: relative; overflow: hidden; text-align: center; }
.page-help-center .hero .container { position: relative; }
.page-help-center .hero h1 { line-height: 1.15; }
.page-help-center .hero-subtitle { max-width: 700px; margin: 0 auto 32px; }
.page-help-center .search-container { max-width: 640px; }
.page-help-center .search-bar { background: var(--card); transition: border-color 0.2s; }
.page-help-center .search-bar:focus-within { border-color: var(--gold-fill); }
.page-help-center .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-help-center .section-header p { max-width: 560px; }
.page-help-center .card { transition: all 0.2s ease; color: inherit; text-decoration: none; display: block; }
.page-help-center .card h3 { font-weight: 600; }
.page-help-center .card p { font-size: 14px; }
/* generateGuides STYLE=2 emits .tag / .meta inside its cards, the same markup /Guides renders.
   Give this page the same treatment so the cards do not come out half styled. */
.page-help-center .tag { gap: 6px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.page-help-center .meta { display: flex; align-items: center; gap: 12px; }
.page-help-center .no-results { grid-column: 1 / -1; margin: 0; padding: 32px 0; text-align: center; color: var(--gray-400); font-size: 15px; }
.page-help-center .no-results a { color: var(--gold); text-decoration: none; font-weight: 600; }
.page-help-center .article-list { display: grid; gap: 14px; }
.page-help-center .article-item { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; background: var(--card); box-shadow: var(--shadow-card); }
.page-help-center .article-item span { color: var(--gray-500); font-size: 13px; }
.page-help-center .faq-list { display: grid; gap: 16px; max-width: 860px; }
.page-help-center .faq-item { padding: 22px 24px; border-radius: 14px; }
.page-help-center .faq-item h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.page-help-center .faq-item p { font-size: 15px; }
.page-help-center .support-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; box-shadow: var(--shadow-card); }
.page-help-center .support-card h2 { font-size: 28px; margin-bottom: 8px; }
.page-help-center .support-card p { color: var(--gray-400); }
@media (max-width: 1024px) {
.page-help-center .grid-3 { grid-template-columns: repeat(2, 1fr); }
.page-help-center .support-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
.page-help-center .grid-3 { grid-template-columns: 1fr; }
.page-help-center .section-header { flex-direction: column; align-items: flex-start; }
}

/* ---------- page-home ---------- */
.page-home .hero { padding: 100px 0; position: relative; overflow: hidden; }
.page-home .hero::before { display: none; }
.page-home .hero .container { position: relative; text-align: center; }
.page-home .hero .eyebrow { text-align: center; }
.page-home .hero h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.08; margin-bottom: 24px; }
.page-home .hero-subtitle { font-size: 20px; max-width: 640px; margin: 0 auto 40px; line-height: 1.6; }
.page-home .hero-cta { margin-bottom: 28px; }
.page-home .hero-funding-note { color: var(--gray-500); font-size: 14px; margin-bottom: 56px; }
.page-home .hero-funding-note strong { color: var(--gold); font-weight: 600; }
.page-home .hero-visual { position: relative; margin-top: 24px; }
.page-home .hero-browser { background: #EEF1F6; border-radius: 16px; border: 1px solid var(--line-2); overflow: hidden; box-shadow: 0 12px 32px rgba(22,33,62,0.10); }
.page-home .browser-bar { background: #E3E8F0; padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.page-home .browser-dot { width: 12px; height: 12px; border-radius: 50%; background: #C5CCD8; }
.page-home .browser-dot.red { background: #FF5F57; }
.page-home .browser-dot.yellow { background: #FFBD2E; }
.page-home .browser-dot.green { background: #28C840; }
.page-home .browser-url { flex: 1; margin-left: 12px; background: #FFFFFF; padding: 8px 16px; border-radius: 6px; font-size: 13px; color: var(--gray-500); }
.page-home .browser-content { height: 400px; background: linear-gradient(180deg, #F2F5F9 0%, #E8ECF2 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 14px; }
.page-home .proof-bar { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.page-home .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.page-home .proof-stat .num { font-size: 36px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.page-home .proof-stat .label { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.page-home .funding { padding: 100px 0; background: var(--bg-2); text-align: center; }
.page-home .funding-card { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(224, 133, 31, 0.12) 0%, rgba(224, 133, 31, 0.03) 100%); border: 1px solid rgba(224, 133, 31, 0.3); border-radius: 24px; padding: 64px 56px; box-shadow: var(--shadow-card); }
.page-home .funding-card h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 700; line-height: 1.15; margin-bottom: 20px; letter-spacing: -0.02em; }
.page-home .funding-card .lead { color: var(--gray-300); font-size: 19px; max-width: 640px; margin: 0 auto 16px; }
.page-home .funding-card .sub { color: var(--gray-500); font-size: 15px; max-width: 560px; margin: 0 auto 32px; }
.page-home .section-header { text-align: center; margin-bottom: 56px; }
.page-home .section-header h2 { font-size: 40px; margin-bottom: 16px; letter-spacing: -0.02em; }
.page-home .section-header p { font-size: 18px; max-width: 620px; margin: 0 auto; }
.page-home .benefits { padding: 110px 0; background: var(--bg); }
.page-home .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-home .benefit-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-card); transition: all 0.3s ease; }
.page-home .benefit-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-home .benefit-icon { width: 48px; height: 48px; background: rgba(224, 133, 31, 0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gold); }
.page-home .benefit-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.page-home .benefit-card p { color: var(--gray-400); font-size: 15px; line-height: 1.6; }
/* Icon sits beside the text, not above it. Every child placed explicitly so nothing relies on grid auto-flow. */
.page-home .benefits-grid .benefit-card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: start; }
.page-home .benefits-grid .benefit-card .benefit-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; align-self: start; }
.page-home .benefits-grid .benefit-card h3 { grid-column: 2; grid-row: 1; }
.page-home .benefits-grid .benefit-card p { grid-column: 2; grid-row: 2; margin-bottom: 0; }
.page-home .platform { padding: 110px 0; background: var(--bg-2); position: relative; overflow: hidden; }
.page-home .platform::before { display: none; }
.page-home .platform .container { position: relative; }
.page-home .platform-intro { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.page-home .platform-intro h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.page-home .platform-intro p { color: var(--gray-400); font-size: 18px; }
.page-home .platform-intro .advoc8-note { margin-top: 16px; font-size: 14px; color: var(--gray-500); }
.page-home .platform-intro .advoc8-note strong { color: var(--advoc8-blue); }
.page-home .modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-home .module-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: var(--shadow-card); }
.page-home .module-card .ico { width: 40px; height: 40px; background: rgba(224, 133, 31, 0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gold); }
.page-home .module-card h4 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.page-home .module-card p { color: var(--gray-400); font-size: 14px; }
/* Icon sits beside the text, not above it. Every child placed explicitly so nothing relies on grid auto-flow. */
.page-home .modules-grid .module-card { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: start; }
.page-home .modules-grid .module-card .ico { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; align-self: start; }
.page-home .modules-grid .module-card h4 { grid-column: 2; grid-row: 1; }
.page-home .modules-grid .module-card p { grid-column: 2; grid-row: 2; margin-bottom: 0; }
.page-home .platform-cta { text-align: center; margin-top: 44px; }
.page-home .gallery { padding: 110px 0; background: var(--bg); }
.page-home .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.page-home .gallery-item { background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: all 0.3s ease; }
.page-home .gallery-item:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-home .gallery-image { height: 180px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 13px; }
.page-home .gallery-info { padding: 16px; }
.page-home .gallery-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.page-home .gallery-info span { color: var(--gold); font-size: 13px; }
.page-home a.gallery-item { display: block; text-decoration: none; color: inherit; }
.page-home a.gallery-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.page-home .gallery-image { aspect-ratio: 16 / 10; height: auto; }
.page-home .gallery-image.has-photo { padding: 0; }
.page-home .gallery-image.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-home .pricing { padding: 110px 0; background: var(--bg-2); }
.page-home .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 860px; margin: 0 auto 24px; }
.page-home .pricing-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 36px; position: relative; box-shadow: var(--shadow-card); transition: all 0.3s ease; }
.page-home .pricing-card:hover { border-color: var(--line-2); }
.page-home .pricing-card.featured { border-color: var(--gold-fill); background: linear-gradient(145deg, rgba(224, 133, 31, 0.08) 0%, #FFFFFF 100%); }
.page-home .pricing-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold-fill); color: var(--ink); padding: 6px 16px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.page-home .pricing-name { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.page-home .pricing-for { color: var(--gold); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.page-home .pricing-price { font-size: 48px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.page-home .pricing-price span { font-size: 16px; font-weight: 400; color: var(--gray-500); }
.page-home .pricing-features { list-style: none; margin-bottom: 28px; }
.page-home .pricing-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--gray-300); margin-bottom: 12px; }
.page-home .pricing-features li::before { content: '\2713'; color: var(--gold); font-weight: 600; flex-shrink: 0; }
.page-home .pricing-card .btn { width: 100%; }
.page-home .pricing-foot { text-align: center; }
.page-home .pricing-foot p { color: var(--gray-500); font-size: 14px; margin-bottom: 12px; }
.page-home .testimonials { padding: 110px 0; background: var(--bg); }
.page-home .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-home .testimonial-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-card); }
.page-home .testimonial-stars { color: var(--gold); font-size: 16px; margin-bottom: 16px; }
.page-home .testimonial-quote { font-size: 16px; line-height: 1.7; margin-bottom: 24px; color: var(--gray-200); }
.page-home .testimonial-author { display: flex; align-items: center; gap: 12px; }
.page-home .testimonial-avatar { width: 44px; height: 44px; background: var(--gold-fill); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); font-size: 16px; }
.page-home .testimonial-info h4 { font-size: 15px; font-weight: 600; }
.page-home .testimonial-info p { font-size: 13px; color: var(--gray-500); }
.page-home .final-cta { padding: 120px 0; background: var(--bg-2); text-align: center; position: relative; overflow: hidden; }
.page-home .final-cta::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; background: radial-gradient(ellipse at 50% 100%, rgba(224, 133, 31, 0.14) 0%, transparent 60%); pointer-events: none; }
.page-home .final-cta .container { position: relative; }
.page-home .final-cta h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
.page-home .final-cta p { color: var(--gray-400); font-size: 18px; margin-bottom: 40px; }
.page-home .final-cta .cta-phone { margin-top: 24px; color: var(--gray-400); }
.page-home .final-cta .cta-phone a { color: var(--gold); text-decoration: none; }
.page-home .browser-content { padding: 0; }
.page-home .hero-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-home .final-cta { background: linear-gradient(rgba(22,33,62,0.82),rgba(22,33,62,0.9)),url("https://images.unsplash.com/photo-1758272133786-ee98adcc6837?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; }
.page-home .final-cta::before { display: none; }
.page-home .final-cta h2 { color: #fff; }
.page-home .final-cta p { color: rgba(255,255,255,0.85); }
.page-home .final-cta .cta-phone { color: rgba(255,255,255,0.8); }
.page-home .final-cta .cta-phone a { color: var(--gold-light); }
/* Hero and closing CTA layout response to the base no-wrap rule. The two hero buttons stop
   fitting side by side at about 580px, so below 600px they stack at full width instead of
   the text wrapping to three lines inside a squeezed pill. */
.page-home .hero-cta { flex-wrap: wrap; }
@media (max-width: 600px) {
.page-home .hero-cta { flex-direction: column; align-items: center; }
.page-home .hero-cta .btn { width: 100%; max-width: 360px; }
}
@media (max-width: 1024px) {
.page-home .benefits-grid, .page-home .modules-grid { grid-template-columns: repeat(2, 1fr); }
.page-home .gallery-grid { grid-template-columns: repeat(2, 1fr); }
.page-home .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
.page-home .hero h1 { font-size: 36px; }
.page-home .benefits-grid, .page-home .modules-grid, .page-home .pricing-grid, .page-home .testimonials-grid { grid-template-columns: 1fr; }
.page-home .funding-card { padding: 40px 28px; }
}

/* ==================================================================
   HOMEPAGE HERO: the site on a lit panel in an ink void (direction 12).
   Copy sits left, the panel angles in from the right and is cropped by the
   hero edge so it reads as larger than the band containing it. The dark
   field carries on through the proof bar, otherwise the ink hero meets a
   white section and the two read as separate pages.
   The panel is CSS, not a render: transform, bezel gradient, one specular.
   ================================================================== */
.page-home .hero { padding: 0; background: radial-gradient(ellipse 88% 96% at 64% 6%, #2C4272 0%, #1C2C53 36%, #131D38 68%, #0B1226 100%); }
.page-home .hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 46% 56% at 68% 64%, rgba(239,162,72,0.26), transparent 70%);
}
.page-home .hero .container {
  position: relative; z-index: 2; text-align: left;
  display: grid; grid-template-columns: minmax(0, 52%) 1fr; align-items: center;
  gap: 24px; min-height: 560px; padding-top: 88px; padding-bottom: 88px;
}
.page-home .hero h1 { color: #FFFFFF; margin-bottom: 20px; }
.page-home .hero h1 .highlight { color: var(--gold-light); }
.page-home .hero-subtitle { color: rgba(255,255,255,0.78); margin: 0 0 30px; max-width: 46ch; }
.page-home .hero-cta { justify-content: flex-start; margin-bottom: 22px; }
.page-home .hero-funding-note { color: rgba(255,255,255,0.66); margin-bottom: 0; }
.page-home .hero-funding-note strong { color: #FFFFFF; }
/* the outline CTA has to survive on the dark ground */
.page-home .hero-cta .btn-secondary { color: #FFFFFF; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); }
.page-home .hero-cta .btn-secondary:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.16); }

.page-home .hero-stage { position: relative; perspective: 1500px; }
.page-home .hero-rig {
  position: absolute; top: 50%; left: -6%; width: 152%;
  transform: translateY(-50%) rotateX(7deg) rotateY(-25deg) rotateZ(1.5deg);
  transform-style: preserve-3d;
}
.page-home .hero-panel {
  position: relative; border-radius: 20px; padding: 13px;
  background: linear-gradient(146deg, #E8EDF3 0%, #9AA7B8 24%, #59667A 52%, #C3CEDB 74%, #6B7889 100%);
  box-shadow: 0 70px 140px rgba(0,0,0,0.62), 0 14px 34px rgba(0,0,0,0.44);
}
/* crisp lit edge, then the long specular running off the top-left corner */
.page-home .hero-panel::before {
  content: ''; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,0.92), inset -1px -1px 0 rgba(8,12,24,0.30);
}
.page-home .hero-panel::after {
  content: ''; position: absolute; inset: -2px; border-radius: 22px; pointer-events: none;
  background: linear-gradient(124deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.32) 5%, rgba(255,255,255,0) 18%);
}
.page-home .hero-screen { position: relative; display: block; border-radius: 9px; overflow: hidden; }
.page-home .hero-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(116deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.06) 16%, transparent 40%);
}
.page-home .hero-glass { display: block; width: 100%; height: auto; }

/* the dark field continues, so the crop line falls inside one block */
.page-home .proof-bar { background: #0B1226; border-top: 0; border-bottom: 0; }
.page-home .proof-stat .num { color: var(--gold-light); }
.page-home .proof-stat .label { color: rgba(255,255,255,0.62); }

@media (max-width: 1024px) {
/* The hard angle stops being readable once the column narrows, so the panel
   flattens, centres and drops below the copy. */
.page-home .hero .container {
  grid-template-columns: 1fr; text-align: center; gap: 0;
  min-height: 0; padding-top: 76px; padding-bottom: 0;
}
.page-home .hero-subtitle { margin-left: auto; margin-right: auto; }
.page-home .hero-cta { justify-content: center; }
.page-home .hero-stage { perspective: none; height: 300px; margin-top: 44px; }
.page-home .hero-rig { position: relative; top: auto; left: auto; width: 100%; transform: rotateX(6deg); }
}
@media (max-width: 768px) {
.page-home .hero .container { padding-top: 58px; }
.page-home .hero-stage { height: 210px; margin-top: 34px; }
.page-home .hero-panel { border-radius: 14px; padding: 8px; }
.page-home .hero-panel::before, .page-home .hero-panel::after { border-radius: 14px; }
}

/* ---------- page-more-church-visitors ---------- */
.page-more-church-visitors { --green: #1F9D57; }
.page-more-church-visitors .container { max-width: 1200px; }
.page-more-church-visitors .menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff; font-size: 20px; cursor: pointer; }
.page-more-church-visitors .mobile-nav { position: fixed; top: 0; right: 0; width: min(320px, 90vw); height: 100vh; background: var(--ink); border-left: 1px solid rgba(255,255,255,0.12); padding: 24px; transform: translateX(100%); transition: transform 0.25s ease; z-index: 1200; display: flex; flex-direction: column; gap: 16px; }
.page-more-church-visitors .mobile-nav a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 16px; font-weight: 600; }
.page-more-church-visitors .mobile-nav .btn { width: 100%; margin-top: 8px; }
.page-more-church-visitors .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(22,33,62,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1100; }
.page-more-church-visitors .btn { padding: 12px 22px; transition: all 0.2s; }
.page-more-church-visitors .btn-primary:hover { transform: translateY(-2px); }
.page-more-church-visitors .btn-secondary:hover { transform: translateY(-2px); }
.page-more-church-visitors .btn-green { background: var(--gradient-green); color: #fff; }
.page-more-church-visitors .btn-green:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31,157,87,0.28); }
.page-more-church-visitors .hero { padding: 110px 0 80px; background: radial-gradient(circle at top, rgba(31, 157, 87, 0.10), transparent 60%); text-align: center; }
.page-more-church-visitors .hero-badge { color: var(--green); }
.page-more-church-visitors .hero h1 { line-height: 1.1; margin-bottom: 18px; }
.page-more-church-visitors .hero p { color: var(--gray-400); max-width: 720px; margin: 0 auto 28px; font-size: 18px; }
.page-more-church-visitors .hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.page-more-church-visitors .hero-note { margin-top: 14px; color: var(--gray-500); font-size: 13px; }
.page-more-church-visitors .proof-strip { padding: 32px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-more-church-visitors .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.page-more-church-visitors .proof-item h3 { font-size: 24px; font-weight: 700; color: var(--green); margin-bottom: 4px; }
.page-more-church-visitors .proof-item p { color: var(--gray-400); font-size: 13px; }
.page-more-church-visitors .trust-strip { padding: 40px 0; background: var(--bg); text-align: center; }
.page-more-church-visitors .trust-strip p { color: var(--gray-400); margin-bottom: 16px; }
.page-more-church-visitors .trust-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.page-more-church-visitors .trust-badge { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--gray-300); background: var(--card); }
.page-more-church-visitors .qualify { padding: 70px 0; }
.page-more-church-visitors .qualify-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.page-more-church-visitors .qualify-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .qualify-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.page-more-church-visitors .qualify-card ul { list-style: none; }
.page-more-church-visitors .qualify-card li { color: var(--gray-400); margin-bottom: 10px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.page-more-church-visitors .qualify-card li i { color: var(--green); margin-top: 4px; }
.page-more-church-visitors .included { padding: 80px 0; background: var(--bg-2); }
.page-more-church-visitors .included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.page-more-church-visitors .included-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .included-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.page-more-church-visitors .included-card ul { list-style: none; }
.page-more-church-visitors .included-card li { color: var(--gray-400); margin-bottom: 10px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.page-more-church-visitors .included-card li i { color: var(--green); margin-top: 4px; }
.page-more-church-visitors .mini-case { padding: 80px 0; }
.page-more-church-visitors .mini-case-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-card); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: center; }
.page-more-church-visitors .mini-case-card h2 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.page-more-church-visitors .mini-case-list { list-style: none; }
.page-more-church-visitors .mini-case-list li { color: var(--gray-300); margin-bottom: 10px; font-size: 14px; }
.page-more-church-visitors .mini-case-list strong { color: var(--ink); }
.page-more-church-visitors .mini-case-metric { background: rgba(31, 157, 87, 0.10); border: 1px solid rgba(31, 157, 87, 0.3); border-radius: 16px; padding: 18px; text-align: center; }
.page-more-church-visitors .mini-case-metric strong { display: block; font-size: 22px; color: var(--green); margin-bottom: 4px; }
.page-more-church-visitors .mini-case-metric span { color: var(--gray-400); font-size: 13px; }
.page-more-church-visitors .first-30 { padding: 80px 0; background: var(--bg-2); }
.page-more-church-visitors .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-more-church-visitors .timeline-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .timeline-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.page-more-church-visitors .timeline-card p { color: var(--gray-400); font-size: 14px; }
.page-more-church-visitors .safety { padding: 70px 0; }
.page-more-church-visitors .safety-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .safety-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.page-more-church-visitors .safety-card p { color: var(--gray-400); font-size: 14px; }
.page-more-church-visitors .faq { padding: 80px 0; background: var(--bg-2); }
.page-more-church-visitors .faq-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .faq-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.page-more-church-visitors .faq-card p { color: var(--gray-400); font-size: 14px; }
.page-more-church-visitors .sticky-cta { bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(22, 33, 62, 0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 10px 14px; display: none; gap: 10px; z-index: 999; box-shadow: 0 10px 30px rgba(22,33,62,0.25); }
.page-more-church-visitors .sticky-cta span { color: rgba(255,255,255,0.85); font-size: 12px; }
.page-more-church-visitors .overview { padding: 80px 0; }
.page-more-church-visitors .overview-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
.page-more-church-visitors .overview h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.page-more-church-visitors .overview p { color: var(--gray-400); margin-bottom: 16px; line-height: 1.7; }
.page-more-church-visitors .overview-list { list-style: none; }
.page-more-church-visitors .overview-list li { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; color: var(--gray-300); font-size: 14px; }
.page-more-church-visitors .overview-list li i { color: var(--green); font-size: 14px; }
.page-more-church-visitors .overview-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .overview-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.page-more-church-visitors .overview-card p { color: var(--gray-400); font-size: 14px; }
.page-more-church-visitors .features { padding: 80px 0; background: var(--bg-2); }
.page-more-church-visitors .features-header { text-align: center; margin-bottom: 48px; }
.page-more-church-visitors .features-header h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.page-more-church-visitors .features-header p { color: var(--gray-400); max-width: 640px; margin: 0 auto; }
.page-more-church-visitors .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-more-church-visitors .feature-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .feature-card .ico { font-size: 22px; color: var(--gold); margin-bottom: 12px; }
.page-more-church-visitors .feature-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.page-more-church-visitors .feature-card p { color: var(--gray-400); font-size: 14px; line-height: 1.6; }
.page-more-church-visitors .steps { padding: 80px 0; }
.page-more-church-visitors .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-more-church-visitors .step-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-card); }
.page-more-church-visitors .step-card span { color: var(--green); font-weight: 600; font-size: 13px; display: block; margin-bottom: 10px; }
.page-more-church-visitors .step-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.page-more-church-visitors .step-card p { color: var(--gray-400); font-size: 14px; }
.page-more-church-visitors .program-cta { padding: 90px 0; text-align: center; background: radial-gradient(circle at bottom, rgba(224, 133, 31, 0.10), transparent 60%); }
.page-more-church-visitors .program-cta h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.page-more-church-visitors .program-cta p { color: var(--gray-400); margin-bottom: 28px; max-width: 640px; margin-left: auto; margin-right: auto; }
body.mobile-menu-open .mobile-nav { transform: translateX(0); }
body.mobile-menu-open .mobile-nav-overlay { opacity: 1; pointer-events: auto; }
@media (max-width: 1024px) {
.page-more-church-visitors .overview-grid { grid-template-columns: 1fr; }
.page-more-church-visitors .features-grid { grid-template-columns: 1fr; }
.page-more-church-visitors .steps-grid { grid-template-columns: 1fr; }
.page-more-church-visitors .proof-grid { grid-template-columns: repeat(2, 1fr); }
.page-more-church-visitors .qualify-grid { grid-template-columns: 1fr; }
.page-more-church-visitors .included-grid { grid-template-columns: 1fr; }
.page-more-church-visitors .mini-case-card { grid-template-columns: 1fr; }
.page-more-church-visitors .timeline { grid-template-columns: 1fr; }
.page-more-church-visitors .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-more-church-visitors .menu-toggle { display: inline-flex; }
.page-more-church-visitors .hero-actions { flex-direction: column; }
.page-more-church-visitors .sticky-cta { display: flex; }
}

/* ---------- page-partners ---------- */
.page-partners .hero { padding: 90px 0 60px; position: relative; overflow: hidden; text-align: center; }
.page-partners .hero::before { top: -35%; background: radial-gradient(circle, rgba(224, 133, 31, 0.12) 0%, transparent 60%); }
.page-partners .hero .container { position: relative; }
.page-partners .hero h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin-bottom: 18px; }
.page-partners .hero-subtitle { max-width: 700px; margin: 0 auto 28px; }
.page-partners .section-header { margin-bottom: 40px; }
.page-partners .section-header h2 { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 8px; }
.page-partners .section-header p { font-size: 17px; }
.page-partners .card { background: var(--gradient-card); transition: all 0.3s ease; }
.page-partners .card .ico { font-size: 22px; color: var(--gold); margin-bottom: 14px; }
.page-partners .card h3 { font-weight: 600; }
.page-partners .card p { font-size: 14px; }
.page-partners .cta { background: var(--gradient-card); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.page-partners .cta h2 { font-weight: 700; }
@media (max-width: 1024px) {
.page-partners .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-partners .grid-3 { grid-template-columns: 1fr; }
.page-partners .cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- page-platform ---------- */
.page-platform .on-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.25); }
.page-platform .on-dark .btn-secondary:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
.page-platform .hero { padding: 90px 0 70px; position: relative; overflow: hidden; text-align: center; }
.page-platform .hero::before { top: -35%; }
.page-platform .hero .container { position: relative; }
.page-platform .hero h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.1; margin-bottom: 18px; }
.page-platform .hero-subtitle { max-width: 680px; margin: 0 auto 28px; }
.page-platform .hero-cta { gap: 14px; flex-wrap: wrap; }
.page-platform .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-platform .section-header p { max-width: 560px; }
.page-platform .card { transition: all 0.2s ease; color: inherit; text-decoration: none; display: block; }
.page-platform .card h3 { font-weight: 600; }
.page-platform .card p { font-size: 14px; }
/* Icon sits beside the text, not above it. Every child placed explicitly so nothing relies on grid auto-flow.
   Tile normalized to 48px/12px to match the homepage benefit cards (global .public-icon is 52px/14px). */
.page-platform .grid-3 .card, .page-platform .grid-2 .card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: start; }
.page-platform .grid-3 .card .public-icon, .page-platform .grid-2 .card .public-icon { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; font-size: 20px; border-radius: 12px; margin-bottom: 0; align-self: start; }
.page-platform .grid-3 .card h3, .page-platform .grid-2 .card h3 { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
.page-platform .grid-3 .card p, .page-platform .grid-2 .card p { grid-column: 2; grid-row: 2; margin-bottom: 0; }
.page-platform .platform-everything { background: var(--ink); color: #fff; }
.page-platform .platform-everything .section-header h2 { color: #fff; }
.page-platform .platform-everything .section-header p { color: rgba(255,255,255,0.65); }
.page-platform .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.page-platform .module-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 28px; transition: all 0.2s ease; }
.page-platform .module-card:hover { border-color: rgba(224, 133, 31, 0.45); }
.page-platform .module-card h3 { font-size: 20px; margin-bottom: 8px; color: #fff; }
.page-platform .module-card > p { color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.page-platform .module-list { list-style: none; display: grid; gap: 10px; }
.page-platform .module-list li { color: rgba(255,255,255,0.82); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.page-platform .module-list li i { color: var(--gold-light); margin-top: 3px; flex-shrink: 0; }
.page-platform .module-outcome { margin-top: 16px; padding: 12px 14px; border-left: 2px solid var(--gold-fill); background: rgba(224, 133, 31, 0.12); border-radius: 8px; font-size: 13px; color: rgba(255,255,255,0.82); }
.page-platform .module-outcome strong { color: var(--gold-light); font-weight: 600; }
.page-platform .feature { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; box-shadow: var(--shadow-card); }
.page-platform .feature h2 { font-size: 28px; margin-bottom: 12px; }
.page-platform .feature p { color: var(--gray-400); margin-bottom: 16px; }
.page-platform .feature-media { height: 260px; border-radius: 16px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); overflow: hidden; }
.page-platform .feature-media.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-platform .cta { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); display: flex; justify-content: space-between; align-items: center; gap: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.page-platform .cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,33,62,0.82) 0%, rgba(22,33,62,0.9) 100%),
        url("https://images.unsplash.com/photo-1758272133786-ee98adcc6837?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; pointer-events: none; }
.page-platform .cta > div { position: relative; z-index: 1; }
.page-platform .cta h2 { color: #fff; }
.page-platform .cta p { color: rgba(255,255,255,0.85); }
.page-platform .cta .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.3); }
.page-platform .cta .btn-secondary:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }
@media (max-width: 1024px) {
.page-platform .grid-3 { grid-template-columns: repeat(2, 1fr); }
.page-platform .feature { grid-template-columns: 1fr; }
.page-platform .module-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-platform .grid-3, .page-platform .grid-2 { grid-template-columns: 1fr; }
.page-platform .section-header { flex-direction: column; align-items: flex-start; }
.page-platform .cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- page-pricing ---------- */
.page-pricing { --green: #1F9D55; }
.page-pricing .btn-sm { padding: 10px 20px; }
.page-pricing .btn-dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.page-pricing .btn-dark:hover { background: #0F1830; }
.page-pricing .hero { position: relative; overflow: hidden; }
.page-pricing .hero::before { background: radial-gradient(circle, rgba(224, 133, 31, 0.12) 0%, transparent 60%); }
.page-pricing .hero .container { position: relative; text-align: center; }
.page-pricing .hero h1 { line-height: 1.15; margin-bottom: 20px; }
.page-pricing .hero-subtitle { max-width: 600px; margin: 0 auto; }
.page-pricing .funding-intro { padding: 56px 0 8px; background: var(--bg); text-align: center; }
.page-pricing .funding-intro h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.page-pricing .funding-intro p { color: var(--gray-400); font-size: 16px; max-width: 560px; margin: 0 auto; }
.page-pricing .funding-compare { margin: 32px auto 0; }
.page-pricing .pricing-section { padding: 60px 0; background: var(--bg); }
.page-pricing .pricing-section.alt { background: var(--bg-2); }
.page-pricing .section-label { display: inline-block; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px; }
.page-pricing .section-label.blue { color: var(--advoc8-blue); }
.page-pricing .section-header { text-align: center; margin-bottom: 48px; }
.page-pricing .section-header h2 { margin-bottom: 12px; letter-spacing: -0.02em; }
.page-pricing .section-header p { font-size: 17px; max-width: 600px; margin: 0 auto; }
.page-pricing .pricing-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.page-pricing .pricing-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-pricing .pricing-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 40px 32px; position: relative; box-shadow: var(--shadow-card); transition: all 0.3s ease; }
.page-pricing .pricing-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-pricing .pricing-card.featured { border-color: var(--gold-fill); background: linear-gradient(145deg, rgba(224, 133, 31, 0.08) 0%, #FFFFFF 100%); }
.page-pricing .pricing-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold-fill); color: var(--ink); padding: 6px 16px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.page-pricing .pricing-header { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-pricing .pricing-icon { width: 56px; height: 56px; background: rgba(224, 133, 31, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; color: var(--gold); }
.page-pricing .pricing-name { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.page-pricing .pricing-tagline { color: var(--gray-500); font-size: 14px; }
.page-pricing .pricing-price-wrapper { margin-bottom: 8px; }
.page-pricing .pricing-price { font-size: 56px; font-weight: 700; color: var(--gold); line-height: 1; }
.page-pricing .pricing-price .currency { font-size: 24px; font-weight: 600; vertical-align: top; margin-right: 2px; }
.page-pricing .pricing-price .period { font-size: 16px; font-weight: 400; color: var(--gray-500); }
.page-pricing .pricing-price .plus { font-size: 24px; color: var(--gray-400); }
.page-pricing .pricing-best-for { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; }
.page-pricing .pricing-best-for span { color: var(--ink); font-weight: 600; }
.page-pricing .pricing-description { color: var(--gray-400); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
.page-pricing .pricing-features { list-style: none; margin-bottom: 32px; }
.page-pricing .pricing-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--gray-300); margin-bottom: 14px; line-height: 1.5; }
.page-pricing .pricing-features li .check { width: 20px; height: 20px; background: rgba(224, 133, 31, 0.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 10px; color: var(--gold); }
.page-pricing .pricing-card .btn { width: 100%; }
.page-pricing .pricing-risk { margin-top: 12px; font-size: 12px; color: var(--gray-500); text-align: center; }
.page-pricing .plan-compare { margin-top: 32px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.page-pricing .plan-compare-header { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; padding: 16px 20px; }
.page-pricing .plan-compare-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; padding: 16px 20px; }
.page-pricing .plan-compare-header { background: rgba(224, 133, 31, 0.08); color: var(--gray-200); font-weight: 600; font-size: 14px; }
.page-pricing .plan-compare-row { border-top: 1px solid var(--line); color: var(--gray-300); font-size: 14px; }
.page-pricing .advoc8-banner { background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.02) 100%); border: 1px solid rgba(124, 58, 237, 0.22); border-radius: 16px; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; box-shadow: var(--shadow-card); }
.page-pricing .advoc8-banner-content { display: flex; align-items: center; gap: 20px; }
.page-pricing .advoc8-banner-logo { font-size: 32px; font-weight: 800; color: var(--ink); }
.page-pricing .advoc8-banner-logo span { color: var(--advoc8-blue); }
.page-pricing .advoc8-banner-text h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.page-pricing .advoc8-banner-text p { color: var(--gray-400); font-size: 14px; }
.page-pricing .advoc8-banner-features { display: flex; gap: 24px; }
.page-pricing .advoc8-banner-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-300); }
.page-pricing .advoc8-banner-feature i { color: var(--advoc8-blue); font-size: 14px; }
.page-pricing .comparison-section { padding: 100px 0; background: var(--bg); }
.page-pricing .comparison-table-wrapper { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.page-pricing .comparison-table { width: 100%; border-collapse: collapse; min-width: 900px; background: var(--card); }
.page-pricing .comparison-table th { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--line); }
.page-pricing .comparison-table td { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--line); font-size:0.8em;}
.page-pricing .comparison-table thead th { background: var(--bg-2); font-size: 14px; font-weight: 600; color: var(--gray-300); position: sticky; top: 0; }
.page-pricing .comparison-table thead th:first-child { border-radius: 16px 0 0 0; }
.page-pricing .comparison-table thead th:last-child { border-radius: 0 16px 0 0; }
.page-pricing .comparison-table thead th.highlight { background: linear-gradient(180deg, rgba(224, 133, 31, 0.16) 0%, var(--bg-2) 100%); color: var(--gold); }
.page-pricing .comparison-table tbody tr { background: var(--card); transition: background 0.2s; }
.page-pricing .comparison-table tbody tr:hover { background: var(--bg-2); }
.page-pricing .comparison-table tbody tr:last-child td:first-child { border-radius: 0 0 0 16px; }
.page-pricing .comparison-table tbody tr:last-child td:last-child { border-radius: 0 0 16px 0; }
.page-pricing .comparison-table td:first-child { font-weight: 500; color: var(--gray-200); }
.page-pricing .comparison-table td.highlight { background: rgba(224, 133, 31, 0.05); }
.page-pricing .comparison-table .category-row { background: var(--bg-2) !important; }
.page-pricing .comparison-table .category-row td { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); padding: 16px 24px; }
.page-pricing .check-icon { width: 24px; height: 24px; background: rgba(224, 133, 31, 0.14); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gold); }
.page-pricing .dash-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--gray-600); }
.page-pricing .faq-section { background: var(--bg-2); }
.page-pricing .faq-grid { max-width: 1000px; margin: 0 auto; }
.page-pricing .faq-item { padding: 28px; cursor: pointer; transition: all 0.2s; }
.page-pricing .faq-item:hover { border-color: var(--line-2); }
.page-pricing .faq-item.open { border-color: rgba(224, 133, 31, 0.4); }
.page-pricing .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.page-pricing .faq-question h3 { font-size: 16px; font-weight: 600; }
.page-pricing .faq-toggle { width: 28px; height: 28px; background: rgba(22,33,62,0.05); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s, background 0.2s; color: var(--gray-400); font-size: 12px; }
.page-pricing .faq-item.open .faq-toggle { background: var(--gold-fill); transform: rotate(45deg); color: var(--ink); }
.page-pricing .faq-answer { display: none; padding-top: 20px; color: var(--gray-400); font-size: 14px; line-height: 1.7; }
.page-pricing .faq-item.open .faq-answer { display: block; }
.page-pricing .cta-section { background: var(--bg); position: relative; overflow: hidden; }
.page-pricing .cta-section::before { bottom: 0; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; }
.page-pricing .cta-card { background: linear-gradient(145deg, rgba(224, 133, 31, 0.1) 0%, rgba(224, 133, 31, 0.03) 100%); border: 1px solid rgba(224, 133, 31, 0.3); border-radius: 24px; padding: 64px; max-width: 800px; margin: 0 auto; box-shadow: var(--shadow-card); }
.page-pricing .cta-card h2 { font-size: 40px; font-weight: 700; margin-bottom: 16px; }
.page-pricing .cta-card p { color: var(--gray-400); font-size: 18px; margin-bottom: 32px; }
@media (max-width: 1024px) {
.page-pricing .pricing-grid-2, .page-pricing .pricing-grid-3 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.page-pricing .advoc8-banner { flex-direction: column; text-align: center; }
.page-pricing .advoc8-banner-content { flex-direction: column; }
.page-pricing .advoc8-banner-features { flex-wrap: wrap; justify-content: center; }
.page-pricing .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-pricing .cta-buttons { flex-direction: column; }
}

/* ---------- page-privacy ---------- */
.page-privacy { --gray-600: #AAB4AE; --green: #2E8B57; }
.page-privacy .hero { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.page-privacy .hero .container { max-width: 900px; }
.page-privacy .hero h1 { font-size: 48px; }
.page-privacy .hero-meta { display: flex; align-items: center; gap: 24px; color: var(--gray-400); font-size: 14px; margin-bottom: 24px; }
.page-privacy .hero-meta span { display: flex; align-items: center; gap: 8px; }
.page-privacy .hero-meta i { color: var(--gold); }
.page-privacy .hero-intro { color: var(--gray-400); font-size: 16px; line-height: 1.7; max-width: 700px; }
.page-privacy .content-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; padding: 60px 0 100px; }
.page-privacy .sidebar { position: sticky; top: 100px; height: fit-content; }
.page-privacy .toc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-card); }
.page-privacy .toc-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-500); margin-bottom: 16px; }
.page-privacy .toc-list { list-style: none; }
.page-privacy .toc-list li { margin-bottom: 4px; }
.page-privacy .toc-list a { color: var(--gray-400); text-decoration: none; font-size: 13px; display: block; padding: 8px 12px; border-radius: 8px; transition: all 0.2s; }
.page-privacy .toc-list a:hover { color: var(--ink); background: rgba(22,33,62,0.04); }
.page-privacy .toc-list a.active { color: var(--gold); background: rgba(224, 133, 31, 0.1); }
.page-privacy .main-content { max-width: 760px; }
.page-privacy .policy-section { margin-bottom: 48px; scroll-margin-top: 100px; }
.page-privacy .policy-section h2 { font-size: 24px; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); letter-spacing: -0.01em; }
.page-privacy .policy-section h3 { font-size: 18px; font-weight: 600; margin: 28px 0 12px; color: var(--gray-200); }
.page-privacy .policy-section p { color: var(--gray-400); font-size: 15px; line-height: 1.8; margin-bottom: 16px; }
.page-privacy .policy-section ul { color: var(--gray-400); font-size: 15px; line-height: 1.8; margin-bottom: 16px; padding-left: 24px; }
.page-privacy .policy-section ol { color: var(--gray-400); font-size: 15px; line-height: 1.8; margin-bottom: 16px; padding-left: 24px; }
.page-privacy .policy-section li { margin-bottom: 8px; }
.page-privacy .policy-section strong { color: var(--gray-200); font-weight: 600; }
.page-privacy .policy-section a { color: var(--gold); text-decoration: none; }
.page-privacy .policy-section a:hover { text-decoration: underline; }
.page-privacy .highlight-box { background: rgba(224, 133, 31, 0.08); border: 1px solid rgba(224, 133, 31, 0.22); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.page-privacy .highlight-box p { color: var(--gray-300); margin-bottom: 0; }
.page-privacy .info-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.page-privacy .info-box-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--gray-200); display: flex; align-items: center; gap: 8px; }
.page-privacy .info-box-title i { color: var(--gold); }
.page-privacy .info-box p { color: var(--gray-400); margin-bottom: 0; }
.page-privacy .important-box { background: rgba(46, 139, 87, 0.07); border: 1px solid rgba(46, 139, 87, 0.2); border-left: 4px solid var(--green); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.page-privacy .important-box-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--green); display: flex; align-items: center; gap: 8px; }
.page-privacy .important-box p { color: var(--gray-300); margin-bottom: 0; }
.page-privacy .data-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.page-privacy .data-table th { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.page-privacy .data-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.page-privacy .data-table th { background: var(--bg-2); font-weight: 600; color: var(--gray-300); font-size: 13px; }
.page-privacy .data-table td { color: var(--gray-400); }
.page-privacy .data-table tr:hover td { background: rgba(22,33,62,0.02); }
.page-privacy .contact-card { margin-top: 40px; }
.page-privacy .contact-card h3 { color: var(--ink); }
.page-privacy .contact-method { color: var(--gray-300); font-size: 14px; }
.page-privacy .contact-method a { color: var(--gold); text-decoration: none; }
.page-privacy .related-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line-2); }
.page-privacy .related-link { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; text-decoration: none; transition: all 0.2s; box-shadow: var(--shadow-card); }
.page-privacy .related-link:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-2px); }
.page-privacy .related-link h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.page-privacy .related-link p { font-size: 13px; color: var(--gray-500); margin: 0; }
@media (max-width: 1024px) {
.page-privacy .content-layout { grid-template-columns: 1fr; }
.page-privacy .sidebar { position: static; }
.page-privacy .toc { display: none; }
.page-privacy .related-links { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-privacy .hero h1 { font-size: 36px; }
.page-privacy .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- page-resources ---------- */
.page-resources { --gray-600: #AAB4AE; --green: #2E9E5B; }
.page-resources .hero { position: relative; overflow: hidden; }
.page-resources .hero .container { position: relative; text-align: center; }
.page-resources .hero-badge { margin-bottom: 16px; }
.page-resources .hero h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.15; margin-bottom: 20px; }
.page-resources .hero-subtitle { max-width: 600px; margin: 0 auto 40px; }
.page-resources .search-bar:focus-within { box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.15); }
.page-resources .search-bar button { display: flex; align-items: center; justify-content: center; }
.page-resources .categories-section { padding: 80px 0; background: var(--bg-2); }
.page-resources .section-header { text-align: center; margin-bottom: 48px; }
.page-resources .section-header h2 { font-size: 36px; margin-bottom: 12px; }
.page-resources .section-header p { font-size: 17px; }
.page-resources .categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-resources .category-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 36px; transition: all 0.3s ease; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow-card); }
.page-resources .category-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-resources .category-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 24px; color: var(--gold); }
.page-resources .category-icon.guides { background: rgba(124, 58, 237, 0.12); color: var(--advoc8-blue); }
.page-resources .category-icon.videos { background: rgba(214, 69, 69, 0.12); color: #C73E3E; }
.page-resources .category-icon.blog { background: rgba(46, 158, 91, 0.12); color: var(--green); }
.page-resources .category-icon.help { background: rgba(124, 92, 214, 0.12); color: #7250C8; }
.page-resources .category-icon.webinars { background: rgba(224, 133, 31, 0.12); color: var(--gold); }
.page-resources .category-icon.tools { background: rgba(224, 133, 31, 0.12); color: var(--gold); }
.page-resources .category-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.page-resources .category-card p { color: var(--gray-400); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.page-resources .category-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gold); font-weight: 500; }
/* Icon sits beside the text, not above it. Every child placed explicitly so nothing relies on grid auto-flow.
   Icon spans all three text rows (h3 / p / count). Per-category accent colors above are preserved. */
.page-resources .categories-grid .category-card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: start; }
.page-resources .categories-grid .category-icon { grid-column: 1; grid-row: 1 / 4; width: 48px; height: 48px; border-radius: 12px; font-size: 20px; margin-bottom: 0; align-self: start; }
.page-resources .categories-grid .category-card h3 { grid-column: 2; grid-row: 1; }
.page-resources .categories-grid .category-card p { grid-column: 2; grid-row: 2; }
.page-resources .categories-grid .category-count { grid-column: 2; grid-row: 3; justify-self: start; }
.page-resources .lead-magnet-section { padding: 80px 0; background: var(--bg); }
.page-resources .lead-magnet { border-radius: 24px; padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; overflow: hidden; }
.page-resources .lead-magnet::before { content: ''; position: absolute; top: -40%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(224, 133, 31, 0.18) 0%, transparent 60%); pointer-events: none; }
.page-resources .lead-magnet-content { position: relative; }
.page-resources .lead-magnet-content h2 { font-size: 36px; font-weight: 700; margin-bottom: 16px; line-height: 1.2; color: #fff; }
.page-resources .lead-magnet-content p { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.page-resources .lead-magnet-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.page-resources .lead-magnet-feature { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.85); }
.page-resources .lead-magnet-feature .check { width: 20px; height: 20px; background: rgba(224, 133, 31, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--gold-light); flex-shrink: 0; }
.page-resources .lead-magnet-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-resources .lead-magnet-form input { min-width: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 16px 20px; font-size: 15px; color: #fff; outline: none; transition: border-color 0.2s; }
.page-resources .lead-magnet-form .field-wide { grid-column: 1 / -1; }
.page-resources .lead-magnet-form .btn { grid-column: 1 / -1; }
.page-resources .lead-magnet-form input:focus { border-color: var(--gold-light); }
.page-resources .lead-magnet-form input::placeholder { color: rgba(255,255,255,0.5); }
.page-resources .lead-magnet-visual { position: relative; }
.page-resources .ebook-mockup { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 32px; text-align: center; transform: perspective(1000px) rotateY(-5deg); box-shadow: 30px 30px 60px rgba(0,0,0,0.3); position: relative; }
.page-resources .ebook-cover { background: linear-gradient(145deg, var(--gold-dark) 0%, var(--gold-fill) 50%, var(--gold-light) 100%); border-radius: 8px; padding: 40px 24px; margin-bottom: 16px; }
.page-resources .ebook-cover h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.page-resources .ebook-cover p { font-size: 12px; color: var(--ink); opacity: 0.8; }
.page-resources .ebook-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(46, 158, 91, 0.15); border: 1px solid rgba(46, 158, 91, 0.3); padding: 6px 12px; border-radius: 100px; font-size: 12px; color: #7DD49B; font-weight: 500; }
.page-resources .guides-section { padding: 80px 0; background: var(--bg-2); }
.page-resources .guides-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.page-resources .guides-header h2 { font-size: 32px; font-weight: 700; }
.page-resources .guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-resources .guide-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.page-resources .guide-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-resources .guide-image { height: 180px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 13px; position: relative; }
.page-resources .guide-tag { position: absolute; top: 16px; left: 16px; background: var(--gold-fill); color: var(--ink); padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.page-resources .guide-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-resources .guide-image .thumb-icon { font-size: 56px; color: var(--gold); opacity: 0.55; }
.page-resources .video-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-resources .guide-content { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.page-resources .guide-content h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.page-resources .guide-content p { color: var(--gray-400); font-size: 14px; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.page-resources .guide-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--gray-500); margin-top: auto; }
.page-resources .guide-meta-end { justify-content: flex-end; }
.page-resources .guide-read-time { display: flex; align-items: center; gap: 6px; }
.page-resources .guide-link { color: var(--gold); font-weight: 500; }
.page-resources .videos-section { padding: 80px 0; background: var(--bg); }
.page-resources .videos-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.page-resources .videos-header h2 { font-size: 32px; font-weight: 700; }
.page-resources .videos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.page-resources .video-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow-card); }
.page-resources .video-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-resources .video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.1); background: var(--gold-fill); color: var(--ink); }
.page-resources .video-thumbnail { height: 140px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); position: relative; display: flex; align-items: center; justify-content: center; }
.page-resources .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--ink); font-size: 16px; box-shadow: 0 4px 14px rgba(22,33,62,0.18); }
.page-resources .video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(22,33,62,0.85); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.page-resources .video-content { padding: 16px; }
.page-resources .video-content h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-resources .video-content p { color: var(--gray-500); font-size: 12px; }
.page-resources .no-results { grid-column: 1 / -1; margin: 0; padding: 24px 0; text-align: center; color: var(--gray-400); font-size: 15px; }
.page-resources .no-results a { color: var(--gold); text-decoration: none; font-weight: 600; }
.page-resources .blog-section { padding: 80px 0; background: var(--bg-2); }
.page-resources .blog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.page-resources .blog-header h2 { font-size: 32px; font-weight: 700; }
.page-resources .blog-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.page-resources .blog-featured { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow-card); }
.page-resources .blog-featured:hover { border-color: rgba(224, 133, 31, 0.4); }
.page-resources .blog-featured-image { height: 280px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 13px; }
.page-resources .blog-featured-content { padding: 32px; }
.page-resources .blog-featured-image.has-photo { padding: 0; }
.page-resources .blog-featured-image.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-resources .blog-category { display: inline-block; background: rgba(224, 133, 31, 0.12); color: var(--gold); padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.page-resources .blog-featured-content h3 { font-size: 24px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.page-resources .blog-featured-content p { color: var(--gray-400); font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
.page-resources .blog-author { display: flex; align-items: center; gap: 12px; }
.page-resources .blog-author-avatar { width: 40px; height: 40px; background: var(--gold-fill); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); font-size: 14px; }
.page-resources .blog-author-info h4 { font-size: 14px; font-weight: 600; }
.page-resources .blog-author-info p { font-size: 12px; color: var(--gray-500); margin-bottom: 0; }
.page-resources .blog-sidebar { display: flex; flex-direction: column; gap: 16px; }
.page-resources .blog-small { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; transition: all 0.3s ease; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow-card); }
.page-resources .blog-small:hover { border-color: rgba(224, 133, 31, 0.4); }
.page-resources .blog-small-category { font-size: 11px; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.page-resources .blog-small h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; }
.page-resources .blog-small-meta { font-size: 12px; color: var(--gray-500); }
.page-resources .help-section { padding: 80px 0; background: var(--bg); }
.page-resources .help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.page-resources .help-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; transition: all 0.3s ease; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow-card); }
.page-resources .help-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-resources .help-icon { width: 56px; height: 56px; background: rgba(224, 133, 31, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 16px; color: var(--gold); }
.page-resources .help-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.page-resources .help-card p { color: var(--gray-400); font-size: 13px; line-height: 1.5; }
.page-resources .newsletter-section { padding: 80px 0; background: var(--bg-2); }
.page-resources .newsletter-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 64px; text-align: center; max-width: 700px; margin: 0 auto; box-shadow: var(--shadow-card); }
.page-resources .newsletter-icon { width: 72px; height: 72px; background: rgba(224, 133, 31, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 24px; color: var(--gold); }
.page-resources .newsletter-card h2 { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.page-resources .newsletter-card p { color: var(--gray-400); font-size: 16px; margin-bottom: 32px; }
.page-resources .newsletter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 480px; margin: 0 auto; }
.page-resources .newsletter-form input { min-width: 0; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 16px 20px; font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.2s; }
.page-resources .newsletter-form .field-wide { grid-column: 1 / -1; }
.page-resources .newsletter-form .btn { grid-column: 1 / -1; }
.page-resources .newsletter-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 133, 31, 0.15); }
.page-resources .newsletter-form input::placeholder { color: var(--gray-500); }
.page-resources .newsletter-note { margin-top: 16px; font-size: 12px; color: var(--gray-500); }
@media (max-width: 1024px) {
.page-resources .categories-grid { grid-template-columns: repeat(2, 1fr); }
.page-resources .lead-magnet { grid-template-columns: 1fr; gap: 48px; }
.page-resources .lead-magnet-visual { order: -1; }
.page-resources .guides-grid { grid-template-columns: repeat(2, 1fr); }
.page-resources .videos-grid { grid-template-columns: repeat(2, 1fr); }
.page-resources .blog-grid { grid-template-columns: 1fr; }
.page-resources .help-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-resources .categories-grid { grid-template-columns: 1fr; }
.page-resources .guides-grid { grid-template-columns: 1fr; }
.page-resources .videos-grid { grid-template-columns: 1fr; }
.page-resources .help-grid { grid-template-columns: 1fr; }
.page-resources .lead-magnet-form { grid-template-columns: 1fr; }
.page-resources .newsletter-form { grid-template-columns: 1fr; }
.page-resources .guides-header, .page-resources .videos-header, .page-resources .blog-header { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- page-reviews ---------- */
.page-reviews .hero { padding: 90px 0 70px; position: relative; overflow: hidden; text-align: center; }
.page-reviews .hero::before { top: -35%; }
.page-reviews .hero .container { position: relative; }
.page-reviews .hero-badge { margin-bottom: 16px; }
.page-reviews .hero h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.1; margin-bottom: 18px; }
.page-reviews .hero-subtitle { max-width: 700px; margin: 0 auto 28px; }
.page-reviews .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.page-reviews .stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-align: center; box-shadow: var(--shadow-card); }
.page-reviews .stat h3 { font-size: 28px; color: var(--gold); margin-bottom: 6px; }
.page-reviews .stat p { color: var(--gray-400); font-size: 13px; }
.page-reviews .aggregate-rating { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.page-reviews .aggregate-stars { display: flex; gap: 4px; color: var(--gold); font-size: 22px; }
.page-reviews .aggregate-score { font-size: 26px; font-weight: 800; color: var(--gold); }
.page-reviews .aggregate-sub { color: var(--gray-400); font-size: 14px; }
.page-reviews .section { background: var(--bg); }
.page-reviews .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-reviews .section-header h2 { letter-spacing: -0.02em; }
.page-reviews .section-header p { max-width: 560px; }
.page-reviews .card { transition: border-color 0.3s ease, transform 0.3s ease; }
.page-reviews .card-stars { color: var(--gold); font-size: 14px; margin-bottom: 12px; }
.page-reviews .card p { color: var(--gray-200); margin-bottom: 14px; }
.page-reviews .reviewer { display: flex; align-items: center; gap: 12px; }
.page-reviews .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-fill); display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; }
.page-reviews .reviewer span { color: var(--gray-500); font-size: 13px; }
.page-reviews .cta { background: var(--gradient-card); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.page-reviews .cta h2 { letter-spacing: -0.02em; }
@media (max-width: 1024px) {
.page-reviews .grid-3, .page-reviews .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-reviews .grid-3, .page-reviews .stats { grid-template-columns: 1fr; }
.page-reviews .section-header { flex-direction: column; align-items: flex-start; }
.page-reviews .cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- page-support ---------- */
.page-support { --gray-600: #AAB4AE; --green: #16A34A; }
.page-support .btn-block { width: 100%; }
.page-support .btn-primary { background: var(--gold-fill); color: var(--ink); }
.page-support .btn-primary:hover { background: var(--gold-light); }
.page-support .hero { position: relative; overflow: hidden; }
.page-support .hero::before { width: 1200px; height: 1200px; }
.page-support .hero .container { position: relative; text-align: center; }
.page-support .hero-badge { display: inline-flex; align-items: center; gap: 8px; }
.page-support .hero h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.15; margin-bottom: 20px; }
.page-support .hero-subtitle { max-width: 600px; margin: 0 auto 40px; }
.page-support .hero-search { max-width: 600px; margin: 0 auto; }
.page-support .search-box { display: flex; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); transition: border-color 0.2s; }
.page-support .search-box:focus-within { border-color: var(--gold); }
.page-support .search-box input { flex: 1; background: transparent; border: none; padding: 18px 24px; font-size: 16px; color: var(--ink); outline: none; }
.page-support .search-box input::placeholder { color: var(--gray-500); }
.page-support .search-box button { background: var(--gold-fill); border: none; padding: 18px 28px; cursor: pointer; transition: background 0.2s; color: var(--ink); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.page-support .search-box button:hover { background: var(--gold-light); }
.page-support .quick-contact { padding: 60px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-support .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 860px; margin: 0 auto; }
.page-support .help-steps { list-style: decimal; padding-left: 20px; margin: 0 0 24px; }
.page-support .help-steps li { color: var(--gray-400); font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.page-support .help-steps strong { color: var(--ink); font-weight: 600; }
.page-support .help-note { margin-top: 14px; font-size: 13px; color: var(--gray-500); text-align: center; }
.page-support .help-note a { color: var(--gold); text-decoration: none; font-weight: 500; }
.page-support .contact-card { background: var(--card); padding: 32px 24px; text-align: center; transition: all 0.3s ease; cursor: pointer; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow-card); }
.page-support .contact-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-support .contact-icon { width: 64px; height: 64px; background: rgba(224, 133, 31, 0.12); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold); margin: 0 auto 16px; }
.page-support .contact-card h3 { margin-bottom: 8px; }
.page-support .contact-card p { color: var(--gray-400); font-size: 14px; margin-bottom: 12px; }
.page-support .contact-link { color: var(--gold); font-size: 14px; font-weight: 600; }
.page-support .support-tiers { padding: 100px 0; background: var(--bg); }
.page-support .section-header { text-align: center; margin-bottom: 64px; }
.page-support .section-header h2 { font-size: 40px; margin-bottom: 16px; }
.page-support .section-header p { font-size: 18px; max-width: 600px; margin: 0 auto; }
.page-support .tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-support .tier-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 40px 32px; position: relative; box-shadow: var(--shadow-card); transition: all 0.3s ease; }
.page-support .tier-card:hover { border-color: var(--line-2); }
.page-support .tier-card.featured { border-color: var(--gold-fill); background: linear-gradient(145deg, rgba(224, 133, 31, 0.08) 0%, #FFFFFF 100%); }
.page-support .tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold-fill); color: var(--ink); padding: 6px 16px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.page-support .tier-icon { width: 56px; height: 56px; background: rgba(224, 133, 31, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--gold); margin-bottom: 20px; }
.page-support .tier-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.page-support .tier-card .included { color: var(--gray-500); font-size: 13px; margin-bottom: 20px; }
.page-support .tier-features { list-style: none; margin-bottom: 24px; }
.page-support .tier-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--gray-300); margin-bottom: 14px; line-height: 1.5; }
.page-support .tier-features li .check { width: 20px; height: 20px; background: rgba(22, 163, 74, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 10px; color: var(--green); }
.page-support .tier-response { background: rgba(22,33,62,0.03); border-radius: 10px; padding: 16px; text-align: center; }
.page-support .tier-response-label { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.page-support .tier-response-time { font-size: 18px; font-weight: 600; color: var(--gold); }
.page-support .help-center { padding: 100px 0; background: var(--bg-2); }
.page-support .help-grid, .page-help-center .help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-support .help-category, .page-help-center .help-category { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-card); transition: all 0.2s; }
.page-support .help-category:hover, .page-help-center .help-category:hover { border-color: var(--line-2); }
.page-support .help-category-header, .page-help-center .help-category-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.page-support .help-category-icon, .page-help-center .help-category-icon { width: 48px; height: 48px; background: rgba(224, 133, 31, 0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gold); }
.page-support .help-category-header h3, .page-help-center .help-category-header h3 { font-size: 18px; font-weight: 600; }
.page-support .help-links, .page-help-center .help-links { list-style: none; }
.page-support .help-links li, .page-help-center .help-links li { margin-bottom: 12px; }
.page-support .help-links a, .page-help-center .help-links a { color: var(--gray-400); text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.page-support .help-links a:hover, .page-help-center .help-links a:hover { color: var(--gold); }
.page-support .help-links a::before, .page-help-center .help-links a::before { content: '\2192'; opacity: 0; transform: translateX(-8px); transition: all 0.2s; }
.page-support .help-links a:hover::before, .page-help-center .help-links a:hover::before { opacity: 1; transform: translateX(0); }
.page-support .help-category-footer, .page-help-center .help-category-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.page-support .help-category-footer a, .page-help-center .help-category-footer a { color: var(--gold); font-size: 13px; font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.page-support .faq-grid { max-width: 1000px; margin: 0 auto; }
.page-support .faq-item { overflow: hidden; }
.page-support .faq-question { padding: 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.page-support .faq-question h4 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.page-support .faq-toggle { width: 32px; height: 32px; background: rgba(22,33,62,0.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: var(--gray-400); transition: all 0.2s; }
.page-support .faq-toggle i { transition: transform 0.2s; }
.page-support .faq-item.open .faq-toggle { background: var(--gold-fill); color: var(--ink); }
.page-support .faq-item.open .faq-toggle i { transform: rotate(180deg); }
.page-support .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.page-support .faq-item.open .faq-answer { max-height: 300px; }
.page-support .faq-answer-content { padding: 0 24px 24px; color: var(--gray-400); font-size: 14px; line-height: 1.7; }
.page-support .contact-section { padding: 100px 0; background: var(--bg-2); }
.page-support .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.page-support .contact-info h2 { font-size: 36px; font-weight: 700; margin-bottom: 16px; }
.page-support .contact-info > p { color: var(--gray-400); font-size: 16px; line-height: 1.7; margin-bottom: 40px; }
.page-support .contact-methods { gap: 24px; margin-bottom: 40px; }
.page-support .contact-method { align-items: flex-start; gap: 16px; }
.page-support .contact-method-icon { width: 48px; height: 48px; background: rgba(224, 133, 31, 0.12); border-radius: 12px; font-size: 18px; }
.page-support .contact-method-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.page-support .contact-method-info p { color: var(--gray-400); font-size: 14px; }
.page-support .contact-method-info a { color: var(--gold); text-decoration: none; font-weight: 500; }
.page-support .hours-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-card); }
.page-support .hours-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.page-support .hours-card h4 i { color: var(--gold); }
.page-support .hours-list { display: flex; flex-direction: column; gap: 8px; }
.page-support .hours-row { display: flex; justify-content: space-between; font-size: 14px; }
.page-support .hours-row .day { color: var(--gray-400); }
.page-support .hours-row .time { color: var(--ink); font-weight: 500; }
.page-support .contact-form-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 40px; box-shadow: var(--shadow-card); }
@media (max-width: 480px) {
/* 40px of inset on each side leaves about 192px of content on a 320px screen, which no
   full-width CTA can live inside. Ease the card, not the button. */
.page-support .contact-form-card { padding: 24px; }
}
.page-support .contact-form-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.page-support .contact-form-card > p { color: var(--gray-400); font-size: 14px; margin-bottom: 32px; }
.page-support .contact-form { display: flex; flex-direction: column; gap: 16px; }
.page-support .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.page-support .form-group { display: flex; flex-direction: column; gap: 8px; }
.page-support .form-group label { font-size: 13px; font-weight: 500; color: var(--gray-300); }
.page-support .form-input { background: #FFFFFF; border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 18px; font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.2s; font-family: inherit; }
.page-support .form-input:focus { border-color: var(--gold); }
.page-support .form-input::placeholder { color: var(--gray-500); }
.page-support select.form-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23828B9C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 48px; }
.page-support textarea.form-input { min-height: 120px; resize: vertical; }
.page-support .status-section { padding: 80px 0; background: var(--bg); }
.page-support .status-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 40px; box-shadow: var(--shadow-card); }
.page-support .status-info { display: flex; align-items: center; gap: 20px; }
.page-support .status-indicator { width: 56px; height: 56px; background: rgba(22, 163, 74, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; font-size: 22px; color: var(--green); }
.page-support .status-indicator::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green); animation: page-support-pulse 2s infinite; }
.page-support .status-text h3 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.page-support .status-text p { color: var(--gray-400); font-size: 14px; }
.page-support .status-metrics { display: flex; gap: 40px; }
.page-support .status-metric { text-align: center; }
.page-support .status-metric-value { font-size: 28px; font-weight: 700; color: var(--green); }
.page-support .status-metric-label { font-size: 12px; color: var(--gray-500); }
.page-support .status-link { color: var(--gold); font-size: 14px; font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.page-support .cta-section { padding: 100px 0; background: var(--bg-2); position: relative; overflow: hidden; }
.page-support .cta-section::before { bottom: 0; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; }
.page-support .cta-section h2 { font-size: 40px; }
.page-support .cta-section p { color: var(--gray-400); margin-bottom: 40px; margin-left: auto; margin-right: auto; }
@keyframes page-support-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.1); }
    }
@media (max-width: 1024px) {
.page-support .contact-grid { grid-template-columns: repeat(2, 1fr); }
.page-support .tiers-grid { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
.page-support .help-grid, .page-help-center .help-grid { grid-template-columns: 1fr; }
.page-support .faq-grid { grid-template-columns: 1fr; }
.page-support .contact-wrapper { grid-template-columns: 1fr; }
.page-support .status-card { flex-direction: column; text-align: center; }
.page-support .status-info { flex-direction: column; }
}
@media (max-width: 768px) {
.page-support .contact-grid { grid-template-columns: 1fr; }
.page-support .form-row { grid-template-columns: 1fr; }
.page-support .status-metrics { flex-direction: column; gap: 20px; }
.page-support .cta-buttons { flex-direction: column; }
}
@media (max-width:768px) {

}

/* ---------- page-terms ---------- */
.page-terms { --gray-600: #AAB4AE; }
.page-terms .hero { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.page-terms .hero .container { max-width: 900px; }
.page-terms .hero h1 { font-size: 48px; }
.page-terms .hero-meta { display: flex; align-items: center; gap: 24px; color: var(--gray-400); font-size: 14px; margin-bottom: 24px; }
.page-terms .hero-meta span { display: flex; align-items: center; gap: 8px; }
.page-terms .hero-meta i { color: var(--gold); }
.page-terms .hero-intro { color: var(--gray-400); font-size: 16px; line-height: 1.7; max-width: 700px; }
.page-terms .content-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; padding: 60px 0 100px; }
.page-terms .sidebar { position: sticky; top: 100px; height: fit-content; }
.page-terms .toc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-card); }
.page-terms .toc-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-500); margin-bottom: 16px; }
.page-terms .toc-list { list-style: none; }
.page-terms .toc-list li { margin-bottom: 4px; }
.page-terms .toc-list a { color: var(--gray-400); text-decoration: none; font-size: 13px; display: block; padding: 8px 12px; border-radius: 8px; transition: all 0.2s; }
.page-terms .toc-list a:hover { color: var(--ink); background: rgba(22,33,62,0.04); }
.page-terms .toc-list a.active { color: var(--gold); background: rgba(224, 133, 31, 0.1); }
.page-terms .main-content { max-width: 760px; }
.page-terms .terms-section { margin-bottom: 48px; scroll-margin-top: 100px; }
.page-terms .terms-section h2 { font-size: 24px; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); letter-spacing: -0.01em; }
.page-terms .terms-section h3 { font-size: 18px; font-weight: 600; margin: 28px 0 12px; color: var(--gray-200); }
.page-terms .terms-section p { color: var(--gray-400); font-size: 15px; line-height: 1.8; margin-bottom: 16px; }
.page-terms .terms-section ul { color: var(--gray-400); font-size: 15px; line-height: 1.8; margin-bottom: 16px; padding-left: 24px; }
.page-terms .terms-section ol { color: var(--gray-400); font-size: 15px; line-height: 1.8; margin-bottom: 16px; padding-left: 24px; }
.page-terms .terms-section li { margin-bottom: 8px; }
.page-terms .terms-section strong { color: var(--gray-200); font-weight: 600; }
.page-terms .terms-section a { color: var(--gold); text-decoration: none; }
.page-terms .terms-section a:hover { text-decoration: underline; }
.page-terms .important-box { background: rgba(217, 72, 59, 0.06); border: 1px solid rgba(217, 72, 59, 0.18); border-left: 4px solid var(--red); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.page-terms .important-box-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--red); display: flex; align-items: center; gap: 8px; }
.page-terms .important-box p { color: var(--gray-300); margin-bottom: 0; }
.page-terms .info-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.page-terms .info-box-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--gray-200); display: flex; align-items: center; gap: 8px; }
.page-terms .info-box-title i { color: var(--gold); }
.page-terms .info-box p { color: var(--gray-400); margin-bottom: 0; }
.page-terms .highlight-box { background: rgba(224, 133, 31, 0.08); border: 1px solid rgba(224, 133, 31, 0.22); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.page-terms .highlight-box p { color: var(--gray-300); margin-bottom: 0; }
.page-terms .fee-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.page-terms .fee-table th { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.page-terms .fee-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.page-terms .fee-table th { background: var(--bg-2); font-weight: 600; color: var(--gray-300); font-size: 13px; }
.page-terms .fee-table td { color: var(--gray-400); }
.page-terms .fee-table tr:hover td { background: rgba(22,33,62,0.02); }
.page-terms .fee-table .fee-amount { color: var(--gold); font-weight: 600; }
.page-terms .contact-card { margin-top: 40px; }
.page-terms .contact-card h3 { color: var(--ink); }
.page-terms .contact-method { color: var(--gray-300); font-size: 14px; }
.page-terms .contact-method a { color: var(--gold); text-decoration: none; }
.page-terms .related-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line-2); }
.page-terms .related-link { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; text-decoration: none; transition: all 0.2s; box-shadow: var(--shadow-card); }
.page-terms .related-link:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-2px); }
.page-terms .related-link h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.page-terms .related-link p { font-size: 13px; color: var(--gray-500); margin: 0; }
@media (max-width: 1024px) {
.page-terms .content-layout { grid-template-columns: 1fr; }
.page-terms .sidebar { position: static; }
.page-terms .toc { display: none; }
.page-terms .related-links { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-terms .hero h1 { font-size: 36px; }
.page-terms .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- page-tools ---------- */
.page-tools { --gray-600: #AAB4AE; }
.page-tools .hero { position: relative; overflow: hidden; text-align: center; }
.page-tools .hero .container { position: relative; }
.page-tools .hero h1 { line-height: 1.15; }
.page-tools .hero-subtitle { max-width: 700px; margin: 0 auto 32px; }
.page-tools .section-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.page-tools .section-header p { max-width: 560px; margin-left: auto; margin-right: auto; }
.page-tools .card { transition: all 0.2s ease; color: inherit; text-decoration: none; display: block; }
.page-tools .card h3 { font-weight: 600; }
.page-tools .card p { font-size: 14px; margin-bottom: 12px; }
/* Icon sits beside the text, not above it. Same pattern as .page-platform cards; every child
   placed explicitly so nothing relies on grid auto-flow. Three content rows here (h3/p/meta). */
.page-tools .grid-3 .card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: start; }
.page-tools .grid-3 .card .public-icon { grid-column: 1; grid-row: 1 / 4; width: 48px; height: 48px; font-size: 20px; border-radius: 12px; margin-bottom: 0; align-self: start; }
.page-tools .grid-3 .card h3 { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
.page-tools .grid-3 .card p { grid-column: 2; grid-row: 2; margin-bottom: 8px; }
.page-tools .grid-3 .card .meta { grid-column: 2; grid-row: 3; }
/* Gated download form. Hidden until a gated card is clicked. */
.page-tools .tool-gate { display: none; margin-top: 32px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-card); max-width: 640px; margin-left: auto; margin-right: auto; }
.page-tools .tool-gate.open { display: block; }
.page-tools .tool-gate h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.page-tools .tool-gate-asset { font-size: 14px; color: var(--gray-400); text-align: center; margin-bottom: 20px; }
.page-tools .gate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-tools .gate-form input { min-width: 0; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 14px 16px; font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.2s; }
.page-tools .gate-form input:focus { border-color: var(--gold); }
.page-tools .gate-form input::placeholder { color: var(--gray-500); }
.page-tools .gate-form .field-wide { grid-column: 1 / -1; }
.page-tools .gate-form .btn { grid-column: 1 / -1; }
.page-tools .card.gated { cursor: pointer; }
.page-tools .tool-gate .optin-done { text-align: center; }
/* once the response is in, the 'where should we send it' prompt is redundant */
.page-tools .tool-gate.done h3, .page-tools .tool-gate.done .tool-gate-asset { display: none; }
.page-tools .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-tools .step { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-card); text-align: center; }
.page-tools .step span { display: flex; width: 44px; height: 44px; margin: 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: rgba(224, 133, 31, 0.12); color: var(--gold); font-weight: 700; font-size: 16px; }
.page-tools .step h4 { margin: 10px 0; }
.page-tools .step p { color: var(--gray-400); font-size: 14px; }
.page-tools .cta { background: var(--gradient-card); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
@media (max-width: 1024px) {
.page-tools .grid-3, .page-tools .steps { grid-template-columns: repeat(2, 1fr); }
.page-tools .cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
.page-tools .grid-3, .page-tools .steps { grid-template-columns: 1fr; }
.page-tools .gate-form { grid-template-columns: 1fr; }
.page-tools .section-header { align-items: center; }
}

/* ---------- page-videos ---------- */
.page-videos { --gray-600: #AAB4AE; }
.page-videos .hero { position: relative; overflow: hidden; text-align: center; }
.page-videos .hero .container { position: relative; }
.page-videos .hero h1 { line-height: 1.15; }
.page-videos .hero-subtitle { max-width: 700px; margin: 0 auto 32px; }
.page-videos .search-bar { background: var(--card); transition: border-color 0.2s; }
.page-videos .search-bar:focus-within { border-color: var(--gold-fill); }
.page-videos .filters { margin-top: 20px; }
.page-videos .chip { transition: all 0.2s ease; }
.page-videos .chip:hover { border-color: rgba(224, 133, 31, 0.4); color: var(--ink); }
.page-videos .chip.active { border-color: var(--gold-fill); font-weight: 600; }
.page-videos .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-videos .section-header p { max-width: 560px; }
.page-videos .card { transition: all 0.2s ease; color: inherit; text-decoration: none; display: block; }
.page-videos .video-thumb { height: 200px; border-radius: 12px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); margin-bottom: 16px; position: relative; overflow: hidden; }
.page-videos .video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-videos .play { width: 54px; height: 54px; border-radius: 50%; background: var(--gold-fill); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 20px; box-shadow: 0 12px 30px rgba(22,33,62,0.18); }
.page-videos .duration { position: absolute; bottom: 12px; right: 12px; background: rgba(22,33,62,0.85); color: #fff; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.page-videos .tag { gap: 6px; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(224, 133, 31, 0.12); margin-bottom: 10px; }
.page-videos .card h3 { font-weight: 600; }
.page-videos .card p { font-size: 14px; margin-bottom: 12px; }
.page-videos .no-results { grid-column: 1 / -1; margin: 0; padding: 32px 0; text-align: center; color: var(--gray-400); font-size: 15px; }
.page-videos .no-results a { color: var(--gold); text-decoration: none; font-weight: 600; }
.page-videos .pagination { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.page-videos .page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.page-videos .page:hover { border-color: var(--gold-fill); color: var(--gold-dark); }
.page-videos .page:focus-visible { outline: 2px solid var(--gold-fill); outline-offset: 2px; }
.page-videos .page.active { background: var(--gold-fill); border-color: transparent; color: var(--ink); font-weight: 600; }
.page-videos .page.active:hover { color: var(--ink); }
.page-videos .meta { display: flex; align-items: center; gap: 12px; }
.page-videos .playlist { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-card); }
.page-videos .playlist .video-thumb { height: 260px; margin-bottom: 0; }
.page-videos .playlist h3 { font-size: 24px; margin-bottom: 12px; }
.page-videos .playlist p { color: var(--gray-400); margin-bottom: 16px; }
.page-videos .playlist-list { display: grid; gap: 10px; }
.page-videos .playlist-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--gray-300); font-size: 13px; background: var(--card); }
@media (max-width: 1024px) {
.page-videos .grid-3 { grid-template-columns: repeat(2, 1fr); }
.page-videos .playlist { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-videos .grid-3, .page-videos .grid-2 { grid-template-columns: 1fr; }
.page-videos .section-header { flex-direction: column; align-items: flex-start; }
}

/* ---------- page-webinars ---------- */
.page-webinars { --gray-600: #AAB4AE; }
.page-webinars .hero { position: relative; overflow: hidden; text-align: center; }
.page-webinars .hero .container { position: relative; }
.page-webinars .hero h1 { line-height: 1.15; }
.page-webinars .hero-subtitle { max-width: 700px; margin: 0 auto 32px; }
.page-webinars .section-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.page-webinars .section-header p { max-width: 560px; margin-left: auto; margin-right: auto; }
.page-webinars .card { transition: all 0.2s ease; color: inherit; text-decoration: none; display: block; }
.page-webinars .event-list { display: grid; gap: 16px; }
.page-webinars .event { display: grid; grid-template-columns: 90px 1fr auto; gap: 20px; align-items: center; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); }
.page-webinars .date-box { background: rgba(224, 133, 31, 0.12); color: var(--gold); border-radius: 12px; text-align: center; padding: 10px; font-weight: 700; }
.page-webinars .date-box span { display: block; font-size: 12px; color: var(--gray-400); font-weight: 500; }
.page-webinars .event h3 { font-size: 18px; margin-bottom: 6px; }
.page-webinars .event p { color: var(--gray-400); font-size: 14px; }
.page-webinars .tag { gap: 6px; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(224, 133, 31, 0.12); margin-bottom: 10px; }
.page-webinars .media { height: 180px; border-radius: 12px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gray-500); margin-bottom: 16px; font-size: 13px; }
.page-webinars .video-thumb { height: 180px; border-radius: 12px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; position: relative; overflow: hidden; }
.page-webinars .video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-webinars .play { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-fill); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 14px rgba(22,33,62,0.18); }
.page-webinars .no-results { grid-column: 1 / -1; margin: 0; padding: 32px 0; text-align: center; color: var(--gray-400); font-size: 15px; }
.page-webinars .no-results a { color: var(--gold); text-decoration: none; font-weight: 600; }
.page-webinars .pagination { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.page-webinars .page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.page-webinars .page:hover { border-color: var(--gold-fill); color: var(--gold); }
.page-webinars .page:focus-visible { outline: 2px solid var(--gold-fill); outline-offset: 2px; }
.page-webinars .page.active { background: var(--gold-fill); border-color: transparent; color: var(--ink); font-weight: 600; }
.page-webinars .speaker-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }
.page-webinars .media .play-mini { width: 36px; height: 36px; border-radius: 50%; background: var(--gold-fill); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.page-webinars .speaker { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; box-shadow: var(--shadow-card); }
.page-webinars .speaker-avatar { width: 120px; height: 120px; border-radius: 20px; background: rgba(224, 133, 31, 0.15); display: flex; align-items: center; justify-content: center; color: var(--gold); font-weight: 700; font-size: 22px; }
.page-webinars .speaker p { color: var(--gray-400); margin-top: 8px; }
@media (max-width: 1024px) {
.page-webinars .grid-3 { grid-template-columns: repeat(2, 1fr); }
.page-webinars .speaker { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-webinars .grid-3 { grid-template-columns: 1fr; }
.page-webinars .section-header { align-items: center; }
.page-webinars .event { grid-template-columns: 1fr; }
}

/* ---------- page-thankyou / page-fb ---------- */
/* Two scheduler pages with the same shape: hero, Calendly embed, what-to-expect cards, reviews.
   Hero and section-header values mirror .page-reviews / .page-about so these do not read as a
   different site. The testimonial-* classes are scoped per page elsewhere (.page-about, .page-home),
   so they have to be declared here too or the cards render with no card at all. */
.page-thankyou, .page-fb { --gray-600: #AAB4AE; }
.page-thankyou .hero, .page-fb .hero { padding: 90px 0 70px; position: relative; overflow: hidden; text-align: center; }
.page-thankyou .hero::before, .page-fb .hero::before { top: -35%; }
.page-thankyou .hero .container, .page-fb .hero .container { position: relative; }
.page-thankyou .hero-badge, .page-fb .hero-badge { margin-bottom: 16px; }
.page-thankyou .hero h1, .page-fb .hero h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin-bottom: 18px; }
.page-thankyou .hero-subtitle, .page-fb .hero-subtitle { max-width: 700px; margin: 0 auto 28px; }
.page-thankyou .section-header, .page-fb .section-header { text-align: center; margin-bottom: 48px; }
.page-thankyou .section-header h2, .page-fb .section-header h2 { font-size: 40px; margin-bottom: 16px; }
.page-thankyou .section-header p, .page-fb .section-header p { font-size: 18px; max-width: 600px; margin: 0 auto; color: var(--gray-400); }
/* Calendly renders its own iframe; this is only the frame around it. */
.page-thankyou .scheduler, .page-fb .scheduler { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.page-thankyou .card h3, .page-fb .card h3 { font-weight: 600; }
.page-thankyou .card p, .page-fb .card p { font-size: 14px; line-height: 1.6; color: var(--gray-400); }
/* Icon sits beside the text, not above it. Same pattern as .page-platform cards. */
.page-thankyou .grid-3 .card, .page-fb .grid-3 .card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: start; }
.page-thankyou .grid-3 .card .public-icon, .page-fb .grid-3 .card .public-icon { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; font-size: 20px; border-radius: 12px; margin-bottom: 0; align-self: start; }
.page-thankyou .grid-3 .card h3, .page-fb .grid-3 .card h3 { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
.page-thankyou .grid-3 .card p, .page-fb .grid-3 .card p { grid-column: 2; grid-row: 2; margin-bottom: 0; }
.page-thankyou .testimonials-section, .page-fb .testimonials-section { padding: 100px 0; background: var(--bg); }
.page-thankyou .testimonials-grid, .page-fb .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.page-thankyou .testimonial-card, .page-fb .testimonial-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; box-shadow: var(--shadow-card); }
.page-thankyou .testimonial-quote, .page-fb .testimonial-quote { font-size: 18px; line-height: 1.7; margin-bottom: 24px; position: relative; color: var(--gray-200); }
.page-thankyou .testimonial-quote::before, .page-fb .testimonial-quote::before { content: '"'; position: absolute; top: -20px; left: -10px; font-size: 80px; color: rgba(224, 133, 31, 0.18); font-weight: 700; line-height: 1; }
.page-thankyou .testimonial-author, .page-fb .testimonial-author { display: flex; align-items: center; gap: 16px; }
.page-thankyou .testimonial-avatar, .page-fb .testimonial-avatar { width: 48px; height: 48px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); font-size: 16px; }
.page-thankyou .testimonial-info h4, .page-fb .testimonial-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.page-thankyou .testimonial-info p, .page-fb .testimonial-info p { color: var(--gray-500); font-size: 13px; }
@media (max-width: 1024px) {
.page-thankyou .grid-3, .page-fb .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-thankyou .grid-3, .page-fb .grid-3 { grid-template-columns: 1fr; }
.page-thankyou .testimonials-grid, .page-fb .testimonials-grid { grid-template-columns: 1fr; }
.page-thankyou .section-header h2, .page-fb .section-header h2 { font-size: 30px; }
}

/* ---------- page-websites ---------- */
.page-websites .btn-sm { padding: 10px 20px; }
.page-websites .hero { padding: 80px 0 100px; position: relative; overflow: hidden; }
.page-websites .hero::before { background: radial-gradient(circle, rgba(224, 133, 31, 0.12) 0%, transparent 60%); }
.page-websites .hero .container { position: relative; text-align: center; }
.page-websites .hero h1 { line-height: 1.15; margin-bottom: 20px; }
.page-websites .hero-subtitle { max-width: 600px; margin: 0 auto 32px; }
.page-websites .hero-proof { margin-top: 24px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; color: var(--gray-400); font-size: 14px; }
.page-websites .hero-proof-card { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; box-shadow: var(--shadow-card); }
.page-websites .hero-proof-card strong { color: var(--gold); font-weight: 600; }
.page-websites .website-types { padding: 100px 0; background: var(--bg-2); }
.page-websites .section-header { text-align: center; margin-bottom: 48px; }
.page-websites .section-header h2 { font-size: 36px; margin-bottom: 12px; letter-spacing: -0.02em; }
.page-websites .section-header p { font-size: 17px; }
.page-websites .tabs { display: flex; justify-content: center; gap: 8px; background: var(--card); padding: 6px; border-radius: 12px; width: fit-content; margin: 0 auto 48px; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.page-websites .tab { padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--gray-400); cursor: pointer; transition: all 0.2s; border: none; background: transparent; }
.page-websites .tab:hover { color: var(--ink); }
.page-websites .tab.active { background: var(--gold-fill); color: var(--ink); }
.page-websites .tab-content { display: none; }
.page-websites .tab-content.active { display: block; animation: page-websites-fadeIn 0.3s ease; }
.page-websites .type-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.page-websites .type-info h3 { font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.page-websites .type-info > p { color: var(--gray-400); font-size: 16px; line-height: 1.7; margin-bottom: 32px; }
.page-websites .type-features { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.page-websites .type-feature { display: flex; align-items: flex-start; gap: 16px; }
.page-websites .type-feature-icon { width: 48px; height: 48px; background: rgba(224, 133, 31, 0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; color: var(--gold); }
.page-websites .type-feature-content h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.page-websites .type-feature-content p { color: var(--gray-400); font-size: 14px; line-height: 1.5; }
.page-websites .type-visual { position: relative; }
.page-websites .type-browser { background: #EEF1F6; border-radius: 16px; border: 1px solid var(--line-2); overflow: hidden; box-shadow: 0 30px 70px rgba(22,33,62,0.12); }
.page-websites .browser-bar { background: #E3E8F0; padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.page-websites .browser-dot { width: 12px; height: 12px; border-radius: 50%; background: #C5CCD8; }
.page-websites .browser-dot.red { background: #FF5F57; }
.page-websites .browser-dot.yellow { background: #FFBD2E; }
.page-websites .browser-dot.green { background: #28C840; }
.page-websites .browser-url { flex: 1; margin-left: 12px; background: #FFFFFF; padding: 8px 16px; border-radius: 6px; font-size: 13px; color: var(--gray-500); }
.page-websites .browser-content { height: 320px; background: linear-gradient(180deg, #F2F5F9 0%, #E8ECF2 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 14px; }
.page-websites .browser-content.has-photo { padding: 0; }
.page-websites .browser-content.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-websites .gallery-image.has-photo { padding: 0; }
.page-websites .gallery-image.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-websites .floating-badge { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 40px rgba(22,33,62,0.12); }
.page-websites .floating-badge.top-right { top: -20px; right: -30px; }
.page-websites .floating-badge.bottom-left { bottom: 40px; left: -40px; }
.page-websites .floating-badge-icon { width: 40px; height: 40px; background: rgba(224, 133, 31, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gold); }
.page-websites .floating-badge-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.page-websites .floating-badge-text span { font-size: 12px; color: var(--gray-500); }
.page-websites .design-features { padding: 100px 0; background: var(--bg); }
.page-websites .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.page-websites .feature-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; text-align: center; transition: all 0.3s ease; box-shadow: var(--shadow-card); }
.page-websites .feature-card:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-4px); }
.page-websites .feature-card-icon { width: 64px; height: 64px; background: rgba(224, 133, 31, 0.12); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 20px; color: var(--gold); }
.page-websites .feature-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.page-websites .feature-card p { color: var(--gray-400); font-size: 14px; line-height: 1.6; }
.page-websites .gallery { padding: 100px 0; background: var(--bg-2); }
.page-websites .gallery-filters { display: flex; justify-content: center; gap: 8px; margin-bottom: 48px; }
.page-websites .filter-btn { padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; color: var(--gray-400); cursor: pointer; transition: all 0.2s; border: 1px solid transparent; background: transparent; }
.page-websites .filter-btn:hover { color: var(--ink); border-color: var(--line); }
.page-websites .filter-btn.active { background: var(--gold-fill); color: var(--ink); border-color: var(--gold-fill); }
.page-websites .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.page-websites .gallery-item { background: var(--card); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); transition: all 0.3s ease; cursor: pointer; box-shadow: var(--shadow-card); }
.page-websites .gallery-item:hover { border-color: rgba(224, 133, 31, 0.4); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(22,33,62,0.12); }
.page-websites .gallery-item:hover .gallery-image { transform: scale(1.05); }
.page-websites .gallery-image-wrapper { overflow: hidden; position: relative; }
.page-websites .gallery-image { height: 200px; background: linear-gradient(135deg, #EFF2F7 0%, #E5EAF1 100%); display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 13px; transition: transform 0.4s ease; }
.page-websites .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(22,33,62,0.78) 100%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; }
.page-websites .gallery-item:hover .gallery-overlay { opacity: 1; }
.page-websites .gallery-overlay-btn { background: var(--gold-fill); color: var(--ink); padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
.page-websites .gallery-info { padding: 20px; }
.page-websites .gallery-info h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.page-websites .gallery-meta { display: flex; justify-content: space-between; align-items: center; }
.page-websites .gallery-category { font-size: 13px; color: var(--gray-500); }
.page-websites .gallery-link { color: var(--gold); font-size: 13px; font-weight: 500; text-decoration: none; }
.page-websites .gallery-link:hover { text-decoration: underline; }
.page-websites .gallery-load-more { text-align: center; margin-top: 48px; }
/* Design gallery: real screenshots + full page viewer */
.page-websites .gallery-filters { flex-wrap: wrap; }
.page-websites .filter-btn, .page-websites .gallery-load-more .btn { font-family: inherit; }
.page-websites .gallery-image { aspect-ratio: 16 / 10; height: auto; }
.page-websites .gallery-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.page-websites .gallery-link { cursor: pointer; }
.design-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(22,33,62,0.88); display: flex; flex-direction: column; }
.design-lightbox[hidden] { display: none; }
.design-lightbox-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.design-lightbox-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.design-lightbox-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit; transition: background 0.2s, border-color 0.2s; }
.design-lightbox-close:hover { background: rgba(22,33,62,0.06); border-color: var(--ink); }
.design-lightbox-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.design-lightbox-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 24px 16px 48px; }
.design-lightbox-scroll img { display: block; width: 100%; max-width: 900px; margin: 0 auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.page-websites .stats { padding: 80px 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-websites .stats-grid { gap: 40px; text-align: center; }
.page-websites .stat-item { position: relative; }
.page-websites .stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 60px; width: 1px; background: var(--line); }
.page-websites .stat-label { font-size: 15px; }
.page-websites .faq-section { background: var(--bg-2); }
.page-websites .faq-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-websites .faq-item { padding: 20px; }
.page-websites .faq-item h4 { margin-bottom: 8px; font-size: 16px; }
.page-websites .funded-band { padding: 90px 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-websites .funded-card { max-width: 760px; margin: 0 auto; text-align: center; }
.page-websites .funded-card h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 0 auto 16px; }
.page-websites .funded-card .sub { color: var(--gray-400); font-size: 16px; max-width: 560px; margin: 0 auto 32px; }
.page-websites .funded-card .eyebrow-band { display: inline-block; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 18px; }
.page-websites .funding-compare { margin: 0 auto 32px; }
.page-websites .funding-compare .tag { color: var(--gray-500); }
.page-websites .cta-section { background: var(--ink); position: relative; overflow: hidden; }
.page-websites .cta-section::before { inset: 0; background: linear-gradient(180deg, rgba(22,33,62,0.82) 0%, rgba(22,33,62,0.9) 100%),
        url("https://images.unsplash.com/photo-1758272133786-ee98adcc6837?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; }
.page-websites .cta-card { background: rgba(22,33,62,0.45); border: 1px solid rgba(255,255,255,0.18); border-radius: 24px; padding: 64px; max-width: 800px; margin: 0 auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.page-websites .cta-card h2 { font-size: 40px; font-weight: 700; margin-bottom: 16px; color: #fff; }
.page-websites .cta-card p { color: rgba(255,255,255,0.85); font-size: 18px; margin-bottom: 32px; }
.page-websites .cta-card .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.3); }
.page-websites .cta-card .btn-secondary:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }
.page-websites .sticky-cta { right: 24px; border: 1px solid rgba(224, 133, 31, 0.4); }
@keyframes page-websites-fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
@media (max-width: 1024px) {
.page-websites .type-content { grid-template-columns: 1fr; gap: 48px; }
.page-websites .type-visual { order: -1; }
.page-websites .features-grid, .page-websites .gallery-grid { grid-template-columns: repeat(2, 1fr); }
.page-websites .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.page-websites .stat-item:not(:last-child)::after { display: none; }
.page-websites .floating-badge { display: none; }
}
@media (max-width: 768px) {
.page-websites .tabs { flex-wrap: wrap; width: 100%; }
.page-websites .tab { flex: 1; min-width: 45%; }
.page-websites .features-grid, .page-websites .gallery-grid, .page-websites .stats-grid { grid-template-columns: 1fr; }
.page-websites .cta-buttons { flex-direction: column; }
.page-websites .faq-grid { grid-template-columns: 1fr; }
.page-websites .sticky-cta { display: none; }
}

/* ==================================================================
   DE-TELL OVERRIDES (site-wide): tighten AI-signature kickers/pills
   on interior pages. Placed last so it wins by source order at
   matching specificity; remove this block to restore the originals.
   ================================================================== */
.eyebrow, .hero-badge { letter-spacing: 0.5px; }
.chip, .tag,
.page-blog-post .meta-chip,
.page-pricing .pricing-popular { border-radius: 6px; }
.page-websites .browser-bar { display: none; }
.page-websites .type-browser { box-shadow: 0 12px 32px rgba(22,33,62,0.10); }

/* ==================================================================
   MOBILE DRAWER: side nav shown under 900px in place of the top nav
   ================================================================== */
.menu-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,0.25); background:transparent; color:#fff; font-size:20px; cursor:pointer; flex:0 0 auto; }
.mobile-nav { position:fixed; top:0; right:0; width:min(340px,90vw); height:100vh; height:100dvh; background:var(--ink); border-left:1px solid rgba(255,255,255,0.12); padding:24px; transform:translateX(100%); transition:transform .28s cubic-bezier(.16,1,.3,1); z-index:1200; display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
.mobile-nav-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.12); }
.mobile-nav-brand { color:#fff; font-weight:700; }
.mobile-nav-close { width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,0.25); background:transparent; color:#fff; font-size:18px; cursor:pointer; line-height:1; }
.mobile-nav-links { display:flex; flex-direction:column; gap:2px; }
.mobile-nav a { color:rgba(255,255,255,0.85); text-decoration:none; font-size:16px; font-weight:600; padding:12px 4px; border-radius:8px; }
.mobile-nav a:not(.btn):hover { color:#fff; background:rgba(255,255,255,0.06); }
.mobile-nav .btn { width:100%; justify-content:center; margin-top:12px; }
.mobile-nav-overlay { position:fixed; inset:0; background:rgba(22,33,62,0.6); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1100; }
body.mobile-menu-open { overflow:hidden; }
body.mobile-menu-open .mobile-nav { transform:translateX(0); }
body.mobile-menu-open .mobile-nav-overlay { opacity:1; pointer-events:auto; }
@media (max-width:900px){
  .header .nav { display:none !important; }
  .header .header-cta { display:none !important; }
  .menu-toggle { display:inline-flex; }
}

/* ==================================================================
   DOMAIN CHECKER: availability result + suggestions
   ================================================================== */
.page-domains .dc-results { max-width: 560px; margin: 20px auto 0; text-align: left; }
.page-domains .dc-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 12px; padding: 16px 20px; font-size: 15px; }
.page-domains .dc-status i { font-size: 18px; }
.page-domains .dc-status span { flex: 1; min-width: 180px; }
.page-domains .dc-loading { background: var(--bg-2); color: var(--gray-400); }
.page-domains .dc-available { background: rgba(46,160,80,0.10); border: 1px solid rgba(46,160,80,0.35); color: #1b7a3f; }
.page-domains .dc-available i { color: #2ea050; }
.page-domains .dc-taken, .page-domains .dc-error { background: rgba(200,60,50,0.07); border: 1px solid rgba(200,60,50,0.28); color: #b23b30; }
.page-domains .dc-register { margin-left: auto; flex: 0 0 auto; }
.page-domains .dc-suggest-title { margin: 22px 0 10px; font-size: 14px; font-weight: 600; color: var(--gray-400); }
.page-domains .dc-suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.page-domains .dc-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; transition: border-color 0.2s, background 0.2s; }
.page-domains .dc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-domains .dc-chip:hover { border-color: var(--gold-fill); background: rgba(224,133,31,0.06); }
.page-domains .dc-chip i { color: #2ea050; }

/* ---------- page-support-center: the /help app rendered through support.html ----------
   /help/default.asp emits Bootstrap-era markup (.row, .col-md-4, .form-control,
   .articleResult, .breadcrumb, .embed-responsive). Bootstrap is not loaded in this
   skin, so these rules restyle that output to match the Advoc8 design. */
.page-support-center .help-hero { padding: 64px 0 40px; background: var(--bg-2); border-bottom: 1px solid var(--line); text-align: center; }
.page-support-center .help-hero h1 { font-size: clamp(34px, 4.5vw, 48px); line-height: 1.1; margin-bottom: 14px; }
.page-support-center .help-hero .hero-subtitle { max-width: 640px; margin: 0 auto 26px; }
.page-support-center .help-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page-support-center .help-body { padding: 56px 0 72px; background: var(--bg); }

.page-support-center .supportCenter { width: 100%; }
.page-support-center h2 { font-size: 30px; letter-spacing: -0.01em; margin-bottom: 22px; }
.page-support-center h3 { font-size: 18px; font-weight: 600; }

/* search + folder filter */
.page-support-center .searchBox { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 44px; }
.page-support-center .form-control { width: 100%; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); font-family: inherit; font-size: 15px; }
.page-support-center .form-control:focus { outline: none; border-color: var(--gold-fill); }
.page-support-center select.form-control { cursor: pointer; }

/* folder columns */
.page-support-center .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.page-support-center .searchBox.row { grid-template-columns: 2fr 1fr; }
.page-support-center .col-md-4, .page-support-center .col-md-12, .page-support-center .col-sm-8, .page-support-center .col-sm-4 { min-width: 0; }

/* article listings */
.page-support-center .articleResult { padding: 14px 0; border-bottom: 1px solid var(--line); }
.page-support-center .articleResult .title a { color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.page-support-center .articleResult .title a:hover { color: var(--gold); }
.page-support-center .articleResult .summary { color: var(--gray-400); font-size: 14px; line-height: 1.6; margin-top: 4px; }
.page-support-center .articleResult .url { font-size: 12px; margin-top: 4px; }
.page-support-center .articleResult .url a { color: var(--gray-500); text-decoration: none; word-break: break-all; }

/* buttons the app emits that the skin does not define */
.page-support-center .btn-info { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.page-support-center .btn-info:hover { border-color: var(--gold-fill); color: var(--gold-dark); background: rgba(224, 133, 31, 0.06); }

/* breadcrumb */
.page-support-center .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-bottom: 22px; font-size: 14px; color: var(--gray-500); background: none; }
.page-support-center .breadcrumb li { margin-bottom: 0; }
.page-support-center .breadcrumb li + li::before { content: '\002F'; margin-right: 8px; color: var(--gray-600); }
.page-support-center .breadcrumb a { color: var(--gold); text-decoration: none; }

/* article body (arbitrary HTML from the knowledge base) */
.page-support-center .supportCenter p { line-height: 1.7; color: var(--gray-300); margin-bottom: 14px; }
.page-support-center .supportCenter ul, .page-support-center .supportCenter ol { margin: 0 0 16px 20px; }
.page-support-center .supportCenter ul li, .page-support-center .supportCenter ol li { margin-bottom: 8px; line-height: 1.6; color: var(--gray-300); }
.page-support-center .supportCenter img { max-width: 100%; height: auto; border-radius: 10px; }
.page-support-center .supportCenter table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.page-support-center .supportCenter th, .page-support-center .supportCenter td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 14px; }
.page-support-center .embed-responsive { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 14px; margin-bottom: 20px; }
.page-support-center .embed-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* closing Help Request prompt */
.page-support-center .help-foot { padding: 0 0 80px; background: var(--bg); }
.page-support-center .help-foot-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow-card); }
.page-support-center .help-foot-text h3 { margin-bottom: 6px; }
.page-support-center .help-foot-text p { color: var(--gray-400); font-size: 15px; max-width: 620px; }
@media (max-width: 1024px) {
.page-support-center .row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-support-center .row, .page-support-center .searchBox, .page-support-center .searchBox.row { grid-template-columns: 1fr; }
.page-support-center .help-foot-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- page-site-blog: the /blog app rendered through blog.html ----------
   /blog/default.asp emits Bootstrap-era markup (#divSiteBlog, .row, .col-md-*, .col-sm-*,
   .article-category, .pagination, .divBlogFull) AND injects its own <style> block at the end
   of the page. That injected CSS loads after this stylesheet, so these rules are scoped under
   .page-site-blog to win on specificity rather than order. */
.page-site-blog .blog-body { padding: 64px 0 72px; background: var(--bg); }
.page-site-blog h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 28px; }
.page-site-blog h2 { font-size: 24px; line-height: 1.25; }
.page-site-blog h2 a { font-size: inherit; color: var(--ink); text-decoration: none; }
.page-site-blog h2 a:hover { color: var(--gold); }
.page-site-blog h3 { font-size: 18px; font-weight: 600; }

/* grid: one flex row serves both the article list (col-md-3 + col-md-9) and the
   post view (col-sm-8 body + col-sm-4 sidebar) */
.page-site-blog .row { display: flex; flex-wrap: wrap; gap: 24px; }
.page-site-blog .col-md-3 { flex: 0 0 330px; max-width: 330px; }
.page-site-blog .col-md-9 { flex: 1 1 0; min-width: 0; }
.page-site-blog .col-md-12 { flex: 1 1 100%; min-width: 0; }
.page-site-blog .col-sm-8 { flex: 1 1 60%; min-width: 0; }
.page-site-blog .col-sm-4 { flex: 0 0 300px; max-width: 300px; min-width: 0; }
.page-site-blog .text-center { text-align: center; }
.page-site-blog .divClear { clear: both; }
.page-site-blog .noTopMargin { margin-top: 0; }
.page-site-blog .noBottomMargin { margin-bottom: 0; }
.page-site-blog .img-responsive { max-width: 100%; height: auto; display: block; border-radius: 12px; }

/* article list rows. The app sets a dotted near-black border inline, so it can only be
   replaced with !important. */
.page-site-blog #divSiteBlog > .row { border-bottom: 1px solid var(--line) !important; margin-bottom: 32px !important; padding-bottom: 32px; }
.page-site-blog #divSiteBlog > .row:last-of-type { border-bottom: 0 !important; }
.page-site-blog #divSiteBlog > .row p { color: var(--gray-400); font-size: 15px; line-height: 1.7; margin: 10px 0 14px; }

/* read more / generic app buttons */
.page-site-blog .btn-success, .page-site-blog .btn-site { background: var(--gold-fill); border: 1px solid transparent; color: var(--ink); font-weight: 600; }
.page-site-blog .btn-success:hover, .page-site-blog .btn-site:hover { background: var(--gold-dark); color: #fff; }

/* category sidebar (post view) */
.page-site-blog a.article-category { display: block; padding: 10px 14px; margin-bottom: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--gray-300); font-size: 14px; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.page-site-blog a.article-category:hover { background: var(--card); border-color: var(--gold-fill); color: var(--gold-dark); }
.page-site-blog a.article-category .fa { margin-right: 6px; opacity: 0.5; }

/* breadcrumb */
.page-site-blog .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-bottom: 20px; background: none; }
.page-site-blog .breadcrumb li { font-size: 14px; color: var(--gray-500); }
.page-site-blog .breadcrumb li a { color: var(--gold); text-decoration: none; }
.page-site-blog .breadcrumb li + li::before { content: '\002F'; margin-right: 8px; color: var(--gray-600); }

/* pagination */
.page-site-blog .pagination { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 8px 0 0; }
.page-site-blog .pagination li a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.page-site-blog .pagination li a:hover { border-color: var(--gold-fill); color: var(--gold-dark); }
.page-site-blog .pagination li.active a { background: var(--gold-fill); border-color: transparent; color: var(--ink); font-weight: 600; }

/* full post */
.page-site-blog .divBlogFull { border-bottom: 1px solid var(--line); padding-bottom: 32px; margin-bottom: 40px; }
/* Sidebar lead form on a blog post. Replaces the legacy landing-page form that used to be
   injected by objLandingPages.getForm(); posts to the same page record (37). */
.page-site-blog .blog-lead { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-card); }
.page-site-blog .blog-lead h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.page-site-blog .blog-lead p { font-size: 14px; color: var(--gray-400); margin-bottom: 16px; }
.page-site-blog .blog-lead-form { display: grid; gap: 10px; }
.page-site-blog .blog-lead-form input, .page-site-blog .blog-lead-form textarea { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--ink); outline: none; font-family: inherit; transition: border-color 0.2s; }
.page-site-blog .blog-lead-form input:focus, .page-site-blog .blog-lead-form textarea:focus { border-color: var(--gold); }
.page-site-blog .blog-lead-form input::placeholder, .page-site-blog .blog-lead-form textarea::placeholder { color: var(--gray-500); }
.page-site-blog .blog-lead-form textarea { resize: vertical; }

.page-site-blog .divBlogFull .title { margin-bottom: 40px; }
.page-site-blog .divBlogFull .title h1 { margin-bottom: 0; }
.page-site-blog .summary p { color: var(--gray-300); font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
.page-site-blog .summary h2, .page-site-blog .summary h3, .page-site-blog .summary h4 { margin: 28px 0 12px; }
.page-site-blog .summary ul, .page-site-blog .summary ol { margin: 0 0 18px 22px; }
.page-site-blog .summary li { color: var(--gray-300); line-height: 1.7; margin-bottom: 8px; }
.page-site-blog .summary img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 16px; }
.page-site-blog .summary a { color: var(--gold); }
.page-site-blog .summary blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--gold-fill); background: var(--bg-2); border-radius: 0 10px 10px 0; color: var(--gray-300); }
.page-site-blog .summary table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.page-site-blog .summary th, .page-site-blog .summary td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 14px; }

/* closing prompt */
.page-site-blog .blog-foot { padding: 0 0 80px; background: var(--bg); }
.page-site-blog .blog-foot-card { background: var(--gradient-card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow-card); }
.page-site-blog .blog-foot-text h3 { margin-bottom: 6px; }
.page-site-blog .blog-foot-text p { color: var(--gray-400); font-size: 15px; max-width: 620px; }
@media (max-width: 900px) {
.page-site-blog .col-md-3, .page-site-blog .col-sm-4 { flex: 1 1 100%; max-width: 100%; }
.page-site-blog .blog-foot-card { flex-direction: column; align-items: flex-start; }
}
/* Success panel swapped in after a magnet form posts. The returned markup is legacy
   Bootstrap, so keep this generic rather than styling those classes. */
.optin-done { text-align: left; }
.optin-done h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.optin-done p { font-size: 15px; line-height: 1.6; }
.optin-done .bootstrap img { display: none; }

/* ==================================================================
   ORDER / CHECKOUT APP  (/order/checkout/)
   The app renders through Secondary.html but emits Bootstrap 3.4 markup, and
   Bootstrap is not loaded on this skin. Its output is also unwrapped: h1, p, h3,
   .invoice and #divCheckoutForm are direct children of <body>.

   Two things to know before editing:
   1. #divCheckoutForm is unique to this app, so :has() scopes everything here
      without touching another page. No :has() support means today's rendering.
   2. The app emits its OWN <style> block as the LAST element in <body>, so it
      beats any rule of equal specificity. Every selector below is prefixed to
      outrank it, and properties it sets are overridden explicitly, because an
      unset property is not beaten by specificity alone.
   ================================================================== */
body:has(#divCheckoutForm) > h1,
body:has(#divCheckoutForm) > h3,
body:has(#divCheckoutForm) > p,
body:has(#divCheckoutForm) > .invoice,
body:has(#divCheckoutForm) > #divCheckoutForm {
  width: min(1200px, 100% - 48px); margin-left: auto; margin-right: auto;
  padding-left: 0; padding-right: 0;
}
/* the bare headings and paragraphs are not cards, so inset them to line up with the
   text inside the cards rather than with the card edges */
body:has(#divCheckoutForm) > h1, body:has(#divCheckoutForm) > h3, body:has(#divCheckoutForm) > p { padding-left: 24px; padding-right: 24px; }
body:has(#divCheckoutForm) > h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; margin: 56px auto 14px; letter-spacing: -0.02em; }
body:has(#divCheckoutForm) > p { color: var(--gray-400); font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
body:has(#divCheckoutForm) > p a { color: var(--gold); font-weight: 600; }
body:has(#divCheckoutForm) > h3 { font-size: 21px; font-weight: 600; margin: 30px auto 16px; }
body:has(#divCheckoutForm) > h3 a { color: var(--gold); text-decoration: none; }
body:has(#divCheckoutForm) > #divCheckoutForm { padding-bottom: 80px; }

/* ---------- Bootstrap 3.4 grid, rebuilt on CSS grid ----------
   The old template was built against Bootstrap 3.4, so the classes follow its rules:
   xs < 768, sm >= 768, md >= 992, lg >= 1200, and a column is full width until its
   own breakpoint. The app does not always wrap columns in a .row (.admin-details,
   .payment-credit and .payment-checking hold col-* children directly), so any element
   whose DIRECT children are columns becomes the grid. */
body:has(#divCheckoutForm) .row,
body:has(#divCheckoutForm) div:has(> [class*="col-"]) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
/* full width by default, and a grid child that is not a column must not take one track */
body:has(#divCheckoutForm) [class*="col-"] { grid-column: 1 / -1; min-width: 0; }
/* :not() matters here. Written as "> *" this also matches the columns and, being
   more specific than .col-md-4, pins every column to full width at all widths. */
body:has(#divCheckoutForm) .row > :not([class*="col-"]),
body:has(#divCheckoutForm) div:has(> [class*="col-"]) > :not([class*="col-"]) { grid-column: 1 / -1; }

/* col-xs-* applies at every width */
body:has(#divCheckoutForm) .col-xs-1 { grid-column: span 1; }
body:has(#divCheckoutForm) .col-xs-2 { grid-column: span 2; }
body:has(#divCheckoutForm) .col-xs-3 { grid-column: span 3; }
body:has(#divCheckoutForm) .col-xs-4 { grid-column: span 4; }
body:has(#divCheckoutForm) .col-xs-5 { grid-column: span 5; }
body:has(#divCheckoutForm) .col-xs-6 { grid-column: span 6; }
body:has(#divCheckoutForm) .col-xs-7 { grid-column: span 7; }
body:has(#divCheckoutForm) .col-xs-8 { grid-column: span 8; }
body:has(#divCheckoutForm) .col-xs-9 { grid-column: span 9; }
body:has(#divCheckoutForm) .col-xs-10 { grid-column: span 10; }
body:has(#divCheckoutForm) .col-xs-11 { grid-column: span 11; }
body:has(#divCheckoutForm) .col-xs-12 { grid-column: span 12; }

@media (min-width: 768px) {
body:has(#divCheckoutForm) .col-sm-1 { grid-column: span 1; }
body:has(#divCheckoutForm) .col-sm-2 { grid-column: span 2; }
body:has(#divCheckoutForm) .col-sm-3 { grid-column: span 3; }
body:has(#divCheckoutForm) .col-sm-4 { grid-column: span 4; }
body:has(#divCheckoutForm) .col-sm-5 { grid-column: span 5; }
body:has(#divCheckoutForm) .col-sm-6 { grid-column: span 6; }
body:has(#divCheckoutForm) .col-sm-7 { grid-column: span 7; }
body:has(#divCheckoutForm) .col-sm-8 { grid-column: span 8; }
body:has(#divCheckoutForm) .col-sm-9 { grid-column: span 9; }
body:has(#divCheckoutForm) .col-sm-10 { grid-column: span 10; }
body:has(#divCheckoutForm) .col-sm-11 { grid-column: span 11; }
body:has(#divCheckoutForm) .col-sm-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
body:has(#divCheckoutForm) .col-md-1 { grid-column: span 1; }
body:has(#divCheckoutForm) .col-md-2 { grid-column: span 2; }
body:has(#divCheckoutForm) .col-md-3 { grid-column: span 3; }
body:has(#divCheckoutForm) .col-md-4 { grid-column: span 4; }
body:has(#divCheckoutForm) .col-md-5 { grid-column: span 5; }
body:has(#divCheckoutForm) .col-md-6 { grid-column: span 6; }
body:has(#divCheckoutForm) .col-md-7 { grid-column: span 7; }
body:has(#divCheckoutForm) .col-md-8 { grid-column: span 8; }
body:has(#divCheckoutForm) .col-md-9 { grid-column: span 9; }
body:has(#divCheckoutForm) .col-md-10 { grid-column: span 10; }
body:has(#divCheckoutForm) .col-md-11 { grid-column: span 11; }
body:has(#divCheckoutForm) .col-md-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
body:has(#divCheckoutForm) .col-lg-1 { grid-column: span 1; }
body:has(#divCheckoutForm) .col-lg-2 { grid-column: span 2; }
body:has(#divCheckoutForm) .col-lg-3 { grid-column: span 3; }
body:has(#divCheckoutForm) .col-lg-4 { grid-column: span 4; }
body:has(#divCheckoutForm) .col-lg-5 { grid-column: span 5; }
body:has(#divCheckoutForm) .col-lg-6 { grid-column: span 6; }
body:has(#divCheckoutForm) .col-lg-7 { grid-column: span 7; }
body:has(#divCheckoutForm) .col-lg-8 { grid-column: span 8; }
body:has(#divCheckoutForm) .col-lg-9 { grid-column: span 9; }
body:has(#divCheckoutForm) .col-lg-10 { grid-column: span 10; }
body:has(#divCheckoutForm) .col-lg-11 { grid-column: span 11; }
body:has(#divCheckoutForm) .col-lg-12 { grid-column: span 12; }
}

/* ---------- order summary ---------- */
body:has(#divCheckoutForm) .invoice { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px 24px 22px; box-shadow: var(--shadow-card); margin-bottom: 34px; }
body:has(#divCheckoutForm) .invoice .item-info { padding: 16px 0; margin-bottom: 0; height: auto; border-bottom: 1px solid var(--line); }
body:has(#divCheckoutForm) .invoice .item-service { background: transparent; border: 0; }
body:has(#divCheckoutForm) .invoice .item-name { font-weight: 600; font-size: 15px; line-height: 1.4; }
body:has(#divCheckoutForm) .invoice .item-notes { color: var(--gray-500); font-size: 13px; line-height: 1.55; margin-top: 3px; font-style: normal; }
body:has(#divCheckoutForm) .invoice .item-price { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
body:has(#divCheckoutForm) .invoice .item-price .grey { color: var(--gray-500); font-weight: 500; }
body:has(#divCheckoutForm) .invoice .invoice-total { text-align: left; font-size: 16px; font-weight: 400; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--line-2); }
body:has(#divCheckoutForm) .invoice .invoice-total .caption { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); font-weight: 600; }
body:has(#divCheckoutForm) .invoice .invoice-total .price { font-size: 30px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- checkout form ---------- */
/* The app writes style="background-color:rgba(0,0,0,0.05);padding:1em" on the form's
   outer wrapper. Inline styles beat any selector, so !important is the only lever,
   and it is matched on that exact value so nothing else is caught. */
#divCheckoutForm div[style*="rgba(0,0,0,0.05)"] { background: none !important; padding: 0 !important; }
#divCheckoutForm .section-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-card); }
#divCheckoutForm h3 { font-size: 18px; font-weight: 600; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#divCheckoutForm .payment-section { background: none; border: 0; padding: 0; margin: 30px 0 0; }
/* each payment-section may open with a short note under its heading; the rule for
   bare paragraphs is scoped to direct children of body, so it does not reach here */
#divCheckoutForm .payment-section > p { color: var(--gray-400); font-size: 14px; line-height: 1.6; margin: -6px 0 18px; }
#divCheckoutForm .payment-section:first-of-type { margin-top: 0; }

#divCheckoutForm .form-group { margin-bottom: 16px; }
#divCheckoutForm label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-300); margin-bottom: 6px; }
#divCheckoutForm .form-control {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 10px; transition: border-color .2s, box-shadow .2s;
}
#divCheckoutForm .form-control:focus { outline: none; border-color: var(--gold-fill); box-shadow: 0 0 0 3px rgba(224,133,31,0.15); }
#divCheckoutForm select.form-control { cursor: pointer; }
#divCheckoutForm .input-lg { padding: 15px 16px; font-size: 17px; }

/* Bootstrap's input-group is a table row; rebuild it as a flex pair. The app wraps
   each field in a plain div inside it, and a flex child sizes to content, so the
   field has to be told to grow. */
#divCheckoutForm .input-group { display: flex; align-items: stretch; }
#divCheckoutForm .input-group > * { flex: 1 1 auto; min-width: 0; }
#divCheckoutForm .input-group > .input-group-addon { flex: 0 0 auto; }
#divCheckoutForm .input-group-addon {
  display: flex; align-items: center; justify-content: center; min-width: 46px;
  padding: 0 12px; background: var(--bg-2); color: var(--gray-500);
  border: 1px solid var(--line-2); border-right: 0; border-radius: 10px 0 0 10px; font-size: 14px;
}
#divCheckoutForm .input-group .form-control { border-radius: 0 10px 10px 0; }

#divCheckoutForm .autofills { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
#divCheckoutForm .admin-details { margin-top: 26px; }

#divCheckoutForm .btn { font-family: inherit; }
#divCheckoutForm .btn-success {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 22px; padding: 16px 28px; font-size: 16px; font-weight: 600;
  color: #fff; background: var(--gold-fill); border: 0; border-radius: 10px;
  cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s;
}
#divCheckoutForm .btn-success:hover { background: var(--gold-light); transform: translateY(-1px); }

body:has(#divCheckoutForm) .alert { border-radius: 10px; padding: 14px 16px; font-size: 14px; }
body:has(#divCheckoutForm) .alert-danger { background: rgba(217,72,59,0.08); border: 1px solid rgba(217,72,59,0.3); color: #b23b30; }

/* Spacing only. Column stacking is handled by the Bootstrap 3.4 breakpoints above,
   so nothing here needs to override a span. */
@media (max-width: 640px) {
  body:has(#divCheckoutForm) > h1 { margin-top: 38px; }
  body:has(#divCheckoutForm) > h1, body:has(#divCheckoutForm) > h3, body:has(#divCheckoutForm) > p, body:has(#divCheckoutForm) > .invoice, body:has(#divCheckoutForm) > #divCheckoutForm { width: min(1200px, 100% - 32px); }
  body:has(#divCheckoutForm) > h1, body:has(#divCheckoutForm) > h3, body:has(#divCheckoutForm) > p { padding-left: 18px; padding-right: 18px; }
  body:has(#divCheckoutForm) .invoice { padding: 6px 18px 18px; }
  #divCheckoutForm .section-box { padding: 20px 18px; }
}