/* ============================================================
   SEIZE THE MOMENT — GLOBAL STYLESHEET
   assets/css/style.css

   Structure:
   1. Design tokens
   2. Base reset & typography
   3. Shared layout primitives (.wrap, intro band, divider, etc.)
   4. Shared components (buttons, cards, tags, avatars, share row)
   5. Site header + mobile nav
   6. Site footer
   7. Accessibility utilities (skip link, focus states)
   8. Page-specific sections (appended below, namespaced per page)
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --ink-plum:   #241533;   /* deep background */
  --plum-2:     #341f49;   /* mid gradient stop */
  --amethyst:   #7A4BB0;   /* primary brand purple, matched to ribbon */
  --iris:       #B08EDD;   /* light accent / line glow */
  --hope-gold:  #F0B84B;   /* the light breaking through — CTA */
  --hope-gold-d:#D99A2B;
  --hope-gold-text:#8F651C; /* WCAG AA-safe (5.0:1 on paper) — use for TEXT, not backgrounds. hope-gold-d is for backgrounds/gradients only. */
  --mist:       #F7F3FC;   /* near-white for text on dark */
  --mist-dim:   #D9CBEC;   /* dimmed body copy on dark */
  --charcoal:   #1B1024;
  --paper:      #FCFAFE;
  --paper-2:    #F1E9F8;
  --ink-body:   #3A2C4D;
  --ink-muted:  #6E5C86;
  --line:       #E7DCF2;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1120px;
}

/* ---------- 2. BASE RESET & TYPOGRAPHY ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-body);
}
/* Home is the one full-bleed dark page (hero only) */
body.page-index{ background: var(--ink-plum); }

a{ color:inherit; }
img, svg{ display:block; max-width:100%; }

/* Consistent, visible focus state site-wide (never remove outline without replacing it) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--amethyst);
  outline-offset: 3px;
}
/* Iris outline only where the background is actually dark (the hero sections
   on Home and Newsletter) — scoped narrowly rather than whole-page, since
   newsletter.php also has light-background sections (Past Issues) where
   iris would fail contrast. */
.hero :focus-visible,
.signup-hero :focus-visible{
  outline-color: var(--iris);
}

/* ---------- 3. SHARED LAYOUT PRIMITIVES ---------- */
.wrap{ max-width: var(--container); margin:0 auto; padding: 0 24px; }

.mark{ width:48px; height:auto; filter: drop-shadow(0 6px 16px rgba(122,75,176,0.5)); }
.eyebrow{
  font-weight:700; font-size:0.75rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--hope-gold); margin:0 0 16px;
}

/* Standard dark "intro band" used at the top of every interior page */
.intro{
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
  padding: 80px 24px 84px; text-align:center;
}
.intro::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 820px 480px at 50% 0%, rgba(176,142,221,0.28), transparent 62%);
}
.intro .mark{ margin:0 auto 20px; }
.intro-inner{ position:relative; z-index:1; max-width: 660px; margin:0 auto; }
.intro h1{
  font-family: var(--font-display); font-weight:600; font-optical-sizing:auto;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height:1.35; letter-spacing:-0.01em;
  color: var(--mist); margin:0;
}
.intro h1 em{ font-style:italic; font-weight:500; color: var(--hope-gold); }

.intro-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
/* about.html's headline is two full sentences and needs a touch more room */
body.page-about .intro-inner{ max-width: 700px; }
body.page-donate .intro h1{ margin: 0 0 30px; }

.divider{ display:flex; justify-content:center; padding: 0; background:var(--paper); }
.divider svg{ width: 120px; height:24px; opacity:0.55; margin-top:-1px; }

.tag{
  display:inline-flex; align-self:flex-start; font-size:0.6875rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--amethyst); background: var(--paper-2);
  border-radius:999px; padding:6px 13px; margin-bottom:16px;
}

.section-head{ text-align:center; max-width: 560px; margin: 0 auto 48px; }
.section-head .kicker{ font-weight:700; font-size:0.7188rem; letter-spacing:.2em; text-transform:uppercase; color: var(--amethyst); margin:0 0 12px; }
.section-head h2{
  font-family: var(--font-display); font-weight:600; font-optical-sizing:auto;
  font-size: clamp(1.6rem, 3vw, 2.15rem); color: var(--charcoal); margin:0; letter-spacing:-0.01em;
}

/* ---------- 4. SHARED COMPONENTS ---------- */

/* Buttons */
.btn{
  font-family: var(--font-body); font-weight:700; font-size: 0.875rem; letter-spacing:.01em;
  padding: 13px 26px; border-radius: 999px; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  cursor:pointer; border: 1.5px solid transparent;
}
.btn-primary{
  background: linear-gradient(135deg, var(--hope-gold), var(--hope-gold-d));
  color: var(--charcoal); box-shadow: 0 8px 20px rgba(240,184,75,0.25);
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 26px rgba(240,184,75,0.34); }
.btn-primary:focus-visible{ outline: 3px solid var(--amethyst); outline-offset:3px; }
.btn-primary svg{ width:16px; height:16px; }

/* Secondary button — light-background default */
.btn-secondary{
  background: transparent; color: var(--amethyst); border-color: rgba(122,75,176,0.4);
}
.btn-secondary:hover{ background: rgba(122,75,176,0.06); border-color: var(--amethyst); transform: translateY(-2px) scale(1.03); }
.btn-secondary:focus-visible{ outline: 3px solid var(--amethyst); outline-offset:3px; }

/* Secondary button — dark-background variant (intro bands, CTA strips) */
.btn-secondary.on-dark{
  background: rgba(247,243,252,0.05); color: var(--mist); border-color: rgba(217,203,236,0.5);
}
.btn-secondary.on-dark:hover{ background: rgba(247,243,252,0.12); border-color: var(--iris); }
.btn-secondary.on-dark:focus-visible{ outline: 3px solid var(--iris); outline-offset:3px; }

.btn-text{
  font-weight:700; font-size:0.8438rem; color: var(--amethyst); text-decoration:none;
  display:inline-flex; align-items:center; gap:5px;
}
.btn-text:hover{ color: var(--hope-gold-text); }

/* Card (initiatives, resources) */
.card{
  position:relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px;
  padding: 32px 30px 28px; display:flex; flex-direction:column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 20px 42px rgba(122,75,176,0.14); border-color: rgba(122,75,176,0.4); }
.card-icon{
  width:50px; height:50px; border-radius:13px; flex-shrink:0;
  background: linear-gradient(135deg, var(--amethyst), var(--iris));
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card-icon svg{ width:24px; height:24px; }
.card h3{ font-family: var(--font-display); font-weight:600; font-size:1.28rem; color: var(--charcoal); margin:0 0 10px; letter-spacing:-0.005em; }
.card p.desc{ font-size:0.9062rem; line-height:1.7; color: var(--ink-body); margin:0 0 18px; }
.card .visual-note{
  font-size:0.7812rem; line-height:1.6; color: var(--ink-muted); font-style:italic;
  border-left: 2.5px solid var(--iris); padding-left:12px; margin: 0 0 24px;
}
.card-actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }

/* Author / byline avatar, used on blog + blog post */
.avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--iris), var(--amethyst));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:600; font-size:0.9062rem;
}
.byline{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.byline-text .name{ font-size:0.8438rem; font-weight:700; color: var(--charcoal); }
.byline-text .meta{ font-size:0.75rem; color: var(--ink-muted); }

/* Social / article share row */
.share-row{ display:flex; align-items:center; gap:8px; }
.share-row span.label{ font-size:0.7188rem; font-weight:700; color: var(--ink-muted); letter-spacing:.04em; text-transform:uppercase; margin-right:4px; }
.share-btn{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--amethyst);
  transition: border-color .18s ease, color .18s ease, transform .18s ease; text-decoration:none;
}
.share-btn:hover{ border-color: var(--amethyst); color: var(--hope-gold-text); transform: translateY(-2px); }
.share-btn svg{ width:15px; height:15px; }

/* Dark closing "visual strip" band, used on initiatives + resources */
.visual-strip{
  background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 100%);
  padding: 64px 24px; text-align:center; position:relative; overflow:hidden; isolation:isolate;
}
.visual-strip::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 700px 380px at 50% 100%, rgba(240,184,75,0.10), transparent 65%);
}
.visual-strip-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.visual-strip p.kicker{ font-weight:700; font-size:0.7188rem; letter-spacing:.2em; text-transform:uppercase; color: var(--hope-gold); margin:0 0 14px; }
.visual-strip p.body{ font-size:0.9375rem; line-height:1.75; color: var(--mist-dim); margin:0; }

/* ---------- 5. SITE HEADER + MOBILE NAV ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: var(--ink-plum);
  border-bottom: 1px solid rgba(217,203,236,0.14);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.brand img{ width:32px; height:auto; }
.brand span{
  font-family: var(--font-display); font-weight:600; font-style:italic; font-size:1.05rem;
  color: var(--mist); letter-spacing:-0.005em; white-space:nowrap;
}

.main-nav{ display:flex; }
.main-nav ul{ list-style:none; display:flex; gap:2px; margin:0; padding:0; }
.main-nav a{
  display:inline-flex; align-items:center; min-height:44px; font-size:0.8438rem; font-weight:700; text-decoration:none;
  color: var(--mist-dim); padding:9px 14px; border-radius:999px;
  transition: color .18s ease, background .18s ease;
}
.main-nav a:hover{ color: var(--mist); background: rgba(247,243,252,0.06); }
.main-nav a[aria-current="page"]{ color: var(--hope-gold); }

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:1.5px solid rgba(217,203,236,0.3);
  background: transparent; color: var(--mist); cursor:pointer; flex-shrink:0;
}
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width: 880px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--ink-plum); border-bottom: 1px solid rgba(217,203,236,0.14);
    max-height:0; overflow:hidden; transition: max-height .28s ease;
  }
  .main-nav.is-open{ max-height: 480px; }
  .main-nav ul{ flex-direction:column; gap:0; padding: 8px 20px 16px; }
  .main-nav a{ display:block; padding:12px 10px; border-radius:10px; }
}

/* ---------- 6. SITE FOOTER ---------- */
.site-footer{
  background: var(--ink-plum);
  padding: 56px 24px 0;
}
.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(217,203,236,0.14);
}
.footer-brand{ display:flex; flex-direction:column; gap:14px; }
.footer-brand .brand{ margin-bottom:2px; }
.footer-brand p{ font-size:0.8125rem; line-height:1.65; color: var(--mist-dim); margin:0; max-width:280px; }

.footer-col h2{
  font-family: var(--font-body); font-weight:800; font-size:0.7188rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--hope-gold); margin: 0 0 16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{
  font-size:0.8438rem; font-weight:600; color: var(--mist-dim); text-decoration:none;
  transition: color .18s ease;
}
.footer-col a:hover{ color: var(--mist); }

.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-social a{
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(217,203,236,0.3);
  display:flex; align-items:center; justify-content:center; color: var(--mist-dim);
  text-decoration:none; transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
}
.footer-social a:hover{ border-color: var(--hope-gold); color: var(--hope-gold); background: rgba(240,184,75,0.08); transform: translateY(-2px); }
.footer-social svg{ width:17px; height:17px; }

.footer-bottom{
  display:flex; align-items:center; justify-content:center;
  padding: 22px 0; text-align:center;
}
.footer-bottom p{ font-size:0.7812rem; color: var(--mist-dim); opacity:0.75; margin:0; }

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr; gap:32px; }
}

/* ---------- FORM VALIDATION STATES (error / success) ---------- */
/* Applied by assets/js/main.js */
input.has-error, textarea.has-error{
  border-color: #C0392B !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.14);
}
.field-error{
  color: #C0392B;
  font-size: 0.7812rem;
  font-weight: 700;
  margin: 7px 0 0;
  display:flex; align-items:center; gap:6px;
}
.field-error::before{
  content:"!"; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:#C0392B; color:#fff;
  font-size:0.625rem; font-weight:800; flex-shrink:0;
}
.form-success{
  background: #EAF7EC;
  border: 1.5px solid #2E7D32;
  color: #1E5B24;
  border-radius: 14px;
  padding: 20px 22px;
  font-size: 0.9062rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

/* ---------- BACK TO TOP BUTTON ---------- */
/* Injected at runtime by assets/js/main.js */
.back-to-top{
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--amethyst), var(--iris));
  color: #fff;
  box-shadow: 0 10px 24px rgba(122,75,176,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease, background .18s ease;
}
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{
  background: linear-gradient(135deg, var(--hope-gold), var(--hope-gold-d));
  color: var(--charcoal);
  transform: translateY(-3px) scale(1.05);
}
.back-to-top:focus-visible{
  outline: 3px solid var(--hope-gold);
  outline-offset: 3px;
}
.back-to-top svg{ width:20px; height:20px; }

/* ---------- FAQ Chatbot widget ---------- */
.chatbot-launcher{
  position: fixed; left: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--amethyst), var(--iris));
  color: #fff; box-shadow: 0 10px 26px rgba(122,75,176,0.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.chatbot-launcher:hover{ transform: translateY(-3px) scale(1.05); }
.chatbot-launcher:focus-visible{ outline: 3px solid var(--hope-gold); outline-offset: 3px; }
.chatbot-launcher svg{ width: 26px; height: 26px; }
.chatbot-launcher .icon-close{ display:none; }
.chatbot-launcher[aria-expanded="true"] .icon-chat{ display:none; }
.chatbot-launcher[aria-expanded="true"] .icon-close{ display:block; }
.chatbot-launcher .unread-dot{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background: var(--hope-gold); border: 2px solid var(--paper);
}

.chatbot-panel{
  position: fixed; left: 22px; bottom: 90px; z-index: 61;
  width: min(340px, calc(100vw - 44px)); max-height: min(480px, calc(100vh - 140px));
  background: var(--paper); border-radius: 18px; overflow:hidden;
  box-shadow: 0 24px 60px rgba(27,16,36,0.28);
  display:flex; flex-direction:column;
  opacity:0; transform: translateY(16px) scale(0.97); pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.chatbot-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }

.chatbot-header{
  background: linear-gradient(160deg, var(--ink-plum), var(--plum-2));
  color: var(--mist); padding: 16px 18px; display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.chatbot-header img{ width:28px; height:28px; border-radius:50%; }
.chatbot-header .title{ font-family: var(--font-display); font-weight:600; font-size:0.95rem; }
.chatbot-header .subtitle{ font-size:0.72rem; color: var(--mist-dim); }

.chatbot-messages{
  flex:1; overflow-y:auto; padding: 16px; display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.chatbot-msg{ max-width:85%; font-size:0.85rem; line-height:1.5; padding:10px 13px; border-radius:14px; }
.chatbot-msg.bot{ background: var(--paper-2); color: var(--ink-body); align-self:flex-start; border-bottom-left-radius:4px; }
.chatbot-msg.user{ background: var(--amethyst); color: #fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chatbot-msg a{ color: var(--amethyst); font-weight:700; }
.chatbot-msg.bot a{ text-decoration:underline; }

.chatbot-quick-replies{ display:flex; flex-wrap:wrap; gap:6px; padding: 0 16px 12px; flex-shrink:0; }
.chatbot-chip{
  font-family: var(--font-body); font-size:0.72rem; font-weight:700; color: var(--amethyst);
  background: var(--paper-2); border: 1.5px solid var(--line); border-radius:999px;
  padding: 6px 12px; cursor:pointer; transition: background .18s ease, border-color .18s ease;
}
.chatbot-chip:hover{ background: rgba(122,75,176,0.1); border-color: var(--amethyst); }
.chatbot-chip:focus-visible{ outline: 3px solid var(--amethyst); outline-offset:2px; }

.chatbot-input-row{
  display:flex; gap:8px; padding: 12px; border-top: 1.5px solid var(--line); flex-shrink:0;
}
.chatbot-input-row input{
  flex:1; font-family: var(--font-body); font-size:0.85rem; color: var(--ink-body);
  border: 1.5px solid var(--line); border-radius:999px; padding: 9px 14px; outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.chatbot-input-row input:focus{ border-color: var(--amethyst); box-shadow: 0 0 0 3px rgba(122,75,176,0.14); }
.chatbot-input-row button{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
  background: linear-gradient(135deg, var(--hope-gold), var(--hope-gold-d)); color: var(--charcoal);
  display:flex; align-items:center; justify-content:center;
}
.chatbot-input-row button svg{ width:16px; height:16px; }
.chatbot-input-row button:focus-visible{ outline: 3px solid var(--amethyst); outline-offset:2px; }

@media (max-width: 480px){
  .chatbot-launcher{ left:16px; bottom:16px; width:52px; height:52px; }
  .chatbot-panel{ left:12px; bottom:78px; }
}
@media (prefers-reduced-motion: reduce){
  .chatbot-panel{ transition:none; }
}


@media (max-width: 560px){
  .back-to-top{ right:16px; bottom:78px; width:44px; height:44px; }
}

/* ---------- 7. ACCESSIBILITY UTILITIES ---------- */
/* Visually hides content while keeping it available to screen readers —
   used for the copy-to-clipboard live-region announcements. */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background: var(--hope-gold); color: var(--charcoal); font-weight:800; font-size:0.8125rem;
  padding:10px 18px; border-radius:10px; text-decoration:none;
  transition: top .18s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Downloads & Documents (dynamic) ---------- */
.downloads-section{ background: var(--paper); padding: 84px 0 20px; }
.downloads-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.download-card{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px 18px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.download-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(122,75,176,0.13); border-color: rgba(122,75,176,0.35); }
.download-icon{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background: linear-gradient(135deg, var(--amethyst), var(--iris));
  display:flex; align-items:center; justify-content:center;
}
.download-icon svg{ width:20px; height:20px; }
.download-text{ flex:1; min-width:0; }
.download-title{ font-size:0.875rem; font-weight:700; color: var(--charcoal); }
.download-desc{ font-size:0.7812rem; color: var(--ink-muted); margin-top:2px; }
.download-meta{ font-size:0.6875rem; font-weight:700; color: var(--amethyst); margin-top:4px; letter-spacing:.03em; }
.download-arrow{ width:18px; height:18px; flex-shrink:0; color: var(--ink-muted); }
.download-card:hover .download-arrow{ color: var(--amethyst); }

@media (max-width: 700px){
  .downloads-grid{ grid-template-columns: 1fr; }
}

/* ---------- Epilepsy education accordion ---------- */
.epilepsy-education{ background: var(--paper-2); padding: 84px 0; }
.faq-section{ background: var(--paper); padding: 84px 0; }

/* ---------- Epilepsy facts at a glance (infographic-style stat cards) ---------- */
.fact-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
  max-width: 900px; margin: 40px auto 0;
}
.fact-card{
  background: var(--paper); border: 1.5px solid var(--line); border-radius:16px;
  padding: 24px 16px; text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fact-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(122,75,176,0.12); border-color: rgba(122,75,176,0.35); }
.fact-number{
  font-family: var(--font-display); font-weight:700; font-size:1.9rem;
  color: var(--amethyst); margin:0 0 6px; letter-spacing:-0.01em;
}
.fact-label{ font-size:0.78rem; color: var(--ink-muted); line-height:1.5; margin:0; font-weight:600; }

@media (max-width: 700px){
  .fact-grid{ grid-template-columns: repeat(2, 1fr); }
}

.accordion-group{ max-width: 800px; margin: 44px auto 0; display:flex; flex-direction:column; gap:14px; }

.acc-item{
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px;
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.acc-item[open]{ border-color: rgba(122,75,176,0.35); box-shadow: 0 14px 32px rgba(122,75,176,0.10); }

.acc-item summary{
  list-style: none; cursor: pointer; padding: 20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family: var(--font-display); font-weight:600; font-size: 1.08rem; color: var(--charcoal);
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary:focus-visible{ outline: 3px solid var(--amethyst); outline-offset:-3px; border-radius:12px; }
.acc-item summary:hover{ color: var(--amethyst); }

.acc-item .chev{
  width:20px; height:20px; flex-shrink:0; color: var(--amethyst);
  transition: transform .25s ease;
}
.acc-item[open] .chev{ transform: rotate(180deg); }

.acc-body{
  padding: 0 24px 26px; font-size: 0.9062rem; line-height: 1.75; color: var(--ink-body);
}
.acc-body p{ margin: 0 0 14px; }
.acc-body p:last-child{ margin-bottom: 0; }
.acc-body ul, .acc-body ol{ margin: 0 0 16px; padding-left: 22px; }
.acc-body li{ margin-bottom: 8px; }
.acc-body a{ color: var(--amethyst); font-weight:700; }
.acc-body a:hover{ color: var(--hope-gold-text); }

/* ---------- Scroll-reveal animation ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.7,.2,1), transform .7s cubic-bezier(.22,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* ---------- Sticky header scroll state ---------- */
.site-header{ transition: box-shadow .25s ease, background .25s ease; }
.site-header.scrolled{
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

/* ---------- Reading progress bar (blog posts) ---------- */
.reading-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--hope-gold), var(--amethyst));
  z-index: 60; pointer-events: none;
  transition: width .12s linear;
}

/* ---------- FAQ Chatbot Widget ---------- */
.chatbot-toggle{
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--amethyst), var(--iris));
  color: #fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(122,75,176,0.38);
  transition: transform .18s ease, box-shadow .18s ease;
}
.chatbot-toggle:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px rgba(122,75,176,0.46); }
.chatbot-toggle svg{ width:26px; height:26px; }
.chatbot-toggle .chatbot-close-icon{ display:none; }
.chatbot-toggle[aria-expanded="true"] .chatbot-chat-icon{ display:none; }
.chatbot-toggle[aria-expanded="true"] .chatbot-close-icon{ display:block; }

.chatbot-panel{
  position: fixed; right: 24px; bottom: 92px; z-index: 69;
  width: min(360px, calc(100vw - 48px)); max-height: min(520px, calc(100vh - 140px));
  background: var(--paper); border-radius: 20px; border: 1.5px solid var(--line);
  box-shadow: 0 24px 56px rgba(27,16,36,0.28);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.chatbot-panel.is-open{ opacity: 1; transform: none; pointer-events: auto; }

.chatbot-header{
  background: linear-gradient(160deg, var(--ink-plum), var(--plum-2));
  padding: 16px 18px; display:flex; align-items:center; gap:10px;
  color: var(--mist); flex-shrink:0;
}
.chatbot-header img{ width:28px; height:28px; border-radius:50%; }
.chatbot-header .title{ font-family: var(--font-display); font-weight:600; font-size:0.95rem; }
.chatbot-header .subtitle{ font-size:0.7rem; color: var(--mist-dim); }

.chatbot-messages{
  flex: 1; overflow-y: auto; padding: 16px; display:flex; flex-direction:column; gap:10px;
}
.chatbot-msg{ max-width: 85%; font-size: 0.83rem; line-height:1.55; padding: 10px 14px; border-radius:14px; }
.chatbot-msg.bot{ background: var(--paper-2); color: var(--ink-body); align-self:flex-start; border-bottom-left-radius:4px; }
.chatbot-msg.user{ background: var(--amethyst); color: #fff; align-self:flex-end; border-bottom-right-radius:4px; }

.chatbot-quick-replies{ display:flex; flex-direction:column; gap:6px; align-self:flex-start; max-width:100%; }
.chatbot-quick-replies button{
  font-family: var(--font-body); font-size: 0.78rem; text-align:left; font-weight:600;
  background: var(--paper); color: var(--amethyst); border: 1.5px solid rgba(122,75,176,0.3);
  border-radius:12px; padding: 8px 12px; cursor:pointer; transition: background .15s ease, border-color .15s ease;
}
.chatbot-quick-replies button:hover{ background: var(--paper-2); border-color: var(--amethyst); }

.chatbot-input-row{
  display:flex; gap:8px; padding: 12px; border-top: 1.5px solid var(--line); flex-shrink:0;
}
.chatbot-input-row input{
  flex:1; font-family: var(--font-body); font-size: 0.83rem; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 9px 14px; outline:none; color: var(--ink-body);
}
.chatbot-input-row input:focus{ border-color: var(--amethyst); box-shadow: 0 0 0 3px rgba(122,75,176,0.14); }
.chatbot-input-row button{
  width: 38px; height: 38px; border-radius: 50%; border:none; flex-shrink:0; cursor:pointer;
  background: linear-gradient(135deg, var(--hope-gold), var(--hope-gold-d)); color: var(--charcoal);
  display:flex; align-items:center; justify-content:center;
}
.chatbot-input-row button svg{ width:16px; height:16px; }

@media (max-width: 480px){
  .chatbot-panel{ right:12px; bottom:82px; }
  .chatbot-toggle{ right:16px; bottom:16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ============================================================
   PAGE-SPECIFIC: index
   ============================================================ */

.hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 96px 24px 88px;
    background:
      radial-gradient(ellipse 900px 620px at 50% 8%, rgba(176,142,221,0.30), transparent 60%),
      linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 52%, #2c1a3f 100%);
    isolation: isolate;
  }

/* ambient grain to keep the flat gradient from feeling like a template default */
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity:0.5;
    pointer-events:none;
    z-index:0;
  }

/* ---- signature element: brainwave line resolving into the ribbon-loop ---- */
  .signature-wrap{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:0;
    pointer-events:none;
  }

.signature{
    width: min(1100px, 150vw);
    height:auto;
    opacity:0.5;
  }

.signature path{
    fill:none;
    stroke: var(--iris);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
    animation: draw-in 3.2s cubic-bezier(.22,.7,.2,1) 0.2s forwards;
  }

.signature circle{
    fill: var(--hope-gold);
    opacity:0;
    animation: fade-in-dot 1s ease-out 2.9s forwards;
  }

@keyframes draw-in{ to{ stroke-dashoffset:0; } }

@keyframes fade-in-dot{ to{ opacity:0.9; } }

.content{
    position:relative;
    z-index:2;
    max-width: 760px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

body.page-index h1{
    font-family: var(--font-display);
    font-weight:600;
    font-optical-sizing: auto;
    font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--mist);
    margin: 0 0 24px;
    opacity:0;
    animation: rise 0.9s ease-out 0.45s forwards;
  }

h1 em{
    font-style: italic;
    font-weight:500;
    color: var(--hope-gold);
  }

.sub{
    font-family: var(--font-body);
    font-weight:500;
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    line-height:1.6;
    color: var(--mist-dim);
    max-width: 520px;
    margin: 0 0 40px;
    opacity:0;
    animation: rise 0.9s ease-out 0.6s forwards;
  }

.cta-row{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
    opacity:0;
    animation: rise 0.9s ease-out 0.75s forwards;
  }

@keyframes rise{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }

@media (prefers-reduced-motion: reduce){
    .mark, .eyebrow, h1, .sub, .cta-row{ animation: none; opacity:1; }
    .signature path{ animation:none; stroke-dashoffset:0; }
    .signature circle{ animation:none; opacity:0.9; }
    .btn-primary:hover, .btn-secondary:hover{ transform:none; }
  }

@media (max-width: 560px){
    .hero{ padding: 76px 20px 64px; }
    .cta-row{ flex-direction:column; width:100%; }
    .btn{ width:100%; padding:16px 28px; }
    .mark{ width:52px; }
  }

/* ============================================================
   PAGE-SPECIFIC: about
   ============================================================ */

/* ---------- INTRO BAND ---------- */
  .intro{
    position:relative;
    overflow:hidden;
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
    padding: 88px 24px 96px;
    text-align:center;
    isolation:isolate;
  }

/* ---------- SECTION SCAFFOLDING ---------- */
  section{ padding: 88px 0; }

/* divider echoing the hero's line-to-ribbon motif, used quietly between sections */
  .divider{ display:flex; justify-content:center; padding: 0 0 4px; }

/* ---------- OUR STORY ---------- */
  .story{ background: var(--paper); }

.story-grid{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items:center;
  }

.story p{ font-size: 1.04rem; line-height:1.75; color: var(--ink-body); margin: 0 0 18px; }

.story p:last-child{ margin-bottom:0; }

/* ---------- Story timeline ---------- */
.story-timeline{ position:relative; padding-left:36px; }
.story-timeline::before{
  content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(180deg, var(--iris), var(--amethyst) 60%, var(--hope-gold));
}
.timeline-item{ position:relative; margin-bottom:36px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-marker{
  position:absolute; left:-36px; top:4px; width:20px; height:20px; border-radius:50%;
  background: var(--paper); border:3px solid var(--amethyst); z-index:1;
}
.timeline-marker.gold{ border-color: var(--hope-gold-d); background: var(--hope-gold); }
.timeline-content h3{
  font-family: var(--font-display); font-weight:600; font-size:1.15rem; color: var(--charcoal);
  margin:0 0 8px; letter-spacing:-0.005em;
}
.timeline-content p{ font-size:1.02rem; line-height:1.7; color: var(--ink-body); margin:0; }

@media (max-width: 560px){
  .story-timeline{ padding-left:28px; }
  .story-timeline::before{ left:7px; }
  .timeline-marker{ left:-28px; width:16px; height:16px; }
}

.photo-frame{
    position:relative;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    background: linear-gradient(155deg, var(--paper-2), #e7d9f4);
    border: 1.5px dashed rgba(122,75,176,0.35);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; text-align:center; padding: 32px;
    overflow:hidden;
  }

.photo-frame::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse 260px 200px at 50% 30%, rgba(122,75,176,0.14), transparent 70%);
  }

.photo-frame .ribbon-wm{ width:64px; height:auto; opacity:0.5; position:relative; }

/* ---------- OUR VISION + OUR MISSION (highlighted statement cards) ---------- */
.vm-section{
  background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 100%);
  padding: 84px 24px; position:relative; overflow:hidden; isolation:isolate;
}
.vm-section::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 760px 420px at 50% 0%, rgba(240,184,75,0.10), transparent 65%);
}
.vm-section .section-head{ position:relative; z-index:1; }
.vm-section .section-head h2{ color: var(--mist); }
.vm-section .section-head .kicker{ color: var(--hope-gold); }

.vm-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1fr 1fr; gap:26px;
  max-width: 900px; margin: 0 auto;
}
.vm-card{
  background: linear-gradient(155deg, var(--hope-gold), var(--hope-gold-d));
  border-radius: 20px; padding: 34px 30px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.22);
}
.vm-icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:18px;
  background: rgba(27,16,36,0.12);
  display:flex; align-items:center; justify-content:center;
}
.vm-icon svg{ width:22px; height:22px; }
.vm-label{
  font-size:0.7188rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--charcoal); opacity:0.72; margin: 0 0 12px;
}
.vm-statement{
  font-family: var(--font-display); font-weight:600; font-style:italic;
  font-size: clamp(1.2rem, 2vw, 1.45rem); line-height:1.4; color: var(--charcoal);
  margin: 0;
}
.vm-substatement{
  font-size:0.8125rem; font-weight:600; color: var(--charcoal); opacity:0.75;
  margin: 10px 0 0;
}

@media (max-width: 700px){
  .vm-grid{ grid-template-columns: 1fr; }
}

/* ---------- GALLERY PAGE ---------- */
.gallery-section{ background: var(--paper); padding: 84px 0 20px; }

.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.gallery-item{
  display:block; border-radius:16px; overflow:hidden; border: 1.5px solid var(--line);
  aspect-ratio: 1 / 1; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.gallery-item:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(122,75,176,0.18); border-color: rgba(122,75,176,0.4); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item:focus-visible{ outline: 3px solid var(--amethyst); outline-offset:3px; }

.video-section{ background: var(--paper); padding: 20px 0 84px; }
.video-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px;
}
.video-card{
  min-width:0; border:1.5px solid var(--line); border-radius:20px; overflow:hidden;
  background:var(--paper); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.video-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(122,75,176,0.18); border-color:rgba(122,75,176,0.4); }
.video-thumb{
  position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden;
  background:linear-gradient(135deg, var(--ink-plum), var(--plum-2));
}
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-thumb img.is-fallback{ object-fit:cover; }
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  padding-left:3px; background:rgba(122,75,176,.92); color:#fff; font-size:22px;
  box-shadow:0 8px 24px rgba(27,16,36,.28); pointer-events:none;
}
.video-thumb:focus-visible{ outline: 3px solid var(--amethyst); outline-offset:-3px; }
.video-caption{ padding:18px 20px 20px; }
.video-title{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--charcoal); margin:0; }

@media (max-width: 900px){
  .video-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .video-grid{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns:1fr; gap:14px; }
}

/* ---------- OUR VALUES ---------- */
  .values{ background: var(--paper); }

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

.value-card{
    background: var(--paper); border: 1.5px solid #E7DCF2; border-radius: 16px;
    padding: 30px 24px; text-align:left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

.value-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(122,75,176,0.14);
    border-color: rgba(122,75,176,0.4);
  }

.value-icon{
    width:40px; height:40px; border-radius:10px;
    background: linear-gradient(135deg, var(--amethyst), var(--iris));
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }

.value-icon svg{ width:20px; height:20px; }

.value-card h3{
    font-family: var(--font-display); font-weight:600; font-size:1.15rem;
    color: var(--charcoal); margin:0 0 8px; letter-spacing:-0.005em;
  }

.value-card p{ font-size:0.9062rem; line-height:1.6; color: var(--ink-muted); margin:0; }

@media (max-width: 860px){
    .story-grid{ grid-template-columns: 1fr; }
    .photo-frame{ aspect-ratio: 16/9; order:-1; }
    .values-grid{ grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 520px){
    section{ padding: 64px 0; }
    .intro{ padding: 72px 20px 80px; }
    .values-grid{ grid-template-columns: 1fr; }
  }

/* ============================================================
   PAGE-SPECIFIC: initiatives
   ============================================================ */

/* ---------- INTRO BAND ---------- */
  .intro{
    position:relative; overflow:hidden; isolation:isolate;
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
    padding: 88px 24px 92px; text-align:center;
  }

.intro p.lede{
    font-size: 1rem; color: var(--mist-dim); max-width:520px; margin:0 auto; line-height:1.7;
  }

/* ---------- INITIATIVES GRID ---------- */
  .initiatives{ background: var(--paper); padding: 84px 0 96px; }

.grid{
    display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
  }

/* ---------- CLOSING VISUAL GUIDANCE STRIP ---------- */
  .visual-strip{
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 100%);
    padding: 64px 24px; text-align:center; position:relative; overflow:hidden; isolation:isolate;
  }

@media (max-width: 860px){
    .grid{ grid-template-columns: 1fr; }
  }

@media (max-width: 520px){
    .intro{ padding: 72px 20px 76px; }
    .initiatives{ padding: 64px 0 76px; }
    .card{ padding: 28px 24px 26px; }
    .card-actions{ flex-direction:column; }
    .btn{ width:100%; }
  }

/* ============================================================
   PAGE-SPECIFIC: resources
   ============================================================ */

/* ---------- INTRO BAND ---------- */
  .intro{
    position:relative; overflow:hidden; isolation:isolate;
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
    padding: 88px 24px 92px; text-align:center;
  }

/* ---------- RESOURCE CATEGORIES ---------- */
  .resources{ background: var(--paper); padding: 84px 0 96px; }

.grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.card-top{ display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }

.res-list{ list-style:none; margin:0 0 14px; padding:0; border-top: 1px solid #EFE5F7; }

.res-list li{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding: 13px 0; border-bottom: 1px solid #EFE5F7;
  }

.res-list .res-name{ font-size:0.8438rem; font-weight:600; color: var(--ink-body); line-height:1.4; }

.res-list .res-type{ display:block; font-size:0.7188rem; font-weight:500; color: var(--ink-muted); margin-top:2px; }

.res-link{
    flex-shrink:0; font-size:0.7812rem; font-weight:700; color: var(--amethyst);
    text-decoration:none; display:inline-flex; align-items:center; gap:4px;
    white-space:nowrap;
  }

.res-link:hover{ color: var(--hope-gold-text); text-decoration:underline; }

.res-link svg{ width:12px; height:12px; }

/* ---------- ACCESSIBILITY / ENCOURAGEMENT STRIP ---------- */
  .visual-strip{
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 100%);
    padding: 64px 24px; text-align:center; position:relative; overflow:hidden; isolation:isolate;
  }

@media (max-width: 860px){
    .grid{ grid-template-columns: 1fr; }
  }

@media (max-width: 520px){
    .intro{ padding: 72px 20px 76px; }
    .resources{ padding: 64px 0 76px; }
    .card{ padding: 28px 22px 24px; }
    .res-list li{ flex-direction:column; align-items:flex-start; gap:6px; }
  }

/* ============================================================
   PAGE-SPECIFIC: blog
   ============================================================ */

/* ---------- INTRO BAND ---------- */
  .intro{
    position:relative; overflow:hidden; isolation:isolate;
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
    padding: 80px 24px 84px; text-align:center;
  }

/* ---------- FEATURED POST ---------- */
  .featured{ background: var(--paper); padding: 64px 0 20px; }

.featured-card{
    display:grid; grid-template-columns: 1.15fr 1fr; gap:0;
    border: 1.5px solid var(--line); border-radius: 22px; overflow:hidden;
    box-shadow: 0 24px 50px rgba(122,75,176,0.12);
  }

.featured-media{
    position:relative;
    min-height: 340px;
    background:
      radial-gradient(ellipse 260px 220px at 30% 30%, rgba(240,184,75,0.20), transparent 65%),
      linear-gradient(150deg, var(--amethyst), #4E2C82 65%, var(--ink-plum));
    display:flex; align-items:center; justify-content:center;
  }

.featured-media .ribbon-wm{ width:88px; height:auto; opacity:0.55; }

.featured-body{ padding: 40px 40px 34px; display:flex; flex-direction:column; }

.featured-body h2{
    font-family: var(--font-display); font-weight:600; font-optical-sizing:auto;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height:1.25; color: var(--charcoal);
    margin:0 0 14px; letter-spacing:-0.01em;
  }

.featured-body p.excerpt{ font-size:0.9062rem; line-height:1.75; color: var(--ink-body); margin:0 0 22px; }

.post-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; flex-wrap:wrap; }

.btn-text{
    font-weight:700; font-size:0.8438rem; color: var(--amethyst); text-decoration:none;
    display:inline-flex; align-items:center; gap:5px;
  }

.btn-text:hover{ color: var(--hope-gold-text); }

.share-btn:hover{ border-color: var(--amethyst); color: var(--hope-gold-text); transform: translateY(-2px); }

/* ---------- MAIN LAYOUT: GRID + SIDEBAR ---------- */
  .content-area{ background: var(--paper); padding: 56px 0 90px; }

body.page-blog .layout{ display:grid; grid-template-columns: 2.1fr 0.9fr; gap: 48px; align-items:start; }

.section-label{
    font-family: var(--font-display); font-weight:600; font-size:1.5rem; color: var(--charcoal);
    margin: 0 0 28px; letter-spacing:-0.01em;
  }

.posts-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.post-card{
    border: 1.5px solid var(--line); border-radius:18px; overflow:hidden;
    display:flex; flex-direction:column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

.post-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(122,75,176,0.13); border-color: rgba(122,75,176,0.35); }

.post-thumb{
    height:150px; position:relative;
    display:flex; align-items:center; justify-content:center;
  }

.post-thumb.c1{ background: linear-gradient(150deg, #8C5BC7, #4E2C82); }

.post-thumb svg{ width:34px; height:34px; opacity:0.5; }

.post-content{ padding: 22px 22px 20px; display:flex; flex-direction:column; flex:1; }

.post-content .tag{ margin-bottom:12px; }

.post-content h3{
    font-family: var(--font-display); font-weight:600; font-size:1.12rem; line-height:1.32;
    color: var(--charcoal); margin:0 0 10px; letter-spacing:-0.005em;
  }

.post-content p.excerpt{ font-size:0.8438rem; line-height:1.65; color: var(--ink-body); margin:0 0 18px; }

.post-byline{ display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--line); margin-top:auto; margin-bottom:14px; }

.post-byline .avatar{ width:30px; height:30px; font-size:0.7188rem; }

.post-byline .name{ font-size:0.75rem; font-weight:700; color: var(--charcoal); }

.post-byline .meta{ font-size:0.6875rem; color: var(--ink-muted); }

.post-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* ---------- SIDEBAR ---------- */
  .sidebar{ display:flex; flex-direction:column; gap:28px; position:sticky; top:24px; }

.sidebar-box{ border: 1.5px solid var(--line); border-radius:18px; padding:24px; }

.sidebar-box h2{
    font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--charcoal);
    margin:0 0 16px; letter-spacing:-0.005em;
  }

.search-form{ display:flex; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:999px; padding:10px 14px; transition: border-color .18s ease, box-shadow .18s ease; }
.search-form:focus-within{ border-color: var(--amethyst); box-shadow: 0 0 0 3px rgba(122,75,176,0.14); }

.search-form svg{ width:16px; height:16px; color: var(--ink-muted); flex-shrink:0; }

.search-form input{
    border:none; outline:none; background:transparent; font-family:var(--font-body);
    font-size:0.8438rem; color: var(--ink-body); width:100%;
  }

.search-form input::placeholder{ color: var(--ink-muted); }

.cat-list{ list-style:none; margin:0; padding:0; }

.cat-list li{ margin-bottom:4px; }

.cat-list a{
    display:flex; align-items:center; justify-content:space-between;
    text-decoration:none; font-size:0.8438rem; font-weight:600; color: var(--ink-body);
    padding: 10px 12px; border-radius:10px; transition: background .18s ease, color .18s ease;
  }

.cat-list a:hover{ background: var(--paper-2); color: var(--amethyst); }

.cat-list .count{ font-size:0.7188rem; font-weight:700; color: var(--ink-muted); background: var(--paper-2); border-radius:999px; padding:2px 9px; }

.cat-list a:hover .count{ background:#fff; color: var(--amethyst); }

/* ---------- PAGINATION ---------- */
  .pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px; grid-column: 1 / -1; }

.page-btn{
    min-width:38px; height:38px; padding:0 10px; border-radius:10px; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:0.8438rem; font-weight:700;
    color: var(--ink-body); text-decoration:none; transition: border-color .18s ease, background .18s ease, color .18s ease;
  }

.page-btn:hover{ border-color: var(--amethyst); color: var(--amethyst); }

.page-btn.active{ background: var(--amethyst); border-color: var(--amethyst); color:#fff; }

@media (max-width: 980px){
    .layout{ grid-template-columns: 1fr; }
    .sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
    .sidebar-box{ flex:1; min-width:240px; }
  }

@media (max-width: 760px){
    .featured-card{ grid-template-columns: 1fr; }
    .featured-media{ min-height:220px; }
    .posts-grid{ grid-template-columns: 1fr; }
  }

@media (max-width: 520px){
    .intro{ padding: 64px 20px 68px; }
    .featured-body{ padding: 28px 24px 26px; }
    .post-footer{ flex-direction:column; align-items:flex-start; }
    .sidebar{ flex-direction:column; }
  }

/* ============================================================
   PAGE-SPECIFIC: contact
   ============================================================ */

/* ---------- INTRO BAND ---------- */
  .intro{
    position:relative; overflow:hidden; isolation:isolate;
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
    padding: 80px 24px 84px; text-align:center;
  }

/* ---------- MAIN: FORM + SIDEBAR ---------- */
  .contact-area{ background: var(--paper); padding: 72px 0 90px; }

body.page-contact .layout{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items:start; }

/* form panel with subtle ribbon watermark background */
  .form-panel{
    position:relative; overflow:hidden;
    border: 1.5px solid var(--line); border-radius: 22px;
    padding: 40px 40px 36px;
    background: var(--paper);
  }

.form-panel::before{
    content:"";
    position:absolute; top:-40px; right:-40px; width:260px; height:260px;
    background: radial-gradient(ellipse, rgba(122,75,176,0.09), transparent 70%);
    z-index:0; pointer-events:none;
  }

.form-panel .wm{
    position:absolute; bottom:-18px; right:-14px; width:150px; height:auto;
    opacity:0.05; z-index:0; pointer-events:none;
  }

.form-panel h2{
    position:relative; z-index:1;
    font-family: var(--font-display); font-weight:600; font-size: 1.5rem;
    color: var(--charcoal); margin:0 0 8px; letter-spacing:-0.005em;
  }

.form-panel p.sub{
    position:relative; z-index:1;
    font-size:0.8438rem; color: var(--ink-muted); margin:0 0 30px; line-height:1.6;
  }

body.page-contact form{ position:relative; z-index:1; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:20px; }

.field{ display:flex; flex-direction:column; }

.field.full{ grid-column: 1 / -1; }

body.page-contact .field label{
    font-size:0.7812rem; font-weight:700; color: var(--charcoal); margin-bottom:8px; letter-spacing:.01em;
  }

.field input, .field textarea{
    font-family: var(--font-body); font-size:0.875rem; color: var(--ink-body);
    border: 1.5px solid var(--line); border-radius:12px; padding:13px 15px;
    background: var(--paper); outline:none; transition: border-color .18s ease, box-shadow .18s ease;
    resize: vertical;
  }

.field input::placeholder, .field textarea::placeholder{ color:#B7A6CC; }

.field input:focus, .field textarea:focus{
    border-color: var(--amethyst); box-shadow: 0 0 0 3px rgba(122,75,176,0.12);
  }

.field textarea{ min-height:130px; }

.form-note{
    position:relative; z-index:1;
    font-size:0.75rem; color: var(--ink-muted); margin-top:16px; line-height:1.6;
  }

/* ---------- SIDEBAR: ALT CONTACT ---------- */
  .sidebar{ display:flex; flex-direction:column; gap:20px; }

.info-card{
    border: 1.5px solid var(--line); border-radius:18px; padding:26px 24px;
    background: var(--paper);
  }

.info-card h3{
    font-family: var(--font-display); font-weight:600; font-size:1.1rem; color: var(--charcoal);
    margin:0 0 18px; letter-spacing:-0.005em;
  }

.info-row{ display:flex; align-items:flex-start; gap:13px; margin-bottom:18px; }

.info-row:last-child{ margin-bottom:0; }

.info-icon{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background: linear-gradient(135deg, var(--amethyst), var(--iris));
    display:flex; align-items:center; justify-content:center;
  }

.info-icon svg{ width:18px; height:18px; }

.info-text .label{ font-size:0.7188rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-muted); margin-bottom:3px; }

.copy-btn{
  font-family: var(--font-body); font-size:0.7188rem; font-weight:700; color: var(--amethyst);
  background: var(--paper-2); border: 1.5px solid transparent; border-radius:999px;
  padding: 4px 12px; cursor:pointer; transition: background .18s ease, color .18s ease;
}
.copy-btn:hover{ background: rgba(122,75,176,0.12); }
.copy-btn.copied{ background: #E7F5E9; color: #1E5B24; }

.info-text a, .info-text span.value{ font-size:0.875rem; font-weight:600; color: var(--charcoal); text-decoration:none; }

.info-text a:hover{ color: var(--amethyst); }

.social-card h3{ margin-bottom:16px; }

.social-row{ display:flex; gap:10px; flex-wrap:wrap; }

.social-btn{
    width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; color: var(--amethyst);
    text-decoration:none; transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
  }

.social-btn:hover{ border-color: var(--amethyst); background: var(--paper-2); color: var(--hope-gold-text); transform: translateY(-2px); }

.social-btn svg{ width:18px; height:18px; }

.access-note{
    display:flex; gap:12px; align-items:flex-start;
    border: 1.5px dashed rgba(122,75,176,0.35); border-radius:16px;
    padding:18px 20px; background: var(--paper-2);
  }

.access-note svg{ width:22px; height:22px; flex-shrink:0; color: var(--amethyst); margin-top:1px; }

.access-note p{ font-size:0.7812rem; line-height:1.6; color: var(--ink-body); margin:0; }

/* ---------- CTA STRIP ---------- */
  .cta-strip{
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 100%);
    padding: 60px 24px; text-align:center; position:relative; overflow:hidden; isolation:isolate;
  }

.cta-strip::before{
    content:""; position:absolute; inset:0; z-index:0;
    background: radial-gradient(ellipse 700px 380px at 50% 100%, rgba(240,184,75,0.10), transparent 65%);
  }

.cta-strip-inner{ position:relative; z-index:1; max-width:520px; margin:0 auto; }

.cta-strip h2{
    font-family: var(--font-display); font-weight:600; font-optical-sizing:auto;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: var(--mist); margin:0 0 24px; letter-spacing:-0.01em;
  }

.cta-strip h2 em{ font-style:italic; font-weight:500; color: var(--hope-gold); }

@media (max-width: 860px){
    .layout{ grid-template-columns: 1fr; }
  }

@media (max-width: 560px){
    .intro{ padding: 64px 20px 68px; }
    .form-panel{ padding: 30px 24px 28px; }
    .form-row{ grid-template-columns: 1fr; gap:18px; }
    .btn-primary{ width:100%; }
  }

/* ============================================================
   PAGE-SPECIFIC: donate
   ============================================================ */

/* ---------- INTRO / HERO ---------- */
  .intro{
    position:relative; overflow:hidden; isolation:isolate;
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
    padding: 84px 24px 64px; text-align:center;
  }

.impact-caption{
    position:relative; z-index:1; max-width:560px; margin:0 auto;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:0.7812rem; font-style:italic; color: var(--mist-dim);
  }

.impact-caption svg{ width:16px; height:16px; flex-shrink:0; color: var(--hope-gold); }

/* ---------- TIERS ---------- */
  .tiers{ background: var(--paper); padding: 76px 0 20px; }

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

.tier-card{
    position:relative;
    border: 1.5px solid var(--line); border-radius:20px;
    padding: 30px 24px 26px;
    display:flex; flex-direction:column;
    background: var(--paper);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

.tier-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(122,75,176,0.14); border-color: rgba(122,75,176,0.4); }

.tier-card.featured{
    border-color: var(--amethyst);
    box-shadow: 0 20px 44px rgba(122,75,176,0.18);
  }

.featured-badge{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background: linear-gradient(135deg, var(--hope-gold), var(--hope-gold-d));
    color: var(--charcoal); font-size:0.6562rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    padding:5px 14px; border-radius:999px; white-space:nowrap;
  }

.tier-icon{
    width:46px; height:46px; border-radius:13px; margin-bottom:16px;
    background: linear-gradient(135deg, var(--amethyst), var(--iris));
    display:flex; align-items:center; justify-content:center;
  }

.tier-icon svg{ width:22px; height:22px; }

.tier-card h3{
    font-family: var(--font-display); font-weight:600; font-size:1.2rem; color: var(--charcoal);
    margin:0 0 4px; letter-spacing:-0.005em;
  }

.tier-amount{ font-size:1.7rem; font-weight:800; color: var(--amethyst); margin:0 0 12px; font-family: var(--font-body); }

.tier-amount span{ font-size:0.9rem; font-weight:600; color: var(--ink-muted); }

.tier-card p.desc{ font-size:0.8438rem; line-height:1.65; color: var(--ink-body); margin:0 0 22px; flex-grow:1; }

.custom-input{
    display:flex; align-items:center; border: 1.5px solid var(--line); border-radius:12px;
    padding: 10px 14px; margin-bottom:16px; gap:6px;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
.custom-input:focus-within{ border-color: var(--amethyst); box-shadow: 0 0 0 3px rgba(122,75,176,0.14); }

.custom-input span{ font-weight:700; color: var(--ink-muted); font-size:0.875rem; }

.custom-input input{
    border:none; outline:none; font-family:var(--font-body); font-size:0.875rem; width:100%;
    color: var(--ink-body); background:transparent;
  }

.custom-input input::placeholder{ color:#B7A6CC; }

/* ---------- SECURE PAYMENT STRIP ---------- */
  .secure-strip{
    display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
    padding: 40px 24px 84px; text-align:center;
  }

.secure-note{ display:flex; align-items:center; gap:8px; font-size:0.7812rem; color: var(--ink-muted); font-weight:600; }

.secure-note svg{ width:16px; height:16px; color: var(--amethyst); }

/* ---------- TRANSPARENCY ---------- */
  .transparency{
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 100%);
    padding: 76px 24px; position:relative; overflow:hidden; isolation:isolate;
  }

.transparency::before{
    content:""; position:absolute; inset:0; z-index:0;
    background: radial-gradient(ellipse 760px 420px at 50% 0%, rgba(240,184,75,0.10), transparent 65%);
  }

.transparency-inner{ position:relative; z-index:1; max-width:1080px; margin:0 auto; }

.transparency .section-head .kicker{ color: var(--hope-gold); }

.transparency .section-head h2{ color: var(--mist); }

.transparency .section-head p.intro-line{ font-size:0.875rem; color: var(--mist-dim); margin: 14px 0 0; line-height:1.7; }

.breakdown{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }

.bd-card{
    background: rgba(247,243,252,0.05); border: 1.5px solid rgba(217,203,236,0.22);
    border-radius:18px; padding: 28px 24px; text-align:center;
  }

.bd-icon{
    width:48px; height:48px; border-radius:50%; margin:0 auto 16px;
    background: rgba(240,184,75,0.14); border: 1.5px solid rgba(240,184,75,0.4);
    display:flex; align-items:center; justify-content:center;
  }

.bd-icon svg{ width:22px; height:22px; color: var(--hope-gold); }

.bd-pct{ font-family: var(--font-display); font-weight:700; font-size:2rem; color: var(--mist); margin:0 0 6px; }

.bd-card h3{ font-size:0.9062rem; font-weight:700; color: var(--mist); margin:0 0 8px; }

.bd-card p{ font-size:0.7812rem; line-height:1.6; color: var(--mist-dim); margin:0; }

.bd-footnote{
    text-align:center; font-size:0.7188rem; color: var(--mist-dim); opacity:0.75;
    margin-top: 28px; font-style:italic;
  }

@media (max-width: 980px){
    .tier-grid{ grid-template-columns: repeat(2, 1fr); }
    .breakdown{ grid-template-columns: 1fr; }
  }

@media (max-width: 560px){
    .intro{ padding: 68px 20px 56px; }
    .tiers{ padding: 60px 0 10px; }
    .tier-grid{ grid-template-columns: 1fr; }
    .secure-strip{ flex-direction:column; gap:16px; }
  }

/* ============================================================
   PAGE-SPECIFIC: newsletter
   ============================================================ */

/* ---------- SIGNUP HERO (dark, centered, minimal) ---------- */
  .signup-hero{
    position:relative; overflow:hidden; isolation:isolate;
    background: linear-gradient(160deg, var(--ink-plum) 0%, var(--plum-2) 55%, #2c1a3f 100%);
    padding: 92px 24px 76px;
    display:flex; align-items:center; justify-content:center;
  }

.signup-hero::before{
    content:""; position:absolute; inset:0; z-index:0;
    background: radial-gradient(ellipse 820px 560px at 50% 10%, rgba(176,142,221,0.30), transparent 62%);
  }

/* subtle scattered positivity marks: soft stars, low opacity, background only */
  .signup-hero .spark{
    position:absolute; z-index:0; opacity:0.35; color: var(--hope-gold);
  }

.signup-hero .spark svg{ width:100%; height:100%; }

.spark.s1{ width:16px; height:16px; top:18%; left:12%; }

.spark.s2{ width:11px; height:11px; top:64%; left:8%; opacity:0.22; }

.spark.s3{ width:14px; height:14px; top:24%; right:11%; }

.spark.s4{ width:9px;  height:9px;  top:70%; right:15%; opacity:0.22; }

.spark.s5{ width:12px; height:12px; top:46%; right:6%; opacity:0.18; }

.signup-card{
    position:relative; z-index:1; max-width: 460px; width:100%; text-align:center;
  }

body.page-newsletter h1{
    font-family: var(--font-display); font-weight:600; font-optical-sizing:auto;
    font-size: clamp(1.55rem, 3.4vw, 2rem); line-height:1.4; letter-spacing:-0.01em;
    color: var(--mist); margin:0 0 34px;
  }

body.page-newsletter form{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; text-align:left; }

body.page-newsletter .field label{ font-size:0.75rem; font-weight:700; color: var(--mist-dim); margin-bottom:7px; display:block; letter-spacing:.02em; }

.field input{
    width:100%; font-family: var(--font-body); font-size:0.9062rem; color: var(--charcoal);
    background: var(--mist); border: 1.5px solid transparent; border-radius:12px;
    padding: 14px 16px; outline:none; transition: box-shadow .18s ease, border-color .18s ease;
  }

.field input::placeholder{ color:#9A87B3; }

.field input:focus{ border-color: var(--amethyst); box-shadow: 0 0 0 3px rgba(122,75,176,0.18); }

.privacy-note{
    display:flex; align-items:flex-start; gap:7px; justify-content:center;
    font-size:0.7188rem; color: var(--mist-dim); opacity:0.85; line-height:1.6; margin-top: 6px;
  }

.privacy-note svg{ width:13px; height:13px; flex-shrink:0; margin-top:2px; color: var(--iris); }

/* ---------- BENEFITS ---------- */
  .benefits{ background: var(--paper); padding: 68px 24px 20px; }

.benefits-inner{ max-width: 880px; margin:0 auto; }

.benefits-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.benefit{ text-align:center; padding: 8px 12px; }

.benefit-icon{
    width:48px; height:48px; border-radius:50%; margin:0 auto 16px;
    background: linear-gradient(135deg, var(--amethyst), var(--iris));
    display:flex; align-items:center; justify-content:center;
  }

.benefit-icon svg{ width:22px; height:22px; }

.benefit p{ font-size:0.8438rem; line-height:1.6; color: var(--ink-body); margin:0; font-weight:500; }

/* ---------- TESTIMONIAL ---------- */
  .testimonial{ background: var(--paper); padding: 60px 24px 88px; }

.testimonial-rotator{ position:relative; }

.testimonial-card{
    max-width: 620px; margin:0 auto; text-align:center;
    background: var(--paper-2); border-radius:20px; padding: 40px 36px;
    position:relative;
    animation: testimonial-fade-in .5s ease;
  }
@keyframes testimonial-fade-in{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform:none; }
}

.testimonial-dots{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
.testimonial-dots button{
  position:relative; width:44px; height:44px; border-radius:50%; border:none; padding:0;
  background:transparent; cursor:pointer; transition:transform .2s ease;
}
.testimonial-dots button::before{
  content:""; position:absolute; width:9px; height:9px; left:50%; top:50%;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--line);
  transition:background .2s ease,transform .2s ease;
}
.testimonial-dots button[aria-selected="true"]::before{ background:var(--amethyst); transform:translate(-50%,-50%) scale(1.3); }
.testimonial-dots button:hover::before{ background:var(--iris); }
.testimonial-dots button:focus-visible{ outline: 3px solid var(--amethyst); outline-offset: 2px; }

.quote-mark{
    font-family: var(--font-display); font-size:3.2rem; line-height:1; color: var(--iris);
    opacity:0.6; margin-bottom:6px; display:block;
  }

.testimonial-card p.quote{
    font-family: var(--font-display); font-style:italic; font-weight:500;
    font-size: clamp(1.05rem, 2vw, 1.25rem); line-height:1.55; color: var(--charcoal);
    margin: 0 0 20px;
  }

.testimonial-author{ display:flex; align-items:center; justify-content:center; gap:12px; }

.t-avatar{
    width:38px; height:38px; border-radius:50%;
    background: linear-gradient(135deg, var(--amethyst), var(--iris));
    display:flex; align-items:center; justify-content:center; color:#fff;
    font-family: var(--font-display); font-weight:600; font-size:0.8125rem;
  }

.t-name{ font-size:0.8438rem; font-weight:700; color: var(--charcoal); text-align:left; }

.t-role{ font-size:0.7188rem; color: var(--ink-muted); text-align:left; }

@media (max-width: 700px){
    .benefits-grid{ grid-template-columns: 1fr; gap:28px; }
  }

@media (max-width: 520px){
    .signup-hero{ padding: 76px 20px 64px; }
    .testimonial-card{ padding: 32px 24px; }
  }

/* ============================================================
   PAGE-SPECIFIC: blog-post
   ============================================================ */

/* ---------- BREADCRUMB ---------- */
  .breadcrumb-bar{ background: var(--paper); padding: 28px 0 0; }

.breadcrumb{
    display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:700;
    color: var(--amethyst); text-decoration:none;
  }

.breadcrumb:hover{ color: var(--hope-gold-text); }

.breadcrumb svg{ width:14px; height:14px; }

/* ---------- POST HEADER ---------- */
  .post-header{ padding: 24px 0 0; text-align:left; }

.post-header h1{
    font-family: var(--font-display); font-weight:600; font-optical-sizing:auto;
    font-size: clamp(2rem, 4.4vw, 2.9rem); line-height:1.15; letter-spacing:-0.01em;
    color: var(--charcoal); margin:0 0 22px;
  }

/* ---------- FEATURED IMAGE ---------- */
  .featured-media{
    position:relative; overflow:hidden;
    border-radius: 20px; min-height: 320px; margin-bottom: 40px;
    background:
      radial-gradient(ellipse 300px 240px at 25% 25%, rgba(240,184,75,0.22), transparent 65%),
      linear-gradient(150deg, var(--amethyst), #4E2C82 65%, var(--ink-plum));
    display:flex; align-items:center; justify-content:center;
  }

.featured-media .ribbon-wm{ width:96px; height:auto; opacity:0.55; }

/* ---------- POST BODY ---------- */
  .post-body{ padding-bottom: 8px; }

.post-body p.lede{
    font-size: 1.15rem; line-height:1.7; color: var(--ink-body); font-weight:500;
    margin: 0 0 40px;
  }

.post-body h2{
    font-family: var(--font-display); font-weight:600; font-optical-sizing:auto;
    font-size: 1.55rem; color: var(--charcoal); margin: 44px 0 18px; letter-spacing:-0.005em;
    display:flex; align-items:center; gap:10px;
  }

.post-body h2 .num{
    font-size:0.75rem; font-weight:800; color:#fff; background: var(--amethyst);
    width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }

.post-body p{ font-size:0.9688rem; line-height:1.8; color: var(--ink-body); margin: 0 0 18px; }

.post-body ul{ margin: 0 0 22px; padding-left: 4px; list-style:none; }

.post-body ul li{
    position:relative; padding-left: 26px; font-size:0.9375rem; line-height:1.7;
    color: var(--ink-body); margin-bottom:12px;
  }

.post-body ul li::before{
    content:""; position:absolute; left:0; top:8px; width:9px; height:9px;
    border-radius:50%; background: linear-gradient(135deg, var(--hope-gold), var(--amethyst));
  }

.pull-quote{
    border-left: 3px solid var(--iris); padding: 4px 0 4px 22px; margin: 32px 0;
    font-family: var(--font-display); font-style:italic; font-weight:500;
    font-size: 1.2rem; line-height:1.55; color: var(--charcoal);
  }

/* ---------- SHARE ROW ---------- */
  .share-block{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
    padding: 20px 0; margin-bottom: 44px;
  }

.share-btn:hover{ border-color: var(--amethyst); color: var(--hope-gold-text); transform: translateY(-2px); }

.cat-tags{ display:flex; gap:8px; flex-wrap:wrap; }

.cat-tags a{
    font-size:0.75rem; font-weight:700; color: var(--amethyst); background: var(--paper-2);
    border-radius:999px; padding:6px 13px; text-decoration:none;
  }

.cat-tags a:hover{ background: #E4D4F2; }

/* ---------- AUTHOR BIO ---------- */
  .author-bio{
    display:flex; gap:18px; align-items:flex-start;
    border: 1.5px solid var(--line); border-radius:18px; padding: 26px 26px;
    margin-bottom: 60px;
  }

.author-bio .avatar{ width:56px; height:56px; font-size:1.125rem; }

.author-bio h3{
    font-family: var(--font-display); font-weight:600; font-size:1.1rem; color: var(--charcoal);
    margin: 0 0 4px;
  }

.author-bio .role{ font-size:0.75rem; font-weight:700; color: var(--amethyst); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }

.author-bio p.bio{ font-size:0.8438rem; line-height:1.65; color: var(--ink-body); margin:0; }

@media (max-width: 560px){
    .post-header{ padding-top:16px; }
    .featured-media{ min-height: 220px; }
    .author-bio{ flex-direction:column; align-items:flex-start; }
    .share-block{ flex-direction:column; align-items:flex-start; }
  }


/* Accessibility: keep keyboard focus unmistakable on text controls. */
.field input:focus-visible,
.field textarea:focus-visible,
.search-form input:focus-visible,
.chatbot-input-row input:focus-visible {
  outline: 3px solid rgba(122,75,176,0.38);
  outline-offset: 2px;
}

/* Spam-trap field: visible to bots, invisible to people. */
.honeypot-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }