/* ══════════════════════════════════════════════════════════════════
   NGM — MASTER GLOBAL CSS  (REDESIGN)
   ──────────────────────────────────────────────────────────────────
   Single consolidated stylesheet for the sage/cream NGM redesign. The
   shared design system (tokens, typography, buttons, badges) appears ONCE
   here, followed by each page's own styles and the native WA gadget skins.

   ⚠️ THIS IS THE REDESIGN — do NOT paste it into the live WA Global CSS tab
   until the full site cutover. To revert the live site, use
   current-live-backup.css instead.

   Fonts are imported below; pages no longer each need their own <link>.
   At cutover, each page gadget's <style> block can be deleted because its
   styles live here. (The header/footer gadgets keep their own CSS since
   they carry HTML+JS, not just CSS.)
══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap');

/* ══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — shared base (tokens, reset, type, layout, buttons, arrow link, badges)
══════════════════════════════════════════════════════════════════ */
/* ── 1. DESIGN TOKENS ───────────────────────────────────── */
:root {
  --ngm-sage:      #5C7A52;
  --ngm-sage-dk:   #3E5538;
  --ngm-sage-lt:   #EEF3EC;
  --ngm-rose:      #B87260;
  --ngm-rose-lt:   #F5EBE7;
  --ngm-rose-dk:   #9A5C4A;
  --ngm-cream:     #FAF7F2;
  --ngm-linen:     #F0EAE0;
  --ngm-linen-dk:  #E5DDD0;
  --ngm-charcoal:  #242424;
  --ngm-gray:      #656565;
  --ngm-gray-lt:   #9A9A9A;
  --ngm-border:    #DDD5C8;
  --ngm-serif: "Cormorant Garamond", Georgia, serif;
  --ngm-sans:  "DM Sans", system-ui, sans-serif;
  --ngm-radius:    14px;
  --ngm-radius-lg: 20px;
  --ngm-sh:   0 2px 12px rgba(0,0,0,.06);
  --ngm-shm:  0 8px 32px rgba(0,0,0,.10);
  --ngm-shx:  0 20px 60px rgba(0,0,0,.14);
}
/* ── 2. SCOPE RESET ─────────────────────────────────────── */
.ngm *,
.ngm *::before,
.ngm *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ── 3. TYPOGRAPHY SYSTEM ───────────────────────────────── */
.ngm-eyebrow {
  display: block;
  font-family: var(--ngm-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ngm-sage);
  margin-bottom: 10px;
}
.ngm-h1 {
  font-family: var(--ngm-serif) !important;
  font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--ngm-charcoal);
  text-transform: none !important;
  margin-bottom: 20px;
}
.ngm-h2 {
  font-family: var(--ngm-serif) !important;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ngm-charcoal);
  text-transform: none !important;
  margin-bottom: 14px;
}
.ngm-h2-dark {
  font-family: var(--ngm-serif) !important;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  text-transform: none !important;
  margin-bottom: 16px;
}
.ngm-h1 em,
.ngm-h2 em,
.ngm-h2-dark em {
  font-family: var(--ngm-serif) !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-style: italic;
  color: var(--ngm-rose) !important;
}
.ngm-lead {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: 36px;
}
/* ── 4. LAYOUT HELPERS ──────────────────────────────────── */
.ngm-sec {
  padding: 88px 48px;
}
.ngm-sec-linen { background: var(--ngm-linen); }
.ngm-sec-cream { background: var(--ngm-cream); }
.ngm-sec-white { background: #fff; }
.ngm-con {
  max-width: 1080px;
  margin: 0 auto;
}
/* ── 5. BUTTONS ─────────────────────────────────────────────
   FONT FIX: WA's theme applies its own font to every anchor via
   high-specificity rules like  body A:not(.stylizedButton) {…}.
   A plain `.ngm-btn { font-family }` loses to that, so the pill
   buttons (Join, Get directions, etc.) rendered in the theme's
   font instead of DM Sans. We mirror WA's specificity by also
   declaring the rule with a `body` prefix + !important on the
   font properties, so our font wins. (Same high-specificity
   override pattern used for the WA events gadget in section 12.)
   The arrow links already won this fight; this brings the pills
   in line with the page's type system.
────────────────────────────────────────────────────────── */
.ngm-btn,
body a.ngm-btn,
body a.ngm-btn:link,
body a.ngm-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ngm-sans) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border-radius: 100px;
  padding: 12px 26px;
  cursor: pointer;
  text-decoration: none !important;
  border: 1.5px solid transparent;
  transition: background .2s, transform .18s, box-shadow .18s, color .2s;
  line-height: 1;
}
.ngm-btn-sm,
body a.ngm-btn-sm { padding: 9px 20px; font-size: .82rem !important; }
.ngm-btn-green  { background: var(--ngm-sage-dk); color: #fff !important; border-color: var(--ngm-sage-dk); }
.ngm-btn-green:hover  { background: var(--ngm-sage); border-color: var(--ngm-sage); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(62,85,56,.25); }
.ngm-btn-rose   { background: var(--ngm-rose);    color: #fff !important; border-color: var(--ngm-rose); }
.ngm-btn-rose:hover   { background: var(--ngm-rose-dk); border-color: var(--ngm-rose-dk); }
.ngm-btn-outline,
body a.ngm-btn-outline { background: transparent; color: var(--ngm-sage-dk) !important; border: 1.5px solid var(--ngm-sage-dk) !important; }
.ngm-btn-outline:hover,
body a.ngm-btn-outline:hover { background: var(--ngm-sage-dk) !important; color: #fff !important; }
.ngm-btn-outline-rose,
body a.ngm-btn-outline-rose { background: transparent; color: var(--ngm-rose) !important; border: 1.5px solid var(--ngm-rose) !important; }
.ngm-btn-outline-rose:hover,
body a.ngm-btn-outline-rose:hover { background: var(--ngm-rose) !important; color: #fff !important; }
.ngm-btn-white  { background: #fff; color: var(--ngm-charcoal) !important; border-color: #fff; }
.ngm-btn-white:hover  { background: var(--ngm-cream); }
/* Stops a button stretching to fill a flex/grid column on desktop.
   Used on the Retreat button, which sits in a flex-column. */
.ngm-btn-fit { align-self: flex-start; }
/* ── 6. ARROW LINK ──────────────────────────────────────── */
.ngm-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ngm-sans);
  font-size: .9rem;
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(62,85,56,.3);
  padding-bottom: 2px;
  transition: gap .18s, border-color .18s;
}
.ngm-arrow-link:hover {
  gap: 10px;
  border-color: var(--ngm-sage-dk);
}
.ngm-arrow-link-sm { font-size: .8rem; }
/* ── 7. FORMAT BADGES ───────────────────────────────────── */
.ngm-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ngm-sans);
  font-size: .68rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: .04em;
}
.ngm-badge-hybrid  { background: #E3EFEF; color: #2A5A5A; }
.ngm-badge-person  { background: var(--ngm-rose-lt); color: #7A3E2E; }
.ngm-badge-zoom    { background: #EEEEFF; color: #3A46AF; }
.ngm-badge-virtual { background: #F2EEF8; color: #5A3A8A; }

/* ══════════════════════════════════════════════════════════════════
   PAGE — HOMEPAGE
══════════════════════════════════════════════════════════════════ */
/* ── 8. HERO ────────────────────────────────────────────── */
.ngm-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(88vh, 700px);
  background: var(--ngm-cream);
  overflow: hidden;
}
.ngm-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 56px 72px 72px;
}
.ngm-hero-body {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 400px;
  margin-bottom: 32px;
}
.ngm-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ngm-hero-photo {
  overflow: hidden;
  position: relative;
}
.ngm-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ── 9. MARQUEE (stats bar) ─────────────────────────────────
   divider lines and dots REMOVED. Edges now fade to the
   same green as the bar background (--ngm-sage-dk), not white,
   using gradient overlays on each side.
────────────────────────────────────────────────────────── */
.ngm-marquee-wrap {
  background: var(--ngm-sage-dk);
  overflow: hidden;
  position: relative;
}
/* Left + right fade overlays — same green as background */
.ngm-marquee-wrap::before,
.ngm-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.ngm-marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--ngm-sage-dk) 0%, rgba(62,85,56,0) 100%);
}
.ngm-marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--ngm-sage-dk) 0%, rgba(62,85,56,0) 100%);
}
.ngm-marquee-track {
  display: flex;
  width: max-content;
  animation: ngm-scroll 44s linear infinite;
}
/* Each set is a non-shrinking flex group; two of them make the
   track exactly 2× one set, so -50% lands on a pixel-identical
   frame and the loop is seamless. */
.ngm-marquee-set {
  display: flex;
  flex: 0 0 auto;
}
.ngm-marquee-wrap:hover .ngm-marquee-track {
  animation-play-state: paused;
}
@keyframes ngm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ngm-stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 48px;
  white-space: nowrap;
  /* divider border-right REMOVED per edit */
}
.ngm-stat-num {
  font-family: var(--ngm-serif);
  font-size: 1.6rem;
  color: #fff;
  line-height: 1;
}
.ngm-stat-label {
  font-family: var(--ngm-sans);
  font-size: .8rem;
  color: rgba(255,255,255,.65);
  line-height: 1.35;
}
/* ── 10. ABOUT STRIP ────────────────────────────────────────
   photo now has an icon overlay badge in the corner.
────────────────────────────────────────────────────────── */
.ngm-about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ngm-about-photo {
  border-radius: var(--ngm-radius-lg);
  overflow: hidden;
  height: 480px;
  box-shadow: var(--ngm-shx);
  position: relative;   /* anchor for the icon overlay */
}
.ngm-about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Circular icon badge floating over the photo */
.ngm-photo-icon {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ngm-cream);
  box-shadow: var(--ngm-shm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ngm-photo-icon img,
.ngm-photo-icon svg {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.ngm-pullquote {
  font-family: var(--ngm-serif);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ngm-charcoal);
  border-left: 3px solid var(--ngm-rose);
  padding-left: 20px;
  margin-bottom: 20px;
}
.ngm-about-body p {
  font-family: var(--ngm-sans);
  font-size: 1rem;
  color: var(--ngm-gray);
  line-height: 1.85;
  margin-bottom: 12px;
}
/* ── 11. MEETING CARDS ──────────────────────────────────── */
.ngm-mcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  margin-bottom: 36px;
}
.ngm-mcard {
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius-lg);
  padding: 24px;

  transition: background-color .25s ease, border-color .25s ease;
}
.ngm-mcard:hover {

  background: var(--ngm-sage-lt);
  border-color: var(--ngm-sage-lt);
}
.ngm-mcard-tag {
  display: inline-block;
  font-family: var(--ngm-sans);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ngm-sage-dk);
  background: var(--ngm-sage-lt);
  border-radius: 100px;
  padding: 3px 11px;
  margin-bottom: 11px;
}
.ngm-mcard-name {
  font-family: var(--ngm-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ngm-charcoal);
  margin-bottom: 8px;
  line-height: 1.25;
  text-transform: none !important;
}
.ngm-mcard-desc {
  font-family: var(--ngm-sans);
  font-size: .875rem;
  color: var(--ngm-gray);
  line-height: 1.7;
  margin-bottom: 14px;
}
.ngm-mcard-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ngm-linen-dk);
}
.ngm-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ngm-sans);
  font-size: .8rem;
  color: var(--ngm-gray);
}
/* ── 12. UPCOMING GATHERINGS ──────────────────────────────────
   v6 CHANGE: the section is now STACKED, not a two-column grid.
   Heading row → WA gadget slot → CTA row. This is what lets the
   native WA Upcoming-events gadget sit where it actually lands
   instead of being orphaned beneath an empty grid cell.
────────────────────────────────────────────────────────── */
.ngm-upcoming-head { margin-bottom: 0; }
/* Intro copy under the calendar heading */
.ngm-upcoming-intro {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 620px;
  margin-top: 8px;
}
/* Centered "View the full calendar →" link (replaces the green box) */
.ngm-cal-link-wrap {
  text-align: center;
  margin-top: 8px;
}
.ngm-cal-link {
  font-size: 1rem;
}
.ngm-cal-note {
  font-family: var(--ngm-sans);
  font-size: .82rem;
  color: var(--ngm-gray-lt);
  line-height: 1.65;
  margin-top: 18px;
  padding: 0 2px;
}
/* ───── WA Upcoming-events gadget styling ─────
   CONFIRMED against the live markup (June 2026). The gadget div is:
     <div class="WaGadget WaGadgetUpcomingEvents ngm-wa-events upcomingEventsStyle001">
       <div class="gadgetStyleBody">
         <ul>
           <li>
             <span class="event-time-zone" style="display:none">…</span>
             <div class="title"><a href="…">Event name</a></div>
             <div class="date"><span …>Sat, June 20 …</span></div>
             <div class="location"><span>…</span></div>
           </li> …
   TWO things make these selectors work where the old ones failed:
   1. ngm-wa-events sits on the SAME element as upcomingEventsStyle001
      (not a parent), so they're chained with NO space:
        .ngm-wa-events.upcomingEventsStyle001
   2. The theme's orange/Lato rules are prefixed with `body`, which
      outranks a plain class. So every rule below is also prefixed
      with `body` to win on specificity (per the project's high-
      specificity override pattern). Keep the `body` prefix.
────────────────────────────────────────────────────────── */
/* Strip WA's default chrome, then make the gadget a WHITE CARD
   that sits on the linen band — so the event list reads as an
   intentional, embedded part of the calendar block instead of
   floating in a bare strip. The card matches the meeting cards
   above (white, rounded, soft shadow).
   The gadget also carries the LINEN band color itself + side
   padding, so even though it's a separate WA gadget between the
   heading and CTA blocks, the linen runs continuously through all
   three and the white card floats on it. No WA layout-row color
   change needed. */
body .ngm-wa-events.WaGadgetUpcomingEvents {
  background: var(--ngm-linen) !important;  /* continuous band */
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;

  padding: 28px 48px !important;
  font-family: var(--ngm-sans) !important;
}
body .ngm-wa-events .gadgetStyleBody {
  background: #fff !important;
  border: 1px solid var(--ngm-border) !important;
  border-radius: var(--ngm-radius-lg) !important;
  box-shadow: var(--ngm-sh) !important;

  padding: 12px 28px !important;
  margin: 0 auto !important;
  max-width: 1080px !important;    /* align with .ngm-con */
}
/* The list + rows */
body .ngm-wa-events.upcomingEventsStyle001 ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li {
  list-style: none !important;
  border-bottom: 1px solid var(--ngm-linen-dk) !important;
  padding: 18px 14px !important;
  margin: 0 !important;
  font-family: var(--ngm-sans) !important;
  /* rounded so the hover fill has soft corners, not sharp ones */
  border-radius: var(--ngm-radius) !important;
  transition: background-color .2s ease !important;
}
/* Whole row is clickable (click handler in the script). Hover
   the full row turns pale green with rounded corners — no lift, no shadow. */
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover {
  background-color: var(--ngm-sage-lt) !important;
  border-radius: var(--ngm-radius) !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li.last,
body .ngm-wa-events.upcomingEventsStyle001 ul li:last-child {
  border-bottom: none !important;   /* no rule under the final row */
}
/* Event title — serif charcoal, sage on hover, no underline.
   Mirrors the theme's own selector exactly so we beat #f48d1d.
   On row hover the title also goes sage (whole card is the link). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .title {
  margin: 0 0 8px !important;
  font-weight: 400 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a {
  font-family: var(--ngm-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--ngm-charcoal) !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover .title a,
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a:hover {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
}
/* Date — now matches the MEETING CARD date line: small muted gray
   sans, with a calendar icon to its left (via ::before SVG). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .date {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 0 !important;   /* no location below it anymore */
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date::before {
  content: "" !important;
  flex-shrink: 0 !important;
  width: 12px !important;
  height: 12px !important;
  background-color: var(--ngm-sage) !important;
  /* calendar glyph, masked so it takes the sage color above */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date,
body .ngm-wa-events.upcomingEventsStyle001 ul li .date span {
  font-family: var(--ngm-sans) !important;
  font-size: .8rem !important;          /* match .ngm-meta-row */
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--ngm-gray) !important;    /* match .ngm-meta-row */
}

body .ngm-wa-events.upcomingEventsStyle001 ul li .location {
  display: none !important;
}
/* ── Derived location tags (injected by the script at the bottom
   of this block). The script reads each event's .location text
   and adds a data-tag attribute on the <li>; CSS styles the chip. */
body .ngm-wa-events.upcomingEventsStyle001 ul li .ngm-evt-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--ngm-sans) !important;
  font-size: .65rem !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="zoom"]    .ngm-evt-tag { background:#EEEEFF !important; color:#3A46AF !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="hybrid"]  .ngm-evt-tag { background:#E3EFEF !important; color:#2A5A5A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="virtual"] .ngm-evt-tag { background:#F2EEF8 !important; color:#5A3A8A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="person"]  .ngm-evt-tag { background:var(--ngm-rose-lt) !important; color:#7A3E2E !important; }
/* ── 13. RETREAT SECTION ────────────────────────────────── */
.ngm-retreat {
  background: var(--ngm-sage-dk);
  overflow: hidden;
}
.ngm-retreat-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
}
.ngm-retreat-photo {
  overflow: hidden;
  position: relative;
}
.ngm-retreat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngm-retreat-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 40%, var(--ngm-sage-dk) 92%);
  pointer-events: none;
}
.ngm-retreat-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* keep children at natural width */
  padding: 64px 64px 64px 48px;
  color: #fff;
}
.ngm-retreat-eyebrow {
  display: block;
  font-family: var(--ngm-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 12px;
}
.ngm-retreat-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ngm-retreat-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ngm-sans);
  font-size: .82rem;
  color: rgba(255,255,255,.72);
}
.ngm-retreat-body {
  font-family: var(--ngm-sans);
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  line-height: 1.85;
  color: rgba(255,255,255,.85);
  max-width: 380px;
  margin-bottom: 28px;
}
/* ── 14. JOIN / MEMBERSHIP CTA ──────────────────────────────
   v6 CHANGE: the serif-rose "$30 per year" pill (.ngm-join-price)
   is gone — the price now lives inside the body paragraph as
   plain sans body text. One font, one color in this block.
────────────────────────────────────────────────────────── */
.ngm-join {
  background: var(--ngm-rose-lt);
  padding: 88px 48px;
  text-align: center;
}
.ngm-join-inner {
  max-width: 640px;   /* wider band so copy can breathe */
  margin: 0 auto;
}
.ngm-join-body {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.75;
  /* v6: copy now goes WIDER than the title, full band width,
     instead of being pinched to 420px under it */
  max-width: 560px;
  margin: 0 auto 28px;
}
.ngm-join-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* ── 15. LOCATION / MAP ─────────────────────────────────── */
.ngm-loc-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ngm-loc-map {
  border-radius: var(--ngm-radius-lg);
  overflow: hidden;
  height: 320px;
  border: 1px solid var(--ngm-border);
  box-shadow: var(--ngm-shm);
}
.ngm-loc-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.ngm-addr-label {
  display: block;
  font-family: var(--ngm-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ngm-gray-lt);
  margin-top: 20px;
  margin-bottom: 5px;
}
.ngm-addr-label:first-of-type { margin-top: 0; }
.ngm-address {
  font-style: normal;
  font-family: var(--ngm-sans);
  font-size: 1rem;
  color: var(--ngm-charcoal);
  line-height: 1.85;
}
/* ── 16. FAQ ACCORDION ──────────────────────────────────────
   Accordion cards using <details>/<summary>. The answer is wrapped
   in .ngm-faq-wrap which animates open via a grid-template-rows
   transition (0fr → 1fr) — a smooth, fluid height reveal with no
   JavaScript. The inner .ngm-faq-a must have overflow:hidden for
   the collapse to clip cleanly.
────────────────────────────────────────────────────────── */
.ngm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* v6: wider cards on desktop — fill the container instead of
     being capped at 760px. Falls back to 100% within .ngm-con. */
  max-width: 960px;
  margin-top: 44px;
}
.ngm-faq-card {
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ngm-faq-card[open] {
  box-shadow: var(--ngm-sh);
  border-color: var(--ngm-sage-lt);
}
.ngm-faq-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-family: var(--ngm-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ngm-charcoal);
  line-height: 1.3;
  transition: color .2s ease;
}
.ngm-faq-card summary:hover { color: var(--ngm-sage-dk); }
.ngm-faq-card summary::-webkit-details-marker { display: none; }
/* Plus / minus indicator */
.ngm-faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform .3s ease;
}
.ngm-faq-icon::before,
.ngm-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ngm-sage-dk);
  border-radius: 2px;
}
.ngm-faq-icon::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.ngm-faq-icon::after  { left: 10px; top: 2px; width: 2px; height: 18px; transition: opacity .3s ease; }
.ngm-faq-card[open] .ngm-faq-icon { transform: rotate(180deg); }
.ngm-faq-card[open] .ngm-faq-icon::after { opacity: 0; }
/* Fluid open: the wrapper animates its row height from 0fr to 1fr */
.ngm-faq-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.ngm-faq-card[open] .ngm-faq-wrap {
  grid-template-rows: 1fr;
}
/* While closing (set by the FAQ script), force the row back to 0fr
   even though [open] is still present — this animates the collapse,
   then the script removes [open] when the transition ends. */
.ngm-faq-card.ngm-faq-closing .ngm-faq-wrap {
  grid-template-rows: 0fr;
}
.ngm-faq-a {
  overflow: hidden;          /* clip during the collapse/expand */
  min-height: 0;             /* FIX: grid items default to min-height:auto,
                                which blocks shrinking back to 0fr after the
                                first open — so the animation only ran once.
                                min-height:0 lets it collapse every time. */
  font-family: var(--ngm-sans);
  font-size: .9375rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  padding: 0 24px;           /* vertical padding added by inner div */
}
/* inner padding wrapper so the text doesn't get clipped at the seam */
.ngm-faq-a > div { padding-bottom: 24px; }
.ngm-faq-a a {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(62,85,56,.3);
  transition: border-color .15s;
}
.ngm-faq-a a:hover { border-color: var(--ngm-sage-dk); }
/* ── 17. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
  .ngm-sec { padding: 64px 28px; }
  .ngm-hero              { grid-template-columns: 1fr; min-height: auto; }
  .ngm-hero-copy         { padding: 52px 28px 44px; }
  .ngm-hero-photo        { height: 300px; }
  .ngm-about-inner       { grid-template-columns: 1fr; gap: 44px; }
  .ngm-about-photo       { height: 280px; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 28px !important; padding-right: 28px !important; }
  .ngm-retreat-inner     { grid-template-columns: 1fr; }
  .ngm-retreat-photo     { height: 220px; }
  .ngm-retreat-photo::after {
    background: linear-gradient(to top, var(--ngm-sage-dk) 30%, transparent);
  }
  .ngm-retreat-copy      { padding: 44px 28px; }
  .ngm-loc-inner         { grid-template-columns: 1fr; gap: 36px; }
  .ngm-loc-map           { height: 250px; }

  .ngm-hero-body,
  .ngm-lead,
  .ngm-upcoming-intro,
  .ngm-about-body p,
  .ngm-retreat-body { max-width: 100% !important; }
}
@media (max-width: 560px) {
  .ngm-sec { padding: 52px 18px; }
  .ngm-hero-copy         { padding: 40px 18px 36px; }
  .ngm-hero-photo        { height: 220px; }
  .ngm-h1                { font-size: 2.5rem; }
  .ngm-marquee-track     { animation-duration: 30s; }
  .ngm-stat-item         { padding: 14px 28px; }
  .ngm-mcard-grid        { grid-template-columns: 1fr; }
  .ngm-join              { padding: 64px 18px; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 18px !important; padding-right: 18px !important; }
}
/* ── 18. REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ngm-marquee-track { animation: none !important; }
  .ngm-mcard         { transition: none; }
  .ngm-btn           { transition: none; }
  .ngm-faq-icon      { transition: none; }
}
/* ── 19. KILL WA WRAPPER GAPS (top of hero / bottom of footer) ──
   The gap above the hero is padding/margin on WA's structural
   wrappers around the page content + the custom-HTML gadget.
   casefile_guardian wraps gadgets in .gadgetStyleBody, gadgets in
   .WaGadget, and the content column in the page layout cells.
   These zero the top space on the FIRST content gadget and the
   bottom space on the LAST, so the hero meets the header and the
   last section meets the footer.
   ⚠ STILL A GAP AFTER PUBLISH? It's almost certainly one specific
   wrapper this doesn't name. To find it: right-click the gap →
   Inspect → walk UP the tree until the highlight box covers the
   empty strip → that element has the padding-top/margin-top in its
   Styles panel → copy its class → add it to the list below.
   NOTE: check in PREVIEW / logged-out, not the editor — the admin
   toolbar adds its own space that is NOT on the live page.
────────────────────────────────────────────────────────── */
/* Remove the box padding/margin WA puts around each custom-HTML
   gadget body, so our full-bleed sections truly reach the edges. */
body .WaGadgetCustomHtml,
body .WaGadgetCustomHtml .gadgetStyleBody {
  margin: 0 !important;
  padding: 0 !important;
}
/* Collapse top spacing on the very first content gadget (hero)
   and bottom spacing on the very last (location). */
body .WaGadget:first-child,
body .WaGadget:first-child .gadgetStyleBody {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body .WaGadget:last-child,
body .WaGadget:last-child .gadgetStyleBody {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Common casefile_guardian content-column wrappers — zero their
   vertical padding so nothing pads the band above the hero. */
body #idContentContainer,
body .WaLayoutBody #idContentArea,
body .contentMainColumn,
body .pageBodyClass,
body .mainColumnWidth {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* The seam ABOVE the header is usually the page's content area or
   main wrapper carrying top padding/margin between the very top of
   the page and the header bar. These zero the most common ones in
   casefile_guardian. If a seam remains, Inspect it (see note above)
   and add the offending class here. */
body .WaLayoutBody,
body #idMainContainer,
body #idWrapper,
body .pageContentWrapper,
body .WaGridLayout:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
/* Some themes draw a faint top border/texture on the header's outer
   wrapper — neutralize a stray top border that reads as a seam. */
body .WaGadgetMenuHorizontal,
body .menuInnerWrapper {
  border-top: none !important;
}

body .WaGadgetMenuHorizontal,
body .WaGadgetMenuHorizontal .gadgetStyleBody,
body .menuInnerWrapper,
body .menuOuterWrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body .WaGridLayout:first-of-type,
body .WaGridLayout:first-of-type .gadgetContentEditableInner,
body #idContentRowGroup > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ── 20. KILL THE REAL WA GAPS (confirmed via Inspect, casefile_guardian) ──
   The Inspect on the live page revealed the exact theme rules that
   create the spaces. They are NOT in your HTML — they're WA theme
   defaults on placeholder/gadget wrappers. These override them:
   • [class^="WaGadget"]      → margin: 0 0 20px 0  AND  margin-bottom:24px
       = the 20–24px under every gadget. This is the space between
         your stacked custom-HTML gadgets and the WA events gadget,
         and between the header gadget and the hero.
   • [class*="WaCustomLayoutContainer"] → margin-bottom: 20px
       = extra space under each layout container.
   • .WaPlaceHolderContent>div → padding: 40px 15px
       = the 40px top/bottom padding on the content area. This is the
         bulk of the header→hero gap.
   We zero the VERTICAL spacing while KEEPING the 15px horizontal
   padding on the placeholder (so content isn't flush to the screen
   edge on mobile). If you want edge-to-edge horizontally too, change
   the placeholder rule's padding to 0.
──────────────────────────────────────────────────────────────── */
/* 1. Remove the bottom margin WA puts under every gadget. This closes
      BOTH the header→hero gap and the "Mark your calendar"→events gap. */
body [class^="WaGadget"],
body .WaGadgetFirst {
  margin: 0 !important;
}
/* 2. Remove the layout-container bottom margin. */
body [class*="WaCustomLayoutContainer"] {
  margin-bottom: 0 !important;
}
/* 3. Kill the 40px vertical padding on the content placeholder (the
      header→hero gap), keep the 15px sides. Covers the numbered
      placeholder variants the theme uses. */
body .WaPlaceHolderContent > div,
body .WaPlaceHolderContent1 > div,
body .WaPlaceHolderContent2 > div,
body .WaPlaceHolderContent3 > div,
body .WaPlaceHolderContent4 > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 4. The placeholder wrapper itself + wide variant — zero vertical. */
body .WaPlaceHolder > div,
body .WaPlaceHolderWide > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   PAGE — ABOUT
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   ABOUT-PAGE-SPECIFIC STYLES
══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   ABOUT-PAGE LAYOUT
════════════════════════════════════════════════════════════ */
/* ── About Hero ── */
.ngm-about-hero {
  background: var(--ngm-cream);
  padding: 80px 48px 72px;
  border-bottom: 1px solid var(--ngm-border);
}
.ngm-about-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ngm-about-hero-photo {
  border-radius: var(--ngm-radius-lg);
  overflow: hidden;
  height: 440px;
  box-shadow: var(--ngm-shx);
}
.ngm-about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngm-about-hero p {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 28px;
}
.ngm-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* ── History (simplified — pure copy) ── */
.ngm-history-simple p {
  font-family: var(--ngm-sans);
  font-size: 1rem;
  color: var(--ngm-gray);
  line-height: 1.85;
  max-width: 680px;
  margin-bottom: 14px;
}
.ngm-history-simple p:last-child { margin-bottom: 0; }
/* ── What We Do cards ── */
.ngm-do-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.ngm-do-card {
  display: flex;
  gap: 18px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius-lg);

  transition: background-color .22s ease, border-color .22s ease;
}

.ngm-do-card:hover {
  background: var(--ngm-sage-lt);
  border-color: var(--ngm-sage-lt);
}
.ngm-do-icon {
  width: 44px;
  height: 44px;
  background: var(--ngm-sage-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ngm-do-body h3 {
  font-family: var(--ngm-serif) !important;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ngm-charcoal);
  text-transform: none !important;
  margin-bottom: 6px;
  line-height: 1.2;
}
.ngm-do-body p {
  font-family: var(--ngm-sans);
  font-size: .875rem;
  color: var(--ngm-gray);
  line-height: 1.7;
}
/* ── Leadership ── */
.ngm-leadership-intro {
  font-family: var(--ngm-sans);
  font-size: 1rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: 40px;
}
.ngm-lcard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.ngm-lcard {
  background: #fff;
  border: 1px solid var(--ngm-border);

  border-radius: var(--ngm-radius-lg);
  padding: 22px 20px 20px;
}

.ngm-lcard-role {
  display: block;
  font-family: var(--ngm-sans);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase !important;
  color: var(--ngm-sage-dk);
  margin-bottom: 6px;
}
.ngm-lcard-name {
  display: block;
  font-family: var(--ngm-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ngm-charcoal);
  text-transform: none !important;
  line-height: 1.2;
  margin-bottom: 10px;
}
/* Emails are now plain text (not clickable). Force one consistent
   size + font with body-prefix so the WA theme can't make some
   render larger than others. */
.ngm-lcard-email,
body .ngm-lcard-email {
  display: block;
  font-family: var(--ngm-sans) !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  color: var(--ngm-gray) !important;
  word-break: break-all;
}
.ngm-lcard-note {
  margin-top: 24px;
  font-family: var(--ngm-sans);
  font-size: .85rem;
  color: var(--ngm-gray-lt);
  line-height: 1.65;
}
.ngm-lcard-note a {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(62,85,56,.3);
}
.ngm-lcard-note a:hover {
  border-color: var(--ngm-sage-dk);
}
/* ── Join CTA (about page — rose-lt) ── */
.ngm-about-cta {
  background: var(--ngm-rose-lt);
  padding: 88px 48px;
  text-align: center;
}
.ngm-about-cta-inner {
  max-width: 560px;
  margin: 0 auto;
}
.ngm-about-cta p {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  margin-bottom: 32px;
}
.ngm-about-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ngm-about-hero { padding: 56px 28px 52px; }
  .ngm-about-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .ngm-about-hero-photo { height: 260px; }
  .ngm-about-hero p { max-width: 100%; }
  .ngm-sec { padding: 64px 28px; }
  .ngm-do-grid { grid-template-columns: 1fr; }
  .ngm-lcard-grid { grid-template-columns: 1fr; }
  .ngm-about-cta { padding: 64px 28px; }

  .ngm-history-simple p,
  .ngm-leadership-intro,
  .ngm-lead { max-width: 100% !important; }
}
@media (max-width: 560px) {
  .ngm-about-hero { padding: 44px 18px 40px; }
  .ngm-about-hero-photo { height: 220px; }
  .ngm-sec { padding: 52px 18px; }
  .ngm-lcard-grid { grid-template-columns: 1fr; }
  .ngm-about-cta { padding: 52px 18px; }
}
/* ════════════════════════════════════════════════════════════
   WA GAP-KILLING (sections 19 + 20 from homepage) — confirmed
   classes from Inspect. Safe to include again; identical rules
   in the global CSS just no-op. Closes the header→hero gap and
   the gaps between stacked gadgets on this page too.
════════════════════════════════════════════════════════════ */
body .WaGadgetCustomHtml,
body .WaGadgetCustomHtml .gadgetStyleBody {
  margin: 0 !important;
  padding: 0 !important;
}
body [class^="WaGadget"],
body .WaGadgetFirst {
  margin: 0 !important;
}
body [class*="WaCustomLayoutContainer"] {
  margin-bottom: 0 !important;
}
body .WaPlaceHolderContent > div,
body .WaPlaceHolderContent1 > div,
body .WaPlaceHolderContent2 > div,
body .WaPlaceHolderContent3 > div,
body .WaPlaceHolderContent4 > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body .WaPlaceHolder > div,
body .WaPlaceHolderWide > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   PAGE — CALENDAR (+ WA calendar-gadget skin)
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   CALENDAR-PAGE STYLES (hero, calendar frame, legend, CTA)
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   WA GAP-KILLING (sections 19 + 20 — confirmed classes)
══════════════════════════════════════════════════════════ */
body .WaGadgetCustomHtml,
body .WaGadgetCustomHtml .gadgetStyleBody { margin: 0 !important; padding: 0 !important; }
body [class^="WaGadget"],
body .WaGadgetFirst { margin: 0 !important; }
body [class*="WaCustomLayoutContainer"] { margin-bottom: 0 !important; }
body .WaPlaceHolderContent > div,
body .WaPlaceHolderContent1 > div,
body .WaPlaceHolderContent2 > div,
body .WaPlaceHolderContent3 > div,
body .WaPlaceHolderContent4 > div { padding-top: 0 !important; padding-bottom: 0 !important; }
body .WaPlaceHolder > div,
body .WaPlaceHolderWide > div { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
/* Kill the white strip between the hero and the calendar. The gap is
   the calendar gadget's own top margin / its WA layout-container
   wrappers. Zero the top space on the calendar gadget and the gadget
   directly above it (the custom-HTML block that opens the wrapper). */
body .WaGadgetEvents,
body .WaGadgetEventsStateCalendar,
body .ngm-cal,
body .ngm-cal.WaGadgetEvents {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* The layout cell/row that holds the calendar gadget — no top space */
body .WaGadgetEvents,
body [class*="WaCustomLayoutContainer"],
body [class*="layoutContainerCell"],
body [class*="LayoutContainer"] {
  margin-top: 0 !important;
}
/* ══════════════════════════════════════════════════════════
   BUTTON FIXES — force DM Sans + pill outline over WA theme
══════════════════════════════════════════════════════════ */
.ngm-btn, body a.ngm-btn, body a.ngm-btn:link, body a.ngm-btn:visited {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important;
  font-weight: 500 !important; letter-spacing: normal !important;
  text-transform: none !important; text-decoration: none !important;
}
.ngm-btn-outline, body a.ngm-btn-outline { background: transparent; color: var(--ngm-sage-dk) !important; border: 1.5px solid var(--ngm-sage-dk) !important; }
.ngm-btn-outline:hover, body a.ngm-btn-outline:hover { background: var(--ngm-sage-dk) !important; color: #fff !important; }
.ngm-btn-outline-rose, body a.ngm-btn-outline-rose { background: transparent; color: var(--ngm-rose) !important; border: 1.5px solid var(--ngm-rose) !important; }
.ngm-btn-outline-rose:hover, body a.ngm-btn-outline-rose:hover { background: var(--ngm-rose) !important; color: #fff !important; }
/* ── Calendar hero ── */
.ngm-cal-hero {
  background: var(--ngm-cream);
  padding: 72px 48px 56px;
  border-bottom: 1px solid var(--ngm-border);
}
.ngm-cal-hero-inner { max-width: 1080px; margin: 0 auto; }
.ngm-cal-hero p {
  font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray);
  line-height: 1.8; max-width: 620px; margin-top: 18px;
}
.ngm-cal-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* ── Calendar body wrapper (blends into the page — white, no band) ──
   Top padding ZERO to kill the gap under the hero. Even padding on the
   sides + bottom so the grid has breathing room on all sides. */
.ngm-cal-body { background: #fff; padding: 0 40px; }
.ngm-cal-body-inner { max-width: 1080px; margin: 0 auto 56px; padding: 24px 0 0; }
/* ───── WA CALENDAR GADGET styling ─────
   CONFIRMED via Inspect: the gadget's real class is
   .WaGadgetEventsStateCalendar (inside the broader .WaGadgetEvents),
   NOT .WaGadgetEventsCalendar. The month title lives in
   .pageTitleOuterContainer. Everything is scoped under .ngm-cal so
   nothing here can affect the rest of the page.
   The pink/magenta links are WA's default link color showing inside
   the calendar toolbar. We force EVERY link inside the calendar to
   sage so the toolbar (Week|Month|Year, Prev|Today|Next, Switch to
   List View) stops clashing.
   ⚠ STILL PINK / STILL TEXTURED after publishing? Send me the class
   on a remaining pink <a> and on the textured strip element, and
   I'll target them exactly. */
/* Calendar gadget — NO container look: no border, no rounding, no
   shadow. It blends into the white page. */
body .ngm-cal.WaGadgetEventsStateCalendar,
body .ngm-cal .WaGadgetEventsStateCalendar,
body .ngm-cal.WaGadgetEvents {
  font-family: var(--ngm-sans) !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
/* CALENDAR GADGET — LIVE spacing (the .ngm-cal rules above don't apply to the
   live gadget). Two things:
   1. Kill the gap under the hero: the gadget ships an inline margin:20px, and
      its WA layout wrappers add top space. Zero the top so the calendar sits
      right below the hero. (!important beats the inline style.)
   2. Small side margins: cap the width and centre it, with a small responsive
      side gutter, so the grid isn't edge-to-edge / wider than the hero. */
html body .WaGadgetEventsStateCalendar {
  margin: 0 auto !important;
  max-width: 1180px !important;
  padding: 0 clamp(12px, 2.5vw, 28px) !important;
  box-sizing: border-box !important;
}
html body .WaGadgetEvents,
html body div[class*="WaGadgetEventsStateCalendar"],
html body .WaGadgetEventsStateCalendar {
  margin-top: 0 !important;
}
/* Trim the top padding of the calendar-body wrapper (opened in 01-top) so the
   hero-to-calendar gap closes. */
body .ngm-cal-body-inner { padding-top: 0 !important; }
/* Inner month grid — square corners (no container look) */
body .ngm-cal .monthViewType .EventListCalendar {
  border-radius: 0 !important;
}
/* Kill the theme's floral background texture behind the toolbar/strip
   by forcing the gadget's inner wrappers to a flat white.
   Anchored on the gadget class directly (not .ngm-cal) so it hits even
   if the textured strip renders outside the .ngm-cal wrapper. */
body .WaGadgetEventsStateCalendar .pageTitleOuterContainer,
body .WaGadgetEventsStateCalendar #idViewSwitchersTable,
body #idViewSwitchersTable,
body .WaGadgetEventsStateCalendar [class*="Toolbar"],
body .ngm-cal .pageTitleOuterContainer,
body .ngm-cal [class*="Toolbar"],
body .ngm-cal [class*="oolbar"] {
  background: #fff !important;
  background-image: none !important;
}
/* The textured band itself is the calendar gadget's outer area —
   force the gadget and its title row to a flat background. */
body .WaGadgetEventsStateCalendar,
body .WaGadgetEventsStateCalendar .pageTitle {
  background-image: none !important;
}
/* Force ALL links inside the calendar to sage — recolors the pink
   toolbar links (Week/Month/Year, Prev/Today/Next, Switch to List). */
body .ngm-cal a,
body .ngm-cal a:link,
body .ngm-cal a:visited,
body .WaGadgetEventsStateCalendar a,
body .WaGadgetEventsStateCalendar a:link,
body .WaGadgetEventsStateCalendar a:visited {
  color: var(--ngm-sage-dk) !important;
}
body .ngm-cal a:hover,
body .WaGadgetEventsStateCalendar a:hover {
  color: var(--ngm-sage) !important;
}
/* Month title — serif charcoal. CONFIRMED via Inspect: the
   "MONTH: JUNE 2026" text is .sectionTitle (NOT pageTitleOuterContainer),
   and the theme colors it #7eaae1 in Raleway uppercase. Override all of
   that. High specificity + !important beats the theme rule. */
body .WaGadgetEventsStateCalendar .sectionTitle,
body .ngm-cal .sectionTitle {
  color: var(--ngm-charcoal) !important;
  font-family: var(--ngm-serif) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}
/* Keep the old container rules too, harmless and covers other themes */
body .ngm-cal .pageTitleOuterContainer,
body .ngm-cal .pageTitle,
body .WaGadgetEventsStateCalendar .pageTitleOuterContainer,
body .WaGadgetEventsStateCalendar .pageTitle {
  font-family: var(--ngm-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: var(--ngm-charcoal) !important;
  text-transform: none !important;
}
body .WaGadgetEventsStateCalendar .pageTitleOuterContainer *,
body .WaGadgetEventsStateCalendar .pageTitle *,
body .ngm-cal .pageTitleOuterContainer *,
body .ngm-cal .pageTitle * {
  color: var(--ngm-charcoal) !important;
  font-family: var(--ngm-serif) !important;
}
/* ───── HIDE UNWANTED VIEW OPTIONS ─────
   Leave ONLY the month grid + Prev/Today/Next nav.
   - #group1 = the Week / Month / Year switcher  → hidden
   - "Switch to List View" link                  → hidden
   - #group2 = Previous / Today / Next            → kept
   The list-view link's class isn't confirmed, so we hide it several
   ways: by likely WA classes, by its href (contains EventListViewMode),
   and by the title-bar link position. */
body #group1,
body .WaGadgetEventsStateCalendar #group1,
body .switchersGroup1 {
  display: none !important;
}
body .WaGadgetEventsStateCalendar a[href*="EventListViewMode=1"],
body .WaGadgetEventsStateCalendar .switchViewMode,
body .WaGadgetEventsStateCalendar .listViewMode,
body .WaGadgetEventsStateCalendar .switchToListView,
body a.listViewModeLink {
  display: none !important;
}
/* Weekday header row (Su Mo Tu We Th Fr Sa) — sage-tinted band,
   uppercase sage labels for a clear, branded header.
   NOTE: these th selectors are dead on the LIVE gadget (no th, and the .ngm-cal
   class never sticks). The live-effective header styling — including the
   tablet/mobile abbreviations — lives in the ".WaGadgetEventsStateCalendar"
   block further down (search "day-of-week header band"). */
body .ngm-cal th,
body .ngm-cal .monthViewType .EventListCalendar th {
  font-family: var(--ngm-sans) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ngm-sage-dk) !important;
  background: var(--ngm-sage-lt) !important;
  padding: 10px 6px !important;
  border-color: var(--ngm-linen-dk) !important;
  text-align: center !important;
}
/* Day cells — soft linen borders */
body .ngm-cal td {
  border-color: var(--ngm-linen-dk) !important;
}
/* Today highlight in sage */
body .ngm-cal .today,
body .ngm-cal td.today {
  background: var(--ngm-sage-lt) !important;
}
/* Event chips inside cells — keep them readable, sage accent.
   (Per-type color-coding needs a category class in the markup,
   which this Inspect didn't reveal — so all chips share one accent.
   Send a chip's class + any category attribute to enable per-type.) */
body .ngm-cal .calendarEvent,
body .ngm-cal .eventTitle,
body .ngm-cal td a {
  font-family: var(--ngm-sans) !important;
  font-size: .78rem !important;
  text-decoration: none !important;
}
/* ───── TOOLBAR (confirmed markup) ─────
   The toolbar is #idViewSwitchersTable with #group1 (Week/Month/Year)
   and #group2 (Prev/Today/Next). The current view ("Month") is a
   non-link <span class="monthButtonLabel">.
   IMPORTANT: these are anchored on the GLOBAL IDs (#idViewSwitchersTable,
   #group1, #group2) and on the button classes WITHOUT requiring the
   .ngm-cal wrapper as an ancestor — because WA may render the toolbar
   outside the element that carries the ngm-cal class. The IDs are
   unique on the page, so this is safe and beats WA's magenta links. */
/* NAV BUTTONS — Prev / Next as clean circular icon buttons, Today as a
   matching-height pill. All three share the SAME height + sage outline so the
   row reads as one set.
   ROOT CAUSE of the old "ous" / "Mor" clipping: WA renders the words
   "Previous Month" / "Next Month" inside these anchors (NOT ‹ / › — WA does not
   relabel them), and the round 38px button with overflow:hidden was clipping
   that text to its centre. The theme ALSO paints its own arrow glyph via a
   pseudo-element (that was the stray "second arrow"). Fix: hide WA's text
   (font-size:0) and any child/icon (> * + ::after), then draw ONE chevron with
   ::before. Scoped under #idViewSwitchersTable so it out-ranks the id-level
   fallback link color, incl. on hover. */
html body #idViewSwitchersTable a.DecDateButton,
html body #idViewSwitchersTable a.incDateButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--ngm-sage-dk) !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ngm-sage-dk) !important;
  font-size: 0 !important;            /* hide WA's "Previous Month" / "Next Month" */
  line-height: 0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: background-color .15s ease, color .15s ease !important;
}
/* Kill any child node WA renders inside the button (text span / icon span) */
html body #idViewSwitchersTable a.DecDateButton > *,
html body #idViewSwitchersTable a.incDateButton > * { display: none !important; }
/* Draw one clean chevron in place of WA's contents */
html body #idViewSwitchersTable a.DecDateButton::before,
html body #idViewSwitchersTable a.incDateButton::before {
  display: block !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  background: none !important;
  color: inherit !important;
}
html body #idViewSwitchersTable a.DecDateButton::before { content: "\2039" !important; } /* ‹ prev */
html body #idViewSwitchersTable a.incDateButton::before { content: "\203A" !important; } /* › next */
/* Kill the theme's own arrow glyph (rendered via ::after — the stray 2nd arrow) */
html body #idViewSwitchersTable a.DecDateButton::after,
html body #idViewSwitchersTable a.incDateButton::after {
  content: none !important;
  display: none !important;
}
/* Kill the theme's "|" separators between the nav buttons. There are NO
   separator elements in the DOM (confirmed) — the theme draws them with
   pseudo-elements / borders on the button wrappers and the Today anchor. Nuke
   every nav pseudo-element EXCEPT the ‹ / › chevrons on the Dec/Inc anchors,
   and strip any wrapper border. */
html body #idViewSwitchersTable a.todayButton::before,
html body #idViewSwitchersTable a.todayButton::after,
html body #idViewSwitchersTable #todayButton a::before,
html body #idViewSwitchersTable #todayButton a::after,
html body #idViewSwitchersTable #group2 > div::before,
html body #idViewSwitchersTable #group2 > div::after,
html body #idViewSwitchersTable #decButton::before,
html body #idViewSwitchersTable #decButton::after,
html body #idViewSwitchersTable #todayButton::before,
html body #idViewSwitchersTable #todayButton::after,
html body #idViewSwitchersTable #incButton::before,
html body #idViewSwitchersTable #incButton::after {
  content: none !important;
  display: none !important;
}
html body #idViewSwitchersTable #decButton,
html body #idViewSwitchersTable #todayButton,
html body #idViewSwitchersTable #incButton {
  border: 0 !important;
  background: none !important;
}
html body #idViewSwitchersTable a.DecDateButton:hover,
html body #idViewSwitchersTable a.incDateButton:hover {
  background: var(--ngm-sage-dk) !important;
  color: #fff !important;
  text-decoration: none !important;
}
/* Today → sage outline pill, SAME 38px height as the arrow buttons */
html body #idViewSwitchersTable a.todayButton,
html body #idViewSwitchersTable #todayButton a,
html body a.todayButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 160px !important;
  border: 1.5px solid var(--ngm-sage-dk) !important;
  border-radius: 100px !important;
  background: transparent !important;
  color: var(--ngm-sage-dk) !important;
  font-family: var(--ngm-sans) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
html body #idViewSwitchersTable a.todayButton:hover,
html body #idViewSwitchersTable #todayButton a:hover,
html body a.todayButton:hover {
  background: var(--ngm-sage-dk) !important;
  color: #fff !important;
  text-decoration: none !important;
}
/* Any other calendar links (fallback) — sage text */
body #idViewSwitchersTable a,
body #idViewSwitchersTable a:link,
body #idViewSwitchersTable a:visited,
body a.weekButtonLink,
body a.yearButtonLink,
body a.monthButtonLink {
  color: var(--ngm-sage-dk) !important;
  font-family: var(--ngm-sans) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
/* Current view label ("Month") — charcoal so it reads as active */
body .monthButtonLabel,
body .weekButtonLabel,
body .yearButtonLabel {
  color: var(--ngm-charcoal) !important;
  font-family: var(--ngm-sans) !important;
  font-weight: 500 !important;
}
/* "Switch to List View" link — top-right of the toolbar. Class not yet
   confirmed, so target by the likely WA classes + a broad catch on any
   remaining link inside the calendar gadget's title/toolbar area. */
body .WaGadgetEventsStateCalendar .switchViewMode a,
body .WaGadgetEventsStateCalendar .listViewMode a,
body .WaGadgetEventsStateCalendar .pageTitleOuterContainer a,
body .WaGadgetEventsStateCalendar a[href*="EventListViewMode"] {
  color: var(--ngm-sage-dk) !important;
  font-family: var(--ngm-sans) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
/* TOOLBAR LAYOUT — desktop: month title on the LEFT, nav on the RIGHT, on one
   line ("July 2026 ............ ‹ Today ›"). REAL DOM (confirmed): inside
   #idEventListCalendar the direct children are, in order:
     <h3 class="sectionTitle">  →  month title
     <h1 class="pageTitle">     →  empty
     <div class="pageTitleOuterContainer">  →  "Switch to List View"
     <div id="idViewSwitchersTable">        →  the Prev/Today/Next nav
     <table class="EventListCalendar">      →  the month grid
   We flex the PARENT so the title + nav share one line no matter their default
   block/inline display (inline-block alone let the nav drop below); margin-left
   :auto on the nav pushes it to the right edge; the <table> takes a full-width
   row of its own beneath. */
html body #idEventListCalendar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 6px !important;
  text-align: left !important;
}
html body #idEventListCalendar > .sectionTitle {
  margin: 0 !important;
  flex: 0 1 auto !important;
}
html body #idEventListCalendar > .pageTitle,
html body #idEventListCalendar > .pageTitleOuterContainer {
  display: none !important;
}
html body .WaGadgetEventsStateCalendar #idViewSwitchersTable,
body #idViewSwitchersTable {
  margin: 0 0 0 auto !important;   /* push nav to the right edge on desktop */
  padding: 0 !important;
  clear: none !important;
  text-align: right !important;
  width: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html body #idEventListCalendar > table.EventListCalendar,
html body #idEventListCalendar > .EventListCalendar {
  flex: 1 0 100% !important;
  width: 100% !important;
  margin-top: 6px !important;
}
html body .WaGadgetEventsStateCalendar #idViewSwitchersTable #group2,
body #idViewSwitchersTable #group2,
body #group2 {
  float: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  text-align: right !important;
}
/* Remove leftover spacing from the hidden switcher group and any empty
   button wrappers (the "spacers"). */
body #group1,
body .switchersGroup1,
body #weekButton,
body #monthButton,
body #yearButton {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Each nav button wrapper hugs its button and stays vertically centered.
   The deep ID chain matches WA's own high-specificity mobile rule so ours
   wins and the wrappers never stretch to a full-width bar. */
html body #idViewSwitchersTable #group2 #decButton,
html body #idViewSwitchersTable #group2 #todayButton,
html body #idViewSwitchersTable #group2 #incButton,
body #decButton,
body #todayButton,
body #incButton {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* TABLET & MOBILE: the month title on its own line, then the nav set as a
   left-aligned row beneath it. Breakpoint is 1024px so tablets are covered too
   — WA starts stretching the controls well before phone width, which is why
   they blew out on tablet before. WA's own responsive CSS sets #group2 to
   display:block + width:calc(100%-127px) and the buttons to block — which
   stretched Today and broke the row. We override all of that: #group2 becomes a
   flex row, wrappers auto-width. Button SIZES (38px circles + pill) come from
   the base rules above — we only fix layout here. */
@media (max-width: 1024px) {
  /* Make sure nothing clips the toolbar at this width */
  body .ngm-cal.WaGadgetEventsStateCalendar,
  body .ngm-cal .WaGadgetEventsStateCalendar,
  body #idViewSwitchersTable,
  body #group2 {
    overflow: visible !important;
  }
  html body #idEventListCalendar > .sectionTitle,
  body .WaGadgetEventsStateCalendar .sectionTitle,
  body .ngm-cal .sectionTitle {
    float: none !important;
    display: block !important;
    flex: 0 0 100% !important;       /* full-row in the flex parent */
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
  }
  html body #idViewSwitchersTable,
  html body .WaGadgetEventsStateCalendar #idViewSwitchersTable {
    display: block !important;
    flex: 0 0 100% !important;        /* full-row below the title */
    text-align: left !important;
    padding: 0 0 16px !important;
    margin: 0 !important;            /* cancel desktop margin-left:auto */
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  /* Nav group: a LEFT-aligned flex ROW of the three buttons. The selector
     MUST include .WaGadgetEventsStateCalendar #idViewSwitchersTable so it
     out-ranks WA's own `#idViewSwitchersTable #group2 { display:block }` rule
     (which was stacking them). display:flex forces the children into a row. */
  html body .WaGadgetEventsStateCalendar #idViewSwitchersTable #group2,
  html body #idViewSwitchersTable #group2,
  html body .WaGadgetEventsStateCalendar #group2,
  html body #group2 {
    float: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* button wrappers — content-sized flex items, never floated or full-width */
  html body .WaGadgetEventsStateCalendar #idViewSwitchersTable #decButton,
  html body .WaGadgetEventsStateCalendar #idViewSwitchersTable #todayButton,
  html body .WaGadgetEventsStateCalendar #idViewSwitchersTable #incButton,
  html body #idViewSwitchersTable #decButton,
  html body #idViewSwitchersTable #todayButton,
  html body #idViewSwitchersTable #incButton,
  html body #decButton,
  html body #todayButton,
  html body #incButton {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* keep the icon buttons + Today pill visible (sizes inherited from base) */
  html body #idViewSwitchersTable a.DecDateButton,
  html body #idViewSwitchersTable a.incDateButton,
  html body #idViewSwitchersTable a.todayButton,
  html body a.todayButton {
    visibility: visible !important;
  }
}
/* ───── MONTH GRID (confirmed: .monthViewType .EventListCalendar) ─────
   Soft linen cell borders and a clean white grid. */
body .ngm-cal .monthViewType .EventListCalendar {
  border-bottom: 1px solid var(--ngm-linen-dk) !important;
}
body .ngm-cal .monthViewType .EventListCalendar td,
body .ngm-cal .monthViewType .EventListCalendar th {
  border-color: var(--ngm-linen-dk) !important;
}
/* ── Legend ── */
.ngm-legend-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 32px;
}
.ngm-legend-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 20px; background: #fff;
  border: 1px solid var(--ngm-border); border-radius: var(--ngm-radius);
}
.ngm-legend-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.ngm-legend-dot.meetings { background: var(--ngm-sage); }
.ngm-legend-dot.events   { background: var(--ngm-rose); }
.ngm-legend-dot.retreat  { background: var(--ngm-charcoal); }
.ngm-legend-dot.public   { background: #5B7DB1; }
.ngm-legend-text h3 {
  font-family: var(--ngm-serif) !important; font-size: 1.05rem; font-weight: 400;
  color: var(--ngm-charcoal); text-transform: none !important; margin-bottom: 3px; line-height: 1.2;
}
.ngm-legend-text p {
  font-family: var(--ngm-sans); font-size: .82rem; color: var(--ngm-gray); line-height: 1.6; margin: 0;
}
/* ── Final CTA ── */
.ngm-cal-cta { background: var(--ngm-rose-lt); padding: 72px 48px; text-align: center; }
.ngm-cal-cta-inner { max-width: 520px; margin: 0 auto; }
.ngm-cal-cta p { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; margin-bottom: 28px; }
.ngm-cal-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ── Responsive ── */
@media (max-width: 900px) {
  .ngm-cal-hero { padding: 52px 28px 44px; }
  .ngm-cal-hero p { max-width: 100%; }
  /* Top stays 0 (no hero gap); keep comfortable side padding */
  .ngm-cal-body { padding: 0 24px; }
  .ngm-cal-body-inner { margin: 0 auto 48px; padding: 20px 0 0; }
  .ngm-sec { padding: 56px 28px; }
  .ngm-cal-cta { padding: 56px 28px; }
}
@media (max-width: 560px) {
  .ngm-cal-hero { padding: 40px 18px 36px; }
  .ngm-cal-body { padding: 0 16px; }
  .ngm-cal-body-inner { margin: 0 auto 40px; padding: 16px 0 0; }
  .ngm-sec { padding: 44px 18px; }
  .ngm-cal-cta { padding: 44px 18px; }
  /* WA calendar grid gets cramped on tiny screens — let it scroll */
  body .ngm-cal .WaGadgetEventsStateCalendar,
  body .ngm-cal table { overflow-x: auto !important; display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ngm-btn, .ngm-arrow-link { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PAGE — MEETINGS
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   MEETINGS-PAGE STYLES (cards, hero, FAQ, location, CTA,
   gap-killing, responsive — all current edits applied)
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   WA GAP-KILLING (sections 19 + 20 — confirmed classes)
══════════════════════════════════════════════════════════ */
body .WaGadgetCustomHtml,
body .WaGadgetCustomHtml .gadgetStyleBody { margin: 0 !important; padding: 0 !important; }
body [class^="WaGadget"],
body .WaGadgetFirst { margin: 0 !important; }
body [class*="WaCustomLayoutContainer"] { margin-bottom: 0 !important; }
body .WaPlaceHolderContent > div,
body .WaPlaceHolderContent1 > div,
body .WaPlaceHolderContent2 > div,
body .WaPlaceHolderContent3 > div,
body .WaPlaceHolderContent4 > div { padding-top: 0 !important; padding-bottom: 0 !important; }
body .WaPlaceHolder > div,
body .WaPlaceHolderWide > div { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
/* ══════════════════════════════════════════════════════════
   BUTTON FIXES — force DM Sans + pill outline over WA theme
══════════════════════════════════════════════════════════ */
.ngm-btn, body a.ngm-btn, body a.ngm-btn:link, body a.ngm-btn:visited {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important;
  font-weight: 500 !important; letter-spacing: normal !important;
  text-transform: none !important; text-decoration: none !important;
}
.ngm-btn-outline, body a.ngm-btn-outline { background: transparent; color: var(--ngm-sage-dk) !important; border: 1.5px solid var(--ngm-sage-dk) !important; }
.ngm-btn-outline:hover, body a.ngm-btn-outline:hover { background: var(--ngm-sage-dk) !important; color: #fff !important; }
.ngm-btn-outline-rose, body a.ngm-btn-outline-rose { background: transparent; color: var(--ngm-rose) !important; border: 1.5px solid var(--ngm-rose) !important; }
.ngm-btn-outline-rose:hover, body a.ngm-btn-outline-rose:hover { background: var(--ngm-rose) !important; color: #fff !important; }
/* ── Hero ── */
.ngm-mtg-hero {
  background: var(--ngm-cream);
  padding: 80px 48px 72px;
  border-bottom: 1px solid var(--ngm-border);
}
.ngm-mtg-hero-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.ngm-mtg-hero-copy .ngm-eyebrow { margin-bottom: 14px; }
.ngm-mtg-hero-copy .ngm-h1 { margin-bottom: 22px; }
.ngm-mtg-hero-copy p {
  font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray);
  line-height: 1.8; max-width: 440px; margin-bottom: 18px;
}
.ngm-mtg-hero-copy p:last-of-type { margin-bottom: 0; }
.ngm-mtg-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.ngm-mtg-hero-photo {
  height: 420px; overflow: hidden; border-radius: var(--ngm-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
}
.ngm-mtg-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Groups section ── */
.ngm-groups-intro {
  font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray);
  line-height: 1.8; max-width: 620px; margin-bottom: 40px;
}
.ngm-groups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Group card — green top bar removed; hover = pale-green fill, no lift */
.ngm-gcard {
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius-lg);
  display: flex; flex-direction: column;
  transition: background-color .25s ease, border-color .25s ease;
}
.ngm-gcard:hover { background: var(--ngm-sage-lt); border-color: var(--ngm-sage-lt); }
.ngm-gcard-body { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; }
.ngm-gcard-body-badge {
  display: inline-block; font-family: var(--ngm-sans); font-size: .63rem;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ngm-sage-lt); color: var(--ngm-sage-dk);
  padding: 3px 10px; border-radius: 100px; margin-bottom: 12px; width: fit-content;
}
.ngm-gcard-body-badge.public { background: #E8EEF8; color: #2D4A7A; }
.ngm-gcard-body-badge.paused { background: var(--ngm-linen); color: var(--ngm-gray-lt); }
.ngm-gcard h3 {
  font-family: var(--ngm-serif) !important; font-size: 1.3rem; font-weight: 400;
  color: var(--ngm-charcoal); text-transform: none !important; margin-bottom: 6px; line-height: 1.2;
}
.ngm-gcard-when {
  font-family: var(--ngm-sans); font-size: .8rem; font-weight: 500;
  color: var(--ngm-sage-dk); margin-bottom: 12px;
}
.ngm-gcard-when.public { color: #2D4A7A; }
.ngm-gcard-when.paused { color: var(--ngm-gray-lt); }
.ngm-gcard p {
  font-family: var(--ngm-sans); font-size: .875rem; color: var(--ngm-gray);
  line-height: 1.75; flex: 1; margin-bottom: 16px;
}
.ngm-gcard-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.ngm-gcard-tag {
  font-family: var(--ngm-sans); font-size: .7rem; color: var(--ngm-gray-lt);
  border: 1px solid var(--ngm-border); border-radius: 100px; padding: 2px 9px;
}
/* ── Location ── */
.ngm-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 36px; }
.ngm-loc-block h3 { font-family: var(--ngm-serif) !important; font-size: 1.2rem; font-weight: 400; color: var(--ngm-charcoal); text-transform: none !important; margin-bottom: 8px; }
.ngm-loc-block p, .ngm-loc-block address { font-family: var(--ngm-sans); font-size: .9375rem; color: var(--ngm-gray); line-height: 1.8; font-style: normal; }
.ngm-loc-block + .ngm-loc-block { margin-top: 28px; }
.ngm-loc-block a { color: var(--ngm-sage-dk) !important; text-decoration: none !important; border-bottom: 1px solid rgba(62,85,56,.3); }
.ngm-loc-block a:hover { border-color: var(--ngm-sage-dk); }
.ngm-map-wrap { border-radius: var(--ngm-radius-lg); overflow: hidden; border: 1px solid var(--ngm-border); }
.ngm-map-wrap iframe { display: block; width: 100%; height: 280px; border: none; }
/* ── FAQ ACCORDION (matches homepage — white cards, +/- icon) ──
   Cards using <details>/<summary>. Answer wrapped in .ngm-faq-wrap
   which animates open via grid-template-rows (0fr→1fr). The script
   handles the close direction; min-height:0 makes it repeatable. */
.ngm-faq-list {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 960px; margin-top: 44px;
}
.ngm-faq-card {
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ngm-faq-card[open] {
  box-shadow: var(--ngm-sh);
  border-color: var(--ngm-sage-lt);
}
.ngm-faq-card summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px;
  font-family: var(--ngm-serif); font-size: 1.2rem; font-weight: 400;
  color: var(--ngm-charcoal); line-height: 1.3; transition: color .2s ease;
}
.ngm-faq-card summary:hover { color: var(--ngm-sage-dk); }
.ngm-faq-card summary::-webkit-details-marker { display: none; }
.ngm-faq-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform .3s ease; }
.ngm-faq-icon::before, .ngm-faq-icon::after { content: ""; position: absolute; background: var(--ngm-sage-dk); border-radius: 2px; }
.ngm-faq-icon::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.ngm-faq-icon::after  { left: 10px; top: 2px; width: 2px; height: 18px; transition: opacity .3s ease; }
.ngm-faq-card[open] .ngm-faq-icon { transform: rotate(180deg); }
.ngm-faq-card[open] .ngm-faq-icon::after { opacity: 0; }
.ngm-faq-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.ngm-faq-card[open] .ngm-faq-wrap { grid-template-rows: 1fr; }
.ngm-faq-card.ngm-faq-closing .ngm-faq-wrap { grid-template-rows: 0fr; }
.ngm-faq-a {
  overflow: hidden; min-height: 0;
  font-family: var(--ngm-sans); font-size: .9375rem; color: var(--ngm-gray);
  line-height: 1.8; padding: 0 24px;
}
.ngm-faq-a > div { padding-bottom: 24px; }
.ngm-faq-a a { color: var(--ngm-sage-dk) !important; text-decoration: none !important; border-bottom: 1px solid rgba(62,85,56,.3); transition: border-color .15s; }
.ngm-faq-a a:hover { border-color: var(--ngm-sage-dk); }
/* Plain-text location email (not clickable) */
.ngm-loc-email, body .ngm-loc-email {
  font-family: var(--ngm-sans) !important; font-size: inherit !important;
  color: var(--ngm-gray) !important; word-break: break-all;
}
/* ── CTA ── */
.ngm-mtg-cta { background: var(--ngm-rose-lt); padding: 80px 48px; text-align: center; }
.ngm-mtg-cta-inner { max-width: 480px; margin: 0 auto; }
.ngm-mtg-cta p { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; margin-bottom: 28px; }
.ngm-mtg-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ── Responsive ── */
@media (max-width: 900px) {
  .ngm-mtg-hero { padding: 56px 28px 56px; }
  .ngm-mtg-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .ngm-mtg-hero-copy p { max-width: 100%; }
  .ngm-mtg-hero-photo { height: 240px; }
  .ngm-sec { padding: 60px 28px; }
  .ngm-groups-grid { grid-template-columns: 1fr; }
  .ngm-loc-grid { grid-template-columns: 1fr; gap: 32px; }
  .ngm-mtg-cta { padding: 60px 28px; }
  .ngm-groups-intro { max-width: 100% !important; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 560px) {
  .ngm-mtg-hero { padding: 44px 18px 44px; }
  .ngm-sec { padding: 48px 18px; }
  .ngm-mtg-cta { padding: 48px 18px; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ngm-btn, .ngm-arrow-link { transition: none; }
}
/* ── 12. UPCOMING GATHERINGS ──────────────────────────────────
   v6 CHANGE: the section is now STACKED, not a two-column grid.
   Heading row → WA gadget slot → CTA row. This is what lets the
   native WA Upcoming-events gadget sit where it actually lands
   instead of being orphaned beneath an empty grid cell.
────────────────────────────────────────────────────────── */
.ngm-upcoming-head { margin-bottom: 0; }
/* Intro copy under the calendar heading */
.ngm-upcoming-intro {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 620px;
  margin-top: 8px;
}
/* Centered "View the full calendar →" link (replaces the green box) */
.ngm-cal-link-wrap {
  text-align: center;
  margin-top: 8px;
}
.ngm-cal-link {
  font-size: 1rem;
}
.ngm-cal-note {
  font-family: var(--ngm-sans);
  font-size: .82rem;
  color: var(--ngm-gray-lt);
  line-height: 1.65;
  margin-top: 18px;
  padding: 0 2px;
}
/* ───── WA Upcoming-events gadget styling ─────
   CONFIRMED against the live markup (June 2026). The gadget div is:
     <div class="WaGadget WaGadgetUpcomingEvents ngm-wa-events upcomingEventsStyle001">
       <div class="gadgetStyleBody">
         <ul>
           <li>
             <span class="event-time-zone" style="display:none">…</span>
             <div class="title"><a href="…">Event name</a></div>
             <div class="date"><span …>Sat, June 20 …</span></div>
             <div class="location"><span>…</span></div>
           </li> …
   TWO things make these selectors work where the old ones failed:
   1. ngm-wa-events sits on the SAME element as upcomingEventsStyle001
      (not a parent), so they're chained with NO space:
        .ngm-wa-events.upcomingEventsStyle001
   2. The theme's orange/Lato rules are prefixed with `body`, which
      outranks a plain class. So every rule below is also prefixed
      with `body` to win on specificity (per the project's high-
      specificity override pattern). Keep the `body` prefix.
────────────────────────────────────────────────────────── */
/* Strip WA's default chrome, then make the gadget a WHITE CARD
   that sits on the linen band — so the event list reads as an
   intentional, embedded part of the calendar block instead of
   floating in a bare strip. The card matches the meeting cards
   above (white, rounded, soft shadow).
   The gadget also carries the LINEN band color itself + side
   padding, so even though it's a separate WA gadget between the
   heading and CTA blocks, the linen runs continuously through all
   three and the white card floats on it. No WA layout-row color
   change needed. */
body .ngm-wa-events.WaGadgetUpcomingEvents {
  background: var(--ngm-linen) !important;  /* continuous band */
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;

  padding: 28px 48px !important;
  font-family: var(--ngm-sans) !important;
}
body .ngm-wa-events .gadgetStyleBody {
  background: #fff !important;
  border: 1px solid var(--ngm-border) !important;
  border-radius: var(--ngm-radius-lg) !important;
  box-shadow: var(--ngm-sh) !important;

  padding: 12px 28px !important;
  margin: 0 auto !important;
  max-width: 1080px !important;    /* align with .ngm-con */
}
/* The list + rows */
body .ngm-wa-events.upcomingEventsStyle001 ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li {
  list-style: none !important;
  border-bottom: 1px solid var(--ngm-linen-dk) !important;
  padding: 18px 14px !important;
  margin: 0 !important;
  font-family: var(--ngm-sans) !important;
  /* rounded so the hover fill has soft corners, not sharp ones */
  border-radius: var(--ngm-radius) !important;
  transition: background-color .2s ease !important;
}
/* Whole row is clickable (click handler in the script). Hover
   the full row turns pale green with rounded corners — no lift, no shadow. */
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover {
  background-color: var(--ngm-sage-lt) !important;
  border-radius: var(--ngm-radius) !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li.last,
body .ngm-wa-events.upcomingEventsStyle001 ul li:last-child {
  border-bottom: none !important;   /* no rule under the final row */
}
/* Event title — serif charcoal, sage on hover, no underline.
   Mirrors the theme's own selector exactly so we beat #f48d1d.
   On row hover the title also goes sage (whole card is the link). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .title {
  margin: 0 0 8px !important;
  font-weight: 400 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a {
  font-family: var(--ngm-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--ngm-charcoal) !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover .title a,
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a:hover {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
}
/* Date — now matches the MEETING CARD date line: small muted gray
   sans, with a calendar icon to its left (via ::before SVG). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .date {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 0 !important;   /* no location below it anymore */
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date::before {
  content: "" !important;
  flex-shrink: 0 !important;
  width: 12px !important;
  height: 12px !important;
  background-color: var(--ngm-sage) !important;
  /* calendar glyph, masked so it takes the sage color above */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date,
body .ngm-wa-events.upcomingEventsStyle001 ul li .date span {
  font-family: var(--ngm-sans) !important;
  font-size: .8rem !important;          /* match .ngm-meta-row */
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--ngm-gray) !important;    /* match .ngm-meta-row */
}

body .ngm-wa-events.upcomingEventsStyle001 ul li .location {
  display: none !important;
}
/* ── Derived location tags (injected by the script at the bottom
   of this block). The script reads each event's .location text
   and adds a data-tag attribute on the <li>; CSS styles the chip. */
body .ngm-wa-events.upcomingEventsStyle001 ul li .ngm-evt-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--ngm-sans) !important;
  font-size: .65rem !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="zoom"]    .ngm-evt-tag { background:#EEEEFF !important; color:#3A46AF !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="hybrid"]  .ngm-evt-tag { background:#E3EFEF !important; color:#2A5A5A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="virtual"] .ngm-evt-tag { background:#F2EEF8 !important; color:#5A3A8A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="person"]  .ngm-evt-tag { background:var(--ngm-rose-lt) !important; color:#7A3E2E !important; }

/* ══════════════════════════════════════════════════════════════════
   PAGE — EVENTS
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   EVENTS-PAGE STYLES (hero, featured Retreat, CTA, gap-kill,
   button fixes, responsive)
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   WA GAP-KILLING (sections 19 + 20 — confirmed classes)
══════════════════════════════════════════════════════════ */
body .WaGadgetCustomHtml,
body .WaGadgetCustomHtml .gadgetStyleBody { margin: 0 !important; padding: 0 !important; }
body [class^="WaGadget"],
body .WaGadgetFirst { margin: 0 !important; }
body [class*="WaCustomLayoutContainer"] { margin-bottom: 0 !important; }
body .WaPlaceHolderContent > div,
body .WaPlaceHolderContent1 > div,
body .WaPlaceHolderContent2 > div,
body .WaPlaceHolderContent3 > div,
body .WaPlaceHolderContent4 > div { padding-top: 0 !important; padding-bottom: 0 !important; }
body .WaPlaceHolder > div,
body .WaPlaceHolderWide > div { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
/* ══════════════════════════════════════════════════════════
   BUTTON FIXES — force DM Sans + pill outline over WA theme
══════════════════════════════════════════════════════════ */
.ngm-btn, body a.ngm-btn, body a.ngm-btn:link, body a.ngm-btn:visited {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important;
  font-weight: 500 !important; letter-spacing: normal !important;
  text-transform: none !important; text-decoration: none !important;
}
.ngm-btn-sm, body a.ngm-btn-sm { font-size: .82rem !important; }
.ngm-btn-outline, body a.ngm-btn-outline { background: transparent; color: var(--ngm-sage-dk) !important; border: 1.5px solid var(--ngm-sage-dk) !important; }
.ngm-btn-outline:hover, body a.ngm-btn-outline:hover { background: var(--ngm-sage-dk) !important; color: #fff !important; }
.ngm-btn-outline-rose, body a.ngm-btn-outline-rose { background: transparent; color: var(--ngm-rose) !important; border: 1.5px solid var(--ngm-rose) !important; }
.ngm-btn-outline-rose:hover, body a.ngm-btn-outline-rose:hover { background: var(--ngm-rose) !important; color: #fff !important; }
.ngm-btn-white, body a.ngm-btn-white { background: #fff; color: var(--ngm-charcoal) !important; border: 1.5px solid #fff !important; }
.ngm-btn-white:hover, body a.ngm-btn-white:hover { background: var(--ngm-cream); }
.ngm-btn-fit { align-self: flex-start; }
/* ── Events Hero ── */
.ngm-ev-hero {
  background: var(--ngm-cream);
  padding: 80px 48px 72px;
  border-bottom: 1px solid var(--ngm-border);
}
.ngm-ev-hero-inner { max-width: 1080px; margin: 0 auto; }
.ngm-ev-hero p {
  font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray);
  line-height: 1.8; max-width: 620px; margin-top: 20px;
}
/* ── Featured Retreat (dark panel, like the homepage retreat) ── */
.ngm-retreat { background: var(--ngm-sage-dk); overflow: hidden; }
.ngm-retreat-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.ngm-retreat-photo { overflow: hidden; position: relative; }
.ngm-retreat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ngm-retreat-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 40%, var(--ngm-sage-dk) 92%);
  pointer-events: none;
}
.ngm-retreat-copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 72px 64px 72px 48px; color: #fff;
}
.ngm-retreat-eyebrow {
  display: block; font-family: var(--ngm-sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px;
}
.ngm-retreat h2 {
  font-family: var(--ngm-serif) !important; font-size: clamp(2.2rem,3.2vw,3.2rem);
  font-weight: 400; line-height: 1.1; color: #fff; text-transform: none !important; margin-bottom: 16px;
}
.ngm-retreat h2 em { font-style: italic; color: var(--ngm-rose) !important; font-family: var(--ngm-serif) !important; }
.ngm-retreat-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.ngm-retreat-meta-item { display: flex; align-items: center; gap: 6px; font-family: var(--ngm-sans); font-size: .82rem; color: rgba(255,255,255,.5); }
.ngm-retreat-body { font-family: var(--ngm-sans); font-size: 1rem; color: rgba(255,255,255,.7); line-height: 1.85; max-width: 420px; margin-bottom: 20px; }
.ngm-retreat-list { list-style: none; margin: 0 0 28px; padding: 0; max-width: 420px; }
.ngm-retreat-list li {
  font-family: var(--ngm-sans); font-size: .9375rem; color: rgba(255,255,255,.78);
  line-height: 1.6; padding-left: 26px; position: relative; margin-bottom: 10px;
}
.ngm-retreat-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 13px;
  background-color: var(--ngm-rose);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ── Events heading (intro above the gadget) ── */
.ngm-upcoming-head { margin-bottom: 0; }
.ngm-upcoming-intro {
  font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray);
  line-height: 1.8; max-width: 620px; margin-top: 8px;
}
/* ── CTA ── */
.ngm-ev-cta { background: var(--ngm-rose-lt); padding: 80px 48px; text-align: center; }
.ngm-ev-cta-inner { max-width: 520px; margin: 0 auto; }
.ngm-ev-cta p { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; margin-bottom: 28px; }
.ngm-ev-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ── Responsive ── */
@media (max-width: 900px) {
  .ngm-ev-hero { padding: 56px 28px 52px; }
  .ngm-ev-hero p { max-width: 100%; }
  .ngm-sec { padding: 60px 28px; }
  .ngm-retreat-inner { grid-template-columns: 1fr; min-height: 0; }
  .ngm-retreat-photo { height: 240px; }
  .ngm-retreat-photo::after { background: linear-gradient(to top, var(--ngm-sage-dk) 30%, transparent); }
  .ngm-retreat-copy { padding: 44px 28px; }
  .ngm-retreat-body, .ngm-retreat-list { max-width: 100%; }
  .ngm-ev-cta { padding: 60px 28px; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 560px) {
  .ngm-ev-hero { padding: 44px 18px 40px; }
  .ngm-sec { padding: 48px 18px; }
  .ngm-ev-cta { padding: 48px 18px; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ngm-btn, .ngm-arrow-link { transition: none; }
}
/* ══════════════════════════════════════════════════════════
   EVENT-TYPE CARDS ("Beyond the Retreat" grid)
   Photo on top (top half of the card), title + description below.
   No icons, no tags. Pale-green hover (matches site cards).
══════════════════════════════════════════════════════════ */
.ngm-etype-intro {
  font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray);
  line-height: 1.8; max-width: 620px; margin-bottom: 40px;
}
.ngm-etype-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}
.ngm-etype-card {
  background: #fff; border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ngm-etype-card:hover { background: var(--ngm-sage-lt); border-color: var(--ngm-sage-lt); }
/* Photo fills the top of the card */
.ngm-etype-photo {
  height: 190px; overflow: hidden; background: var(--ngm-sage-lt);
  flex-shrink: 0;
}
.ngm-etype-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ngm-etype-text { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ngm-etype-card h3 {
  font-family: var(--ngm-serif) !important; font-size: 1.25rem; font-weight: 400;
  color: var(--ngm-charcoal); text-transform: none !important; margin-bottom: 8px; line-height: 1.2;
}
.ngm-etype-card p {
  font-family: var(--ngm-sans); font-size: .875rem; color: var(--ngm-gray);
  line-height: 1.7; margin: 0;
}
@media (max-width: 560px) {
  .ngm-etype-grid { grid-template-columns: 1fr; }
  .ngm-etype-photo { height: 200px; }
}
/* ══════════════════════════════════════════════════════════
   FAQ ACCORDION (homepage card style)
══════════════════════════════════════════════════════════ */
.ngm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 960px;
  margin-top: 44px;
}
.ngm-faq-card {
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ngm-faq-card[open] {
  box-shadow: var(--ngm-sh);
  border-color: var(--ngm-sage-lt);
}
.ngm-faq-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-family: var(--ngm-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ngm-charcoal);
  line-height: 1.3;
  transition: color .2s ease;
}
.ngm-faq-card summary:hover { color: var(--ngm-sage-dk); }
.ngm-faq-card summary::-webkit-details-marker { display: none; }
/* Plus / minus indicator */
.ngm-faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform .3s ease;
}
.ngm-faq-icon::before,
.ngm-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ngm-sage-dk);
  border-radius: 2px;
}
.ngm-faq-icon::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.ngm-faq-icon::after  { left: 10px; top: 2px; width: 2px; height: 18px; transition: opacity .3s ease; }
.ngm-faq-card[open] .ngm-faq-icon { transform: rotate(180deg); }
.ngm-faq-card[open] .ngm-faq-icon::after { opacity: 0; }
/* Fluid open: the wrapper animates its row height from 0fr to 1fr */
.ngm-faq-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.ngm-faq-card[open] .ngm-faq-wrap {
  grid-template-rows: 1fr;
}
/* While closing (set by the FAQ script), force the row back to 0fr
   even though [open] is still present — this animates the collapse,
   then the script removes [open] when the transition ends. */
.ngm-faq-card.ngm-faq-closing .ngm-faq-wrap {
  grid-template-rows: 0fr;
}
.ngm-faq-a {
  overflow: hidden;          /* clip during the collapse/expand */
  min-height: 0;             /* FIX: grid items default to min-height:auto,
                                which blocks shrinking back to 0fr after the
                                first open — so the animation only ran once.
                                min-height:0 lets it collapse every time. */
  font-family: var(--ngm-sans);
  font-size: .9375rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  padding: 0 24px;           /* vertical padding added by inner div */
}
/* inner padding wrapper so the text doesn't get clipped at the seam */
.ngm-faq-a > div { padding-bottom: 24px; }
.ngm-faq-a a {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(62,85,56,.3);
  transition: border-color .15s;
}
.ngm-faq-a a:hover { border-color: var(--ngm-sage-dk); }
/* ── 12. UPCOMING GATHERINGS ──────────────────────────────────
   v6 CHANGE: the section is now STACKED, not a two-column grid.
   Heading row → WA gadget slot → CTA row. This is what lets the
   native WA Upcoming-events gadget sit where it actually lands
   instead of being orphaned beneath an empty grid cell.
────────────────────────────────────────────────────────── */
.ngm-upcoming-head { margin-bottom: 0; }
/* Intro copy under the calendar heading */
.ngm-upcoming-intro {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 620px;
  margin-top: 8px;
}
/* Centered "View the full calendar →" link (replaces the green box) */
.ngm-cal-link-wrap {
  text-align: center;
  margin-top: 8px;
}
.ngm-cal-link {
  font-size: 1rem;
}
.ngm-cal-note {
  font-family: var(--ngm-sans);
  font-size: .82rem;
  color: var(--ngm-gray-lt);
  line-height: 1.65;
  margin-top: 18px;
  padding: 0 2px;
}
/* ───── WA Upcoming-events gadget styling ─────
   CONFIRMED against the live markup (June 2026). The gadget div is:
     <div class="WaGadget WaGadgetUpcomingEvents ngm-wa-events upcomingEventsStyle001">
       <div class="gadgetStyleBody">
         <ul>
           <li>
             <span class="event-time-zone" style="display:none">…</span>
             <div class="title"><a href="…">Event name</a></div>
             <div class="date"><span …>Sat, June 20 …</span></div>
             <div class="location"><span>…</span></div>
           </li> …
   TWO things make these selectors work where the old ones failed:
   1. ngm-wa-events sits on the SAME element as upcomingEventsStyle001
      (not a parent), so they're chained with NO space:
        .ngm-wa-events.upcomingEventsStyle001
   2. The theme's orange/Lato rules are prefixed with `body`, which
      outranks a plain class. So every rule below is also prefixed
      with `body` to win on specificity (per the project's high-
      specificity override pattern). Keep the `body` prefix.
────────────────────────────────────────────────────────── */
/* Strip WA's default chrome, then make the gadget a WHITE CARD
   that sits on the linen band — so the event list reads as an
   intentional, embedded part of the calendar block instead of
   floating in a bare strip. The card matches the meeting cards
   above (white, rounded, soft shadow).
   The gadget also carries the LINEN band color itself + side
   padding, so even though it's a separate WA gadget between the
   heading and CTA blocks, the linen runs continuously through all
   three and the white card floats on it. No WA layout-row color
   change needed. */
body .ngm-wa-events.WaGadgetUpcomingEvents {
  background: var(--ngm-linen) !important;  /* continuous band */
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;

  padding: 28px 48px !important;
  font-family: var(--ngm-sans) !important;
}
body .ngm-wa-events .gadgetStyleBody {
  background: #fff !important;
  border: 1px solid var(--ngm-border) !important;
  border-radius: var(--ngm-radius-lg) !important;
  box-shadow: var(--ngm-sh) !important;

  padding: 12px 28px !important;
  margin: 0 auto !important;
  max-width: 1080px !important;    /* align with .ngm-con */
}
/* The list + rows */
body .ngm-wa-events.upcomingEventsStyle001 ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li {
  list-style: none !important;
  border-bottom: 1px solid var(--ngm-linen-dk) !important;
  padding: 18px 14px !important;
  margin: 0 !important;
  font-family: var(--ngm-sans) !important;
  /* rounded so the hover fill has soft corners, not sharp ones */
  border-radius: var(--ngm-radius) !important;
  transition: background-color .2s ease !important;
}
/* Whole row is clickable (click handler in the script). Hover
   the full row turns pale green with rounded corners — no lift, no shadow. */
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover {
  background-color: var(--ngm-sage-lt) !important;
  border-radius: var(--ngm-radius) !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li.last,
body .ngm-wa-events.upcomingEventsStyle001 ul li:last-child {
  border-bottom: none !important;   /* no rule under the final row */
}
/* Event title — serif charcoal, sage on hover, no underline.
   Mirrors the theme's own selector exactly so we beat #f48d1d.
   On row hover the title also goes sage (whole card is the link). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .title {
  margin: 0 0 8px !important;
  font-weight: 400 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a {
  font-family: var(--ngm-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--ngm-charcoal) !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover .title a,
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a:hover {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
}
/* Date — now matches the MEETING CARD date line: small muted gray
   sans, with a calendar icon to its left (via ::before SVG). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .date {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 0 !important;   /* no location below it anymore */
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date::before {
  content: "" !important;
  flex-shrink: 0 !important;
  width: 12px !important;
  height: 12px !important;
  background-color: var(--ngm-sage) !important;
  /* calendar glyph, masked so it takes the sage color above */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date,
body .ngm-wa-events.upcomingEventsStyle001 ul li .date span {
  font-family: var(--ngm-sans) !important;
  font-size: .8rem !important;          /* match .ngm-meta-row */
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--ngm-gray) !important;    /* match .ngm-meta-row */
}

body .ngm-wa-events.upcomingEventsStyle001 ul li .location {
  display: none !important;
}
/* ── Derived location tags (injected by the script at the bottom
   of this block). The script reads each event's .location text
   and adds a data-tag attribute on the <li>; CSS styles the chip. */
body .ngm-wa-events.upcomingEventsStyle001 ul li .ngm-evt-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--ngm-sans) !important;
  font-size: .65rem !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="zoom"]    .ngm-evt-tag { background:#EEEEFF !important; color:#3A46AF !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="hybrid"]  .ngm-evt-tag { background:#E3EFEF !important; color:#2A5A5A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="virtual"] .ngm-evt-tag { background:#F2EEF8 !important; color:#5A3A8A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="person"]  .ngm-evt-tag { background:var(--ngm-rose-lt) !important; color:#7A3E2E !important; }

/* ══════════════════════════════════════════════════════════════════
   PAGE — JOIN
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   JOIN-PAGE STYLES (hero, pillars, included, pricing, CTA)
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   WA GAP-KILLING + BUTTON FIXES
══════════════════════════════════════════════════════════ */
body .WaGadgetCustomHtml,
body .WaGadgetCustomHtml .gadgetStyleBody { margin: 0 !important; padding: 0 !important; }
body [class^="WaGadget"], body .WaGadgetFirst { margin: 0 !important; }
body [class*="WaCustomLayoutContainer"] { margin-bottom: 0 !important; }
body .WaPlaceHolderContent > div,
body .WaPlaceHolderContent1 > div,
body .WaPlaceHolderContent2 > div,
body .WaPlaceHolderContent3 > div,
body .WaPlaceHolderContent4 > div { padding-top: 0 !important; padding-bottom: 0 !important; }
.ngm-btn, body a.ngm-btn, body a.ngm-btn:link, body a.ngm-btn:visited {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important;
  font-weight: 500 !important; letter-spacing: normal !important;
  text-transform: none !important; text-decoration: none !important;
}
.ngm-btn-lg, body a.ngm-btn-lg { font-size: 1rem !important; padding: 15px 36px !important; }
.ngm-btn-outline, body a.ngm-btn-outline { background: transparent; color: var(--ngm-sage-dk) !important; border: 1.5px solid var(--ngm-sage-dk) !important; }
.ngm-btn-outline:hover, body a.ngm-btn-outline:hover { background: var(--ngm-sage-dk) !important; color: #fff !important; }
/* ── Hero ── */
.ngm-join-hero { background: var(--ngm-cream); padding: 80px 48px 72px; border-bottom: 1px solid var(--ngm-border); }
.ngm-join-hero-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.ngm-join-hero-copy .ngm-eyebrow { margin-bottom: 14px; }
.ngm-join-hero-copy .ngm-h1 { margin-bottom: 22px; }
.ngm-join-hero-copy p { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; max-width: 460px; margin-bottom: 18px; }
.ngm-join-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.ngm-join-hero-photo { height: 400px; overflow: hidden; border-radius: var(--ngm-radius-lg); box-shadow: var(--ngm-shx); }
.ngm-join-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Why join (3 cards) ── */
.ngm-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.ngm-pillar {
  text-align: left;
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius-lg);
  padding: 30px 28px;
  transition: background-color .22s ease, border-color .22s ease;
}
.ngm-pillar:hover { background: var(--ngm-sage-lt); border-color: var(--ngm-sage-lt); }
.ngm-pillar-icon { width: 52px; height: 52px; background: var(--ngm-sage-lt); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ngm-pillar:hover .ngm-pillar-icon { background: var(--ngm-linen); }
.ngm-pillar h3 { font-family: var(--ngm-serif) !important; font-size: 1.35rem; font-weight: 400; color: var(--ngm-charcoal); text-transform: none !important; margin-bottom: 8px; line-height: 1.2; }
.ngm-pillar p { font-family: var(--ngm-sans); font-size: .9375rem; color: var(--ngm-gray); line-height: 1.75; margin: 0; }
/* ── What's included ── */
.ngm-incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; margin-top: 40px; }
.ngm-incl-item { display: flex; gap: 14px; align-items: flex-start; }
.ngm-incl-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ngm-sage-lt); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.ngm-incl-text h4 { font-family: var(--ngm-sans); font-size: .95rem; font-weight: 600; color: var(--ngm-charcoal); margin-bottom: 2px; }
.ngm-incl-text p { font-family: var(--ngm-sans); font-size: .875rem; color: var(--ngm-gray); line-height: 1.65; margin: 0; }
/* ── Pricing card (richer) ──
   EDIT NOTES: bumped the card up in size — wider max-width (560px),
   more generous padding, larger price figure and checklist text —
   so it carries more weight near the top of the page. ↓ EDIT */
.ngm-price-wrap { display: flex; justify-content: center; margin-top: 44px; }
.ngm-price-card {
  background: #fff; border: 1px solid var(--ngm-border); border-radius: var(--ngm-radius-lg);
  box-shadow: var(--ngm-shm); padding: 52px 56px; text-align: center; max-width: 560px; width: 100%;
}
.ngm-price-badge { display: inline-block; font-family: var(--ngm-sans); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ngm-sage-dk); background: var(--ngm-sage-lt); padding: 6px 16px; border-radius: 100px; margin-bottom: 20px; }
.ngm-price-amt { font-family: var(--ngm-serif); font-size: 5rem; font-weight: 400; color: var(--ngm-charcoal); line-height: 1; }
.ngm-price-amt sup { font-size: 2rem; vertical-align: super; color: var(--ngm-gray); }
.ngm-price-per { font-family: var(--ngm-sans); font-size: 1rem; color: var(--ngm-gray-lt); margin-top: 8px; }
/* Monthly-cost breakdown */
.ngm-price-month { font-family: var(--ngm-sans); font-size: .88rem; color: var(--ngm-sage-dk); font-weight: 500; margin-top: 12px; }
/* No-risk / first-meeting-free callout */
.ngm-price-risk {
  font-family: var(--ngm-sans); font-size: .9rem; color: var(--ngm-rose-dk);
  background: var(--ngm-rose-lt); border-radius: 100px; padding: 8px 18px;
  display: inline-block; margin-top: 20px; font-weight: 500;
}
/* In-card "what's included" checklist */
.ngm-price-list { list-style: none; margin: 28px 0 0; padding: 28px 0 0; border-top: 1px solid var(--ngm-border); text-align: left; }
.ngm-price-list li {
  font-family: var(--ngm-sans); font-size: .95rem; color: var(--ngm-gray);
  line-height: 1.5; padding: 9px 0 9px 32px; position: relative;
}
.ngm-price-list li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 17px; height: 17px;
  background-color: var(--ngm-sage);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* In-card CTA: full-width pill, label centered. ↓ EDIT */
.ngm-price-card .ngm-btn { margin-top: 28px; width: 100%; justify-content: center; }
/* Trust signals row under the button */
.ngm-price-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 20px; }
.ngm-price-trust span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ngm-sans); font-size: .8rem; color: var(--ngm-gray-lt); }
.ngm-price-trust svg { flex-shrink: 0; }
.ngm-price-note { font-family: var(--ngm-sans); font-size: .85rem; color: var(--ngm-gray-lt); line-height: 1.6; margin-top: 18px; }
/* ── CTA ── */
.ngm-join-cta { background: var(--ngm-rose-lt); padding: 80px 48px; text-align: center; }
.ngm-join-cta-inner { max-width: 520px; margin: 0 auto; }
.ngm-join-cta p { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; margin-bottom: 28px; }
/* ── Responsive ── */
@media (max-width: 900px) {
  .ngm-join-hero { padding: 56px 28px; }
  .ngm-join-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .ngm-join-hero-copy p { max-width: 100%; }
  .ngm-join-hero-photo { height: 260px; order: -1; }
  .ngm-sec { padding: 60px 28px; }
  .ngm-pillars { grid-template-columns: 1fr; gap: 32px; }
  .ngm-incl-grid { grid-template-columns: 1fr; }
  .ngm-join-cta { padding: 60px 28px; }
}
@media (max-width: 560px) {
  .ngm-join-hero { padding: 44px 18px; }
  .ngm-sec { padding: 48px 18px; }
  .ngm-price-card { padding: 36px 24px; }
  .ngm-join-cta { padding: 48px 18px; }
}
@media (prefers-reduced-motion: reduce) { .ngm-btn { transition: none; } }
/* ══════════════════════════════════════════════════════════
   FAQ ACCORDION (homepage card style)
══════════════════════════════════════════════════════════ */
.ngm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 960px;
  margin-top: 44px;
}
.ngm-faq-card {
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ngm-faq-card[open] {
  box-shadow: var(--ngm-sh);
  border-color: var(--ngm-sage-lt);
}
.ngm-faq-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-family: var(--ngm-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ngm-charcoal);
  line-height: 1.3;
  transition: color .2s ease;
}
.ngm-faq-card summary:hover { color: var(--ngm-sage-dk); }
.ngm-faq-card summary::-webkit-details-marker { display: none; }
/* Plus / minus indicator */
.ngm-faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform .3s ease;
}
.ngm-faq-icon::before,
.ngm-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ngm-sage-dk);
  border-radius: 2px;
}
.ngm-faq-icon::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.ngm-faq-icon::after  { left: 10px; top: 2px; width: 2px; height: 18px; transition: opacity .3s ease; }
.ngm-faq-card[open] .ngm-faq-icon { transform: rotate(180deg); }
.ngm-faq-card[open] .ngm-faq-icon::after { opacity: 0; }
/* Fluid open: the wrapper animates its row height from 0fr to 1fr */
.ngm-faq-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.ngm-faq-card[open] .ngm-faq-wrap {
  grid-template-rows: 1fr;
}
/* While closing (set by the FAQ script), force the row back to 0fr
   even though [open] is still present — this animates the collapse,
   then the script removes [open] when the transition ends. */
.ngm-faq-card.ngm-faq-closing .ngm-faq-wrap {
  grid-template-rows: 0fr;
}
.ngm-faq-a {
  overflow: hidden;          /* clip during the collapse/expand */
  min-height: 0;             /* FIX: grid items default to min-height:auto,
                                which blocks shrinking back to 0fr after the
                                first open — so the animation only ran once.
                                min-height:0 lets it collapse every time. */
  font-family: var(--ngm-sans);
  font-size: .9375rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  padding: 0 24px;           /* vertical padding added by inner div */
}
/* inner padding wrapper so the text doesn't get clipped at the seam */
.ngm-faq-a > div { padding-bottom: 24px; }
.ngm-faq-a a {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(62,85,56,.3);
  transition: border-color .15s;
}
.ngm-faq-a a:hover { border-color: var(--ngm-sage-dk); }

/* ══════════════════════════════════════════════════════════════════
   PAGE — STITCH-IN
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   STITCH-INS PAGE STYLES (hero, group cards, CTA, responsive)
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   WA GAP-KILLING + BUTTON FIXES
══════════════════════════════════════════════════════════ */
body .WaGadgetCustomHtml, body .WaGadgetCustomHtml .gadgetStyleBody { margin: 0 !important; padding: 0 !important; }
body [class^="WaGadget"], body .WaGadgetFirst { margin: 0 !important; }
body [class*="WaCustomLayoutContainer"] { margin-bottom: 0 !important; }
body .WaPlaceHolderContent > div, body .WaPlaceHolderContent1 > div, body .WaPlaceHolderContent2 > div,
body .WaPlaceHolderContent3 > div, body .WaPlaceHolderContent4 > div { padding-top: 0 !important; padding-bottom: 0 !important; }
.ngm-btn, body a.ngm-btn, body a.ngm-btn:link, body a.ngm-btn:visited {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important; font-weight: 500 !important;
  letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important;
}
.ngm-btn-outline, body a.ngm-btn-outline { background: transparent; color: var(--ngm-sage-dk) !important; border: 1.5px solid var(--ngm-sage-dk) !important; }
.ngm-btn-outline:hover, body a.ngm-btn-outline:hover { background: var(--ngm-sage-dk) !important; color: #fff !important; }
.ngm-btn-outline-rose, body a.ngm-btn-outline-rose { background: transparent; color: var(--ngm-rose) !important; border: 1.5px solid var(--ngm-rose) !important; }
.ngm-btn-outline-rose:hover, body a.ngm-btn-outline-rose:hover { background: var(--ngm-rose) !important; color: #fff !important; }
/* ── Breadcrumb ── */
.ngm-crumb { font-family: var(--ngm-sans); font-size: .8rem; color: var(--ngm-gray-lt); margin-bottom: 14px; }
.ngm-crumb a { color: var(--ngm-sage-dk) !important; text-decoration: none !important; border-bottom: 1px solid rgba(62,85,56,.3); }
.ngm-crumb a:hover { border-color: var(--ngm-sage-dk); }
/* ── Hero ── */
.ngm-si-hero { background: var(--ngm-cream); padding: 72px 48px 64px; border-bottom: 1px solid var(--ngm-border); }
.ngm-si-hero-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.ngm-si-hero-copy .ngm-eyebrow { margin-bottom: 12px; }
.ngm-si-hero-copy .ngm-h1 { margin-bottom: 20px; }
.ngm-si-hero-copy p { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; max-width: 460px; margin-bottom: 16px; }
.ngm-si-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ngm-si-hero-photo { height: 380px; overflow: hidden; border-radius: var(--ngm-radius-lg); box-shadow: var(--ngm-shx); }
.ngm-si-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Two group cards ── */
.ngm-si-intro { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; max-width: 640px; margin-bottom: 40px; }
.ngm-si-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ngm-si-card {
  background: #fff; border: 1px solid var(--ngm-border); border-radius: var(--ngm-radius-lg);
  padding: 30px 30px 28px; display: flex; flex-direction: column;
  transition: background-color .22s ease, border-color .22s ease;
}
.ngm-si-card:hover { background: var(--ngm-sage-lt); border-color: var(--ngm-sage-lt); }
.ngm-si-badge { display: inline-block; font-family: var(--ngm-sans); font-size: .64rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; background: var(--ngm-sage-lt); color: var(--ngm-sage-dk); padding: 4px 11px; border-radius: 100px; margin-bottom: 14px; width: fit-content; }
.ngm-si-card h3 { font-family: var(--ngm-serif) !important; font-size: 1.5rem; font-weight: 400; color: var(--ngm-charcoal); text-transform: none !important; margin-bottom: 6px; line-height: 1.2; }
.ngm-si-when { font-family: var(--ngm-sans); font-size: .85rem; font-weight: 500; color: var(--ngm-sage-dk); margin-bottom: 14px; }
.ngm-si-card p { font-family: var(--ngm-sans); font-size: .9rem; color: var(--ngm-gray); line-height: 1.7; flex: 1; margin-bottom: 16px; }
.ngm-si-meta { list-style: none; margin: 0; padding: 0; }
.ngm-si-meta li { font-family: var(--ngm-sans); font-size: .85rem; color: var(--ngm-gray); line-height: 1.5; padding: 5px 0 5px 24px; position: relative; }
.ngm-si-meta li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px;
  background-color: var(--ngm-sage);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ── plain-text email ── */
.ngm-loc-email, body .ngm-loc-email { font-family: var(--ngm-sans) !important; font-size: inherit !important; color: var(--ngm-sage-dk) !important; font-weight: 500; }
/* ── CTA ── */
.ngm-si-cta { background: var(--ngm-rose-lt); padding: 76px 48px; text-align: center; }
.ngm-si-cta-inner { max-width: 500px; margin: 0 auto; }
.ngm-si-cta p { font-family: var(--ngm-sans); font-size: 1.0625rem; color: var(--ngm-gray); line-height: 1.8; margin-bottom: 28px; }
.ngm-si-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ── Responsive ── */
@media (max-width: 900px) {
  .ngm-si-hero { padding: 52px 28px; }
  .ngm-si-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .ngm-si-hero-copy p { max-width: 100%; }
  .ngm-si-hero-photo { height: 240px; order: -1; }
  .ngm-sec { padding: 56px 28px; }
  .ngm-si-grid { grid-template-columns: 1fr; }
  .ngm-si-intro { max-width: 100%; }
  .ngm-si-cta { padding: 56px 28px; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 560px) {
  .ngm-si-hero { padding: 40px 18px; }
  .ngm-sec { padding: 44px 18px; }
  .ngm-si-cta { padding: 44px 18px; }
  body .ngm-wa-events.WaGadgetUpcomingEvents { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (prefers-reduced-motion: reduce) { .ngm-btn, .ngm-arrow-link { transition: none; } }
/* ══════════════════════════════════════════════════════════
   FAQ ACCORDION (homepage card style)
══════════════════════════════════════════════════════════ */
.ngm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 960px;
  margin-top: 44px;
}
.ngm-faq-card {
  background: #fff;
  border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ngm-faq-card[open] {
  box-shadow: var(--ngm-sh);
  border-color: var(--ngm-sage-lt);
}
.ngm-faq-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-family: var(--ngm-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ngm-charcoal);
  line-height: 1.3;
  transition: color .2s ease;
}
.ngm-faq-card summary:hover { color: var(--ngm-sage-dk); }
.ngm-faq-card summary::-webkit-details-marker { display: none; }
/* Plus / minus indicator */
.ngm-faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform .3s ease;
}
.ngm-faq-icon::before,
.ngm-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ngm-sage-dk);
  border-radius: 2px;
}
.ngm-faq-icon::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.ngm-faq-icon::after  { left: 10px; top: 2px; width: 2px; height: 18px; transition: opacity .3s ease; }
.ngm-faq-card[open] .ngm-faq-icon { transform: rotate(180deg); }
.ngm-faq-card[open] .ngm-faq-icon::after { opacity: 0; }
/* Fluid open: the wrapper animates its row height from 0fr to 1fr */
.ngm-faq-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.ngm-faq-card[open] .ngm-faq-wrap {
  grid-template-rows: 1fr;
}
/* While closing (set by the FAQ script), force the row back to 0fr
   even though [open] is still present — this animates the collapse,
   then the script removes [open] when the transition ends. */
.ngm-faq-card.ngm-faq-closing .ngm-faq-wrap {
  grid-template-rows: 0fr;
}
.ngm-faq-a {
  overflow: hidden;          /* clip during the collapse/expand */
  min-height: 0;             /* FIX: grid items default to min-height:auto,
                                which blocks shrinking back to 0fr after the
                                first open — so the animation only ran once.
                                min-height:0 lets it collapse every time. */
  font-family: var(--ngm-sans);
  font-size: .9375rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  padding: 0 24px;           /* vertical padding added by inner div */
}
/* inner padding wrapper so the text doesn't get clipped at the seam */
.ngm-faq-a > div { padding-bottom: 24px; }
.ngm-faq-a a {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(62,85,56,.3);
  transition: border-color .15s;
}
.ngm-faq-a a:hover { border-color: var(--ngm-sage-dk); }
/* ── 12. UPCOMING GATHERINGS ──────────────────────────────────
   v6 CHANGE: the section is now STACKED, not a two-column grid.
   Heading row → WA gadget slot → CTA row. This is what lets the
   native WA Upcoming-events gadget sit where it actually lands
   instead of being orphaned beneath an empty grid cell.
────────────────────────────────────────────────────────── */
.ngm-upcoming-head { margin-bottom: 0; }
/* Intro copy under the calendar heading */
.ngm-upcoming-intro {
  font-family: var(--ngm-sans);
  font-size: 1.0625rem;
  color: var(--ngm-gray);
  line-height: 1.8;
  max-width: 620px;
  margin-top: 8px;
}
/* Centered "View the full calendar →" link (replaces the green box) */
.ngm-cal-link-wrap {
  text-align: center;
  margin-top: 8px;
}
.ngm-cal-link {
  font-size: 1rem;
}
.ngm-cal-note {
  font-family: var(--ngm-sans);
  font-size: .82rem;
  color: var(--ngm-gray-lt);
  line-height: 1.65;
  margin-top: 18px;
  padding: 0 2px;
}
/* ───── WA Upcoming-events gadget styling ─────
   CONFIRMED against the live markup (June 2026). The gadget div is:
     <div class="WaGadget WaGadgetUpcomingEvents ngm-wa-events upcomingEventsStyle001">
       <div class="gadgetStyleBody">
         <ul>
           <li>
             <span class="event-time-zone" style="display:none">…</span>
             <div class="title"><a href="…">Event name</a></div>
             <div class="date"><span …>Sat, June 20 …</span></div>
             <div class="location"><span>…</span></div>
           </li> …
   TWO things make these selectors work where the old ones failed:
   1. ngm-wa-events sits on the SAME element as upcomingEventsStyle001
      (not a parent), so they're chained with NO space:
        .ngm-wa-events.upcomingEventsStyle001
   2. The theme's orange/Lato rules are prefixed with `body`, which
      outranks a plain class. So every rule below is also prefixed
      with `body` to win on specificity (per the project's high-
      specificity override pattern). Keep the `body` prefix.
────────────────────────────────────────────────────────── */
/* Strip WA's default chrome, then make the gadget a WHITE CARD
   that sits on the linen band — so the event list reads as an
   intentional, embedded part of the calendar block instead of
   floating in a bare strip. The card matches the meeting cards
   above (white, rounded, soft shadow).
   The gadget also carries the LINEN band color itself + side
   padding, so even though it's a separate WA gadget between the
   heading and CTA blocks, the linen runs continuously through all
   three and the white card floats on it. No WA layout-row color
   change needed. */
body .ngm-wa-events.WaGadgetUpcomingEvents {
  background: var(--ngm-linen) !important;  /* continuous band */
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;

  padding: 28px 48px !important;
  font-family: var(--ngm-sans) !important;
}
body .ngm-wa-events .gadgetStyleBody {
  background: #fff !important;
  border: 1px solid var(--ngm-border) !important;
  border-radius: var(--ngm-radius-lg) !important;
  box-shadow: var(--ngm-sh) !important;

  padding: 12px 28px !important;
  margin: 0 auto !important;
  max-width: 1080px !important;    /* align with .ngm-con */
}
/* The list + rows */
body .ngm-wa-events.upcomingEventsStyle001 ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li {
  list-style: none !important;
  border-bottom: 1px solid var(--ngm-linen-dk) !important;
  padding: 18px 14px !important;
  margin: 0 !important;
  font-family: var(--ngm-sans) !important;
  /* rounded so the hover fill has soft corners, not sharp ones */
  border-radius: var(--ngm-radius) !important;
  transition: background-color .2s ease !important;
}
/* Whole row is clickable (click handler in the script). Hover
   the full row turns pale green with rounded corners — no lift, no shadow. */
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover {
  background-color: var(--ngm-sage-lt) !important;
  border-radius: var(--ngm-radius) !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li.last,
body .ngm-wa-events.upcomingEventsStyle001 ul li:last-child {
  border-bottom: none !important;   /* no rule under the final row */
}
/* Event title — serif charcoal, sage on hover, no underline.
   Mirrors the theme's own selector exactly so we beat #f48d1d.
   On row hover the title also goes sage (whole card is the link). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .title {
  margin: 0 0 8px !important;
  font-weight: 400 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a {
  font-family: var(--ngm-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--ngm-charcoal) !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover .title a,
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a:hover {
  color: var(--ngm-sage-dk) !important;
  text-decoration: none !important;
}
/* Date — now matches the MEETING CARD date line: small muted gray
   sans, with a calendar icon to its left (via ::before SVG). */
body .ngm-wa-events.upcomingEventsStyle001 ul li .date {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 0 !important;   /* no location below it anymore */
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date::before {
  content: "" !important;
  flex-shrink: 0 !important;
  width: 12px !important;
  height: 12px !important;
  background-color: var(--ngm-sage) !important;
  /* calendar glyph, masked so it takes the sage color above */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date,
body .ngm-wa-events.upcomingEventsStyle001 ul li .date span {
  font-family: var(--ngm-sans) !important;
  font-size: .8rem !important;          /* match .ngm-meta-row */
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--ngm-gray) !important;    /* match .ngm-meta-row */
}

body .ngm-wa-events.upcomingEventsStyle001 ul li .location {
  display: none !important;
}
/* ── Derived location tags (injected by the script at the bottom
   of this block). The script reads each event's .location text
   and adds a data-tag attribute on the <li>; CSS styles the chip. */
body .ngm-wa-events.upcomingEventsStyle001 ul li .ngm-evt-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--ngm-sans) !important;
  font-size: .65rem !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="zoom"]    .ngm-evt-tag { background:#EEEEFF !important; color:#3A46AF !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="hybrid"]  .ngm-evt-tag { background:#E3EFEF !important; color:#2A5A5A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="virtual"] .ngm-evt-tag { background:#F2EEF8 !important; color:#5A3A8A !important; }
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="person"]  .ngm-evt-tag { background:var(--ngm-rose-lt) !important; color:#7A3E2E !important; }

/* ══════════════════════════════════════════════════════════════════
   PAGE — MEMBER HUB
══════════════════════════════════════════════════════════════════ */
/* ── Welcome band ── */
.ngm-hub-hero {
  background: var(--ngm-cream);
  padding: 92px 48px 60px;
  border-bottom: 1px solid var(--ngm-border);
}
.ngm-hub-hero-inner { max-width: 1080px; margin: 0 auto; }
/* ── Upcoming-events intro (sits right above the native gadget) ── */
.ngm-hub-events {
  background: var(--ngm-linen);
  padding: 72px 48px 40px;
}
.ngm-hub-events-inner { max-width: 1080px; margin: 0 auto; }
.ngm-hub-events-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ngm-hub-events .ngm-lead { margin-top: 6px; }
/* ── Skin for the native WA "Upcoming events" gadget ──
   The gadget is given the CSS class  ngm-wa-events  in the WA editor
   (see 02-wa-gadget.txt). WA's theme uses very high-specificity anchor
   rules, so we mirror that with a `body` prefix to win. This is light
   container styling only — it centers the list, sets the font, and adds
   breathing room. If you want the full event-card look from the Events
   page, copy that page's `.ngm-wa-events` section over the top of this. */
body .ngm-wa-events {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px 84px;
  background: var(--ngm-linen);
}
body .ngm-wa-events,
body .ngm-wa-events * {
  font-family: var(--ngm-sans) !important;
  color: var(--ngm-charcoal);
}
body .ngm-wa-events a { color: var(--ngm-sage-dk) !important; }
/* ── Responsive ── */
@media (max-width: 640px) {
  .ngm-hub-hero { padding: 72px 22px 48px; }
  .ngm-hub-events { padding: 56px 22px 32px; }
  body .ngm-wa-events { padding: 0 22px 64px; }
}

/* --- member-hub quick-link cards (from 03-bottom) --- */
.ngm-hub-links {
  background: var(--ngm-cream);
  padding: 84px 48px;
  border-top: 1px solid var(--ngm-border);
}
.ngm-hub-links-inner { max-width: 1080px; margin: 0 auto; }
.ngm-hub-links .ngm-eyebrow {
  display: block; font-family: var(--ngm-sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ngm-sage); margin-bottom: 10px;
}
.ngm-hub-links h2 {
  font-family: var(--ngm-serif); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 400;
  line-height: 1.12; color: var(--ngm-charcoal); text-transform: none; margin: 0 0 40px;
}
.ngm-hub-links h2 em { font-style: italic; color: var(--ngm-rose); }
.ngm-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
/* Each card is a link (whole card is clickable) */
a.ngm-hub-card {
  display: flex; flex-direction: column;
  padding: 30px 28px; background: #fff; border: 1px solid var(--ngm-border);
  border-radius: var(--ngm-radius-lg); text-decoration: none;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
a.ngm-hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--ngm-sage-lt);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.ngm-hub-card-icon {
  width: 46px; height: 46px; background: var(--ngm-sage-lt); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0;
}
.ngm-hub-card-icon svg { width: 22px; height: 22px; stroke: var(--ngm-sage-dk); }
.ngm-hub-card-title {
  font-family: var(--ngm-serif); font-size: 1.35rem; font-weight: 400; color: var(--ngm-charcoal);
  margin: 0 0 8px; line-height: 1.2;
}
.ngm-hub-card-desc {
  font-family: var(--ngm-sans); font-size: .9rem; color: var(--ngm-gray); line-height: 1.65; margin: 0 0 16px;
}
.ngm-hub-card-cta {
  margin-top: auto; font-family: var(--ngm-sans); font-size: .875rem; font-weight: 500;
  color: var(--ngm-sage-dk); display: inline-flex; align-items: center; gap: 6px;
  transition: gap .18s ease;
}
a.ngm-hub-card:hover .ngm-hub-card-cta { gap: 10px; }
/* Help strip */
.ngm-hub-help {
  margin-top: 40px; padding: 26px 30px; background: var(--ngm-sage-lt);
  border-radius: var(--ngm-radius-lg); display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ngm-hub-help p {
  font-family: var(--ngm-sans); font-size: .95rem; color: var(--ngm-charcoal); margin: 0; line-height: 1.6;
}
.ngm-hub-help a.ngm-hub-help-link {
  font-family: var(--ngm-sans); font-size: .9rem; font-weight: 500; color: #fff;
  background: var(--ngm-sage-dk); border-radius: 100px; padding: 11px 24px; text-decoration: none;
  white-space: nowrap; transition: background .2s ease;
}
.ngm-hub-help a.ngm-hub-help-link:hover { background: var(--ngm-sage); }
@media (max-width: 640px) {
  .ngm-hub-links { padding: 60px 22px; }
  .ngm-hub-help { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════
   LOGIN PAGE — SPLIT LAYOUT
   ──────────────────────────────────────────────────────────────────
   Left  = branded sage hero (markup from system-pages/login/01-top).
   Right = the native WA login form card (skinned further below) with
           the "not a member?" join line (03-bottom) beneath it.

   How the split works: the hero is FIXED to the left half of the
   viewport (below the fixed header); the WA form gadget + join line
   are pushed into the right half. Everything is scoped to
   body.ngm-login-page, so no other page is touched. Under 861px it
   collapses to a single stacked column.

   ── If the split needs nudging on the live site, tune these two: ──
     --ngm-hero-w : width of the left panel        (default 50vw)
     --ngm-head-h : fixed-header height to clear    (default 86px)
   To fall back to the old centred card, delete the "@media(min-width:861px)"
   block below — the hero then just stacks above the form.
══════════════════════════════════════════════════════════════════ */
body.ngm-login-page{ --ngm-hero-w:50vw; --ngm-head-h:86px; background:var(--ngm-cream); overflow-x:hidden; }

/* ── Hero visuals (also render standalone in 01-top.html preview) ── */
.ngm-login-hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 15% 0%,#4a6342 0%,var(--ngm-sage-dk) 55%,#33472e 100%);
  color:var(--ngm-cream);
  padding:56px clamp(24px,4vw,68px);
}
.ngm-login-hero::before{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#fff 1.2px,transparent 0);
  background-size:26px 26px;
}
.ngm-lh-glow{
  position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(184,114,96,.30),transparent 62%);
  right:-160px; top:-120px;
}
.ngm-login-hero-inner{ position:relative; max-width:440px; }
.ngm-login-mark{ display:block; width:52px; height:57px; margin-bottom:30px; }
/* NOTE: body-prefixed + !important because WA's theme (casefile_guardian)
   uses very high-specificity heading rules that otherwise recolour this h1
   purple and force UPPERCASE — see docs/wa-notes.md. */
body .ngm-login-hero .ngm-lh-eyebrow{ display:block; font-family:var(--ngm-sans)!important; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase!important; color:#D8B7AC!important; margin-bottom:18px; }
body .ngm-login-hero .ngm-lh-title{ font-family:var(--ngm-serif)!important; font-weight:500; font-size:clamp(2.3rem,3.6vw,3.4rem); line-height:1.08; color:var(--ngm-cream)!important; text-transform:none!important; letter-spacing:.01em; margin-bottom:20px; }
body .ngm-login-hero .ngm-lh-title em{ font-style:italic!important; color:#E7C0B4!important; text-transform:none!important; }
body .ngm-login-hero .ngm-lh-sub{ font-family:var(--ngm-sans)!important; font-size:1.04rem!important; line-height:1.75!important; color:rgba(250,247,242,.82)!important; text-transform:none!important; margin-bottom:38px; max-width:400px; }
body .ngm-login-hero .ngm-lh-list li{ color:rgba(250,247,242,.92)!important; text-transform:none!important; }
.ngm-lh-list{ list-style:none; display:flex; flex-direction:column; gap:16px; margin:0; padding:0; }
.ngm-lh-list li{ display:flex; align-items:center; gap:14px; font-family:var(--ngm-sans); font-size:.98rem; color:rgba(250,247,242,.92); }
.ngm-lh-tick{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(231,192,180,.5); display:flex; align-items:center; justify-content:center; }
.ngm-lh-tick svg{ width:13px; height:13px; fill:none; stroke:#E7C0B4; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ── Join line beneath the form (03-bottom) ── */
.ngm-login-foot{ background:transparent; padding:6px 24px 32px; text-align:center; }
.ngm-login-foot-inner{ max-width:420px; margin:0 auto; padding-top:8px; }
.ngm-login-foot p{ font-family:var(--ngm-sans); font-size:.95rem; color:var(--ngm-gray); line-height:1.7; margin:0; }
.ngm-login-foot a{ font-family:var(--ngm-sans); font-weight:500; color:var(--ngm-sage-dk); text-decoration:none; border-bottom:1px solid rgba(62,85,56,.3); padding-bottom:1px; transition:border-color .18s; }
.ngm-login-foot a:hover{ border-color:var(--ngm-sage-dk); }

/* ── Give the form gadget breathing room; full-width block so the card
   always centres (via .loginContainer/.loginPanel margin:auto) ── */
body.ngm-login-page .WaGadgetLoginForm{ display:block; width:100%; box-sizing:border-box; padding:44px 20px 20px; }

/* ── TWO-COLUMN SPLIT ──────────────────────────────────────────────────
   Structure on the WA page: a 2-column layout ROW — Custom HTML block (the
   hero) in the LEFT column, native login gadget in the RIGHT column. The
   hero fills the left column as a full-height sage panel; the form card is
   centred in the right column. Both columns share the same min-height so
   neither leaves an empty gap. NO fixed positioning — normal flow, so the
   page scrolls cleanly and the footer sits below. When WA stacks the row on
   narrow screens, the hero collapses to a slim strip and the form leads. ── */
/* Breakpoint = where WA collapses the 2-column row to stacked (matches the
   header's mobile-nav breakpoint, 980px). ABOVE it the columns are side by
   side (full hero panel); AT/BELOW it they stack (slim hero strip, like
   mobile) so the form leads. */
@media(min-width:981px){
  /* ── Equal-height columns — WA renders the 2-column row as a TABLE ──
     Structure (from the live DOM):
       table.WaLayoutTable > tr.WaLayoutRow > td.WaLayoutItem[style="width:50%"]
     Table cells in a row are ALREADY equal height and the inline width:50% makes
     them 50/50 — so we must NOT set display/flex on the <td> (that pulls it out
     of the table and collapses its width, which is what broke it before).
     Instead we paint the sage straight onto the LEFT cell so it fills the full
     (equal) height, and vertical-align:middle centres the hero content. The
     dot texture moves onto the cell too (the hero div is now transparent). */
  body.ngm-login-page td.WaLayoutItem:has(.ngm-login-hero):not(:has(.WaGadgetLoginForm)){
    vertical-align:middle !important;
    background-color:#3E5538 !important;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1.2px, transparent 0),
      radial-gradient(120% 90% at 15% 0%, #4a6342 0%, #3E5538 55%, #33472e 100%) !important;
    background-size:26px 26px, auto !important;
    background-repeat:repeat, no-repeat !important;
    background-position:0 0, center !important;
  }
  /* the hero div is transparent now (the cell carries the sage + texture) */
  body.ngm-login-page .ngm-login-hero{
    background:transparent !important;
    padding:clamp(48px,6vw,72px) clamp(36px,4vw,68px) !important;
  }
  body.ngm-login-page .ngm-login-hero::before{ display:none !important; }
  /* centre the form card vertically in its equal-height cell too */
  body.ngm-login-page td.WaLayoutItem:has(.WaGadgetLoginForm){ vertical-align:middle !important; }
  body.ngm-login-page .WaGadgetLoginForm{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    /* less bottom padding so the "not a member?" join line sits closer to the card */
    padding:48px clamp(24px,4vw,56px) 10px !important;
  }
  /* tighten the space directly above the join line (desktop only) */
  body.ngm-login-page .ngm-login-foot{ padding-top:0 !important; }
  body.ngm-login-page .ngm-login-foot-inner{ padding-top:0 !important; }
}
@media(max-width:980px){
  /* ── Force the WA 2-column row to STACK once the mobile menu appears ──
     WA keeps its two columns side by side well below the header's mobile-nav
     breakpoint, which left the slim hero sitting next to the form with a big
     empty gap. We can't rely on WA's own column classes, so :has() finds the
     row (any element containing BOTH the hero and the form) and lays it out
     vertically; the column cells are forced to full-width blocks. Scoped to
     the login page, so nothing else is affected. */
  body.ngm-login-page *:has(.ngm-login-hero):has(.WaGadgetLoginForm){
    display:block !important;
  }
  /* Every wrapper on the hero side, and every wrapper on the form side, becomes
     a full-width block so each stacks edge-to-edge (kills any flex shrink). */
  body.ngm-login-page *:has(.ngm-login-hero):not(:has(.WaGadgetLoginForm)),
  body.ngm-login-page *:has(.WaGadgetLoginForm):not(:has(.ngm-login-hero)){
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    float:none !important;
  }
  /* undo the desktop height:100% fill so the stacked hero is a content-height strip */
  body.ngm-login-page .ngm-login-hero,
  body.ngm-login-page .ngm:has(> .ngm-login-hero){ height:auto !important; }

  /* Stacked (tablet + phone): slim branded hero strip on top so the LOGIN
     FORM leads — same treatment across tablet and mobile. Subcopy + benefits
     (nice-to-have context) hidden. */
  body.ngm-login-page .ngm-login-hero{ padding:22px 22px 24px; text-align:center; }
  body.ngm-login-page .ngm-login-hero-inner{ max-width:none; }
  body.ngm-login-page .ngm-lh-glow{ display:none; }
  body.ngm-login-page .ngm-login-mark{ width:38px; height:42px; margin:0 auto 10px; }
  body.ngm-login-page .ngm-lh-eyebrow{ margin-bottom:7px; }
  body.ngm-login-page .ngm-lh-title{ font-size:1.55rem; line-height:1.15; margin-bottom:0; }
  body.ngm-login-page .ngm-lh-title br{ display:none; }
  body.ngm-login-page .ngm-lh-sub,
  body.ngm-login-page .ngm-lh-list{ display:none; }
  body.ngm-login-page .WaGadgetLoginForm{ padding:26px 16px 14px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   NATIVE WA LOGIN / ACCOUNT GADGET SKIN
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   NATIVE WA LOGIN / ACCOUNT GADGET  —  WaGadgetLoginForm (LoginFormStyle001)
   ────────────────────────────────────────────────────────────────
   ONE gadget, TWO states, both a dropdown opened by the .loginLink trigger:

   • Logged OUT  → .loginContainer (no .authenticated)
       trigger "Log in"  →  panel with the email/password form,
       social-login buttons, remember-me, and forgot-password.
   • Logged IN   → .loginContainer.authenticated
       trigger = member name  →  panel with View profile / Change
       password / Log out.

   Skinned by STABLE class names only (never the per-instance id_XXXX,
   which is unstable — see docs/wa-notes.md). WA's theme uses very
   high-specificity anchor rules, so we prefix selectors with `body`.
   Markup verified against the live /Sys/Login page.
══════════════════════════════════════════════════════════════════ */

/* Replace the leftover Lato/purple theme with DM Sans throughout the gadget,
   and force border-box so width:100% fields don't overflow their container
   (the native WA inputs default to content-box, which pushed them too wide). */
body .WaGadgetLoginForm,
body .WaGadgetLoginForm * {
  font-family: "DM Sans", system-ui, sans-serif !important;
  letter-spacing: normal !important;
  box-sizing: border-box !important;
}

/* ── The trigger pill (.loginLink) ──────────────────────────────────
   Logged in (member name): sage OUTLINE pill.
   Logged out ("Log in"): sage SOLID pill (it's the primary action). */
body .WaGadgetLoginForm .loginLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  padding: 9px 22px !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
body .WaGadgetLoginForm .authenticated .loginLink {
  color: #3E5538 !important;
  background: transparent !important;
  border: 1.5px solid #3E5538 !important;
}
body .WaGadgetLoginForm .authenticated .loginLink:hover,
body .WaGadgetLoginForm .authenticated .loginLink.hover {
  background: #3E5538 !important;
  color: #fff !important;
}
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginLink {
  color: #fff !important;
  background: #3E5538 !important;
  border: 1.5px solid #3E5538 !important;
}
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginLink:hover,
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginLink.hover {
  background: #5C7A52 !important;
  border-color: #5C7A52 !important;
}

/* ── The dropdown panel — shared card look ──────────────────────── */
body .WaGadgetLoginForm .loginPanel {
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) !important;
  background: #fff !important;
  border: 1px solid #DDD5C8 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.11) !important;
  text-align: left !important;
}

/* ════════════════ LOGGED-IN: account menu ════════════════ */
body .WaGadgetLoginForm .authenticated .loginPanel {
  width: 244px !important;
  padding: 10px !important;
}
body .WaGadgetLoginForm .loggedName {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.15rem !important;
  color: #242424 !important;
  padding: 8px 12px 12px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid #EDE7DC !important;
}
body .WaGadgetLoginForm .profileBox a,
body .WaGadgetLoginForm .loginBoxLogout {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  font-size: .875rem !important;
  font-weight: 400 !important;
  color: #444 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .14s, color .14s;
}
body .WaGadgetLoginForm .profileBox a:hover,
body .WaGadgetLoginForm .loginBoxLogout:hover {
  background: #EEF3EC !important;
  color: #3E5538 !important;
}
body .WaGadgetLoginForm .loggedAction {
  border-top: 1px solid #EDE7DC !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}
body .WaGadgetLoginForm .loginBoxLogout {
  color: #9A5C4A !important;   /* rose — reads as the exit action */
  font-weight: 500 !important;
}

/* ════════════════ LOGGED-OUT: login form ════════════════ */
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginPanel {
  width: 320px !important;
  padding: 22px 22px 20px !important;
}

/* Email + password fields.
   WA's LoginFormStyle001 paints a person/lock icon as a background-IMAGE on
   the field (sitting top-left, overlapping the placeholder). We clear those
   background images for clean fields — the `background:#fff` shorthand wipes
   the image, and we also clear it on the field wrappers to be safe. */
body .WaGadgetLoginForm .emailTextBoxControl,
body .WaGadgetLoginForm .passwordTextBoxControl {
  width: 100% !important;
  height: auto !important;
  font-size: .95rem !important;
  padding: 12px 14px !important;
  border: 1px solid #DDD5C8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #242424 !important;
}
body .WaGadgetLoginForm .loginUserNameTextBox,
body .WaGadgetLoginForm .loginPasswordTextBox,
body .WaGadgetLoginForm .loginUserName,
body .WaGadgetLoginForm .loginPassword,
body .WaGadgetLoginForm .password-wrapper { background-image: none !important; }
/* WA also paints the person/lock as ::before / ::after pseudo-icons on the
   field wrappers — remove those too (they sat top-left over the placeholder).
   The lock lives on .password-wrapper (which also holds the eye toggle), so it
   must be included. NB: the show/hide toggle is a real <i>, not a pseudo, so
   it stays. */
body .WaGadgetLoginForm .loginUserName::before,   body .WaGadgetLoginForm .loginUserName::after,
body .WaGadgetLoginForm .loginUserNameTextBox::before, body .WaGadgetLoginForm .loginUserNameTextBox::after,
body .WaGadgetLoginForm .loginPassword::before,   body .WaGadgetLoginForm .loginPassword::after,
body .WaGadgetLoginForm .loginPasswordTextBox::before, body .WaGadgetLoginForm .loginPasswordTextBox::after,
body .WaGadgetLoginForm .password-wrapper::before, body .WaGadgetLoginForm .password-wrapper::after {
  content: none !important;
  background: none !important;
  display: none !important;
}
body .WaGadgetLoginForm .emailTextBoxControl:focus,
body .WaGadgetLoginForm .passwordTextBoxControl:focus {
  outline: none !important;
  border-color: #5C7A52 !important;
  box-shadow: 0 0 0 3px rgba(92,122,82,.15) !important;
}
body .WaGadgetLoginForm .loginUserName { margin-bottom: 12px !important; }

/* Show/hide-password toggle. WA outputs <i class="fa fa-eye-slash toggle-password">,
   but Font Awesome isn't loaded on this theme, so the glyph rendered as a
   "barcode" tofu box on the left. Kill the broken glyph and draw our own eye
   SVG, pinned to the middle-RIGHT of the password field. */
body .WaGadgetLoginForm .password-wrapper { position: relative !important; }
body .WaGadgetLoginForm .passwordTextBoxControl { padding-right: 44px !important; }
body .WaGadgetLoginForm .toggle-password {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  font: 0/0 a !important;               /* collapse the broken FA glyph */
  color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  cursor: pointer !important;
  /* default background = eye-with-slash (password hidden). WA's JS swaps the
     class between fa-eye-slash (hidden) and fa-eye (revealed) on click, so the
     two state rules below flip the icon accordingly. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}
/* Password HIDDEN (default) → eye-with-slash */
body .WaGadgetLoginForm .toggle-password.fa-eye-slash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}
/* Password REVEALED → open eye */
body .WaGadgetLoginForm .toggle-password.fa-eye {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}
body .WaGadgetLoginForm .toggle-password::before,
body .WaGadgetLoginForm .toggle-password::after { content: "" !important; }

/* Remember me */
body .WaGadgetLoginForm .loginActionRememberMe {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 14px 0 !important;
}
body .WaGadgetLoginForm .rememberMeCheckboxControl { width: auto !important; accent-color: #3E5538; }
body .WaGadgetLoginForm .loginActionRememberMe label {
  font-size: .85rem !important;
  color: #656565 !important;
  margin: 0 !important;
}

/* Log in button */
body .WaGadgetLoginForm .loginButton,
body .WaGadgetLoginForm .loginButtonControl {
  display: block !important;
  width: 100% !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  background: #3E5538 !important;
  border: 1.5px solid #3E5538 !important;
  border-radius: 100px !important;
  padding: 12px 26px !important;
  cursor: pointer;
  text-transform: none !important;
  transition: background .2s;
}
body .WaGadgetLoginForm .loginButton:hover,
body .WaGadgetLoginForm .loginButtonControl:hover {
  background: #5C7A52 !important;
  border-color: #5C7A52 !important;
}

/* Forgot password */
body .WaGadgetLoginForm .loginPasswordForgot {
  margin-top: 14px !important;
  text-align: center !important;
}
body .WaGadgetLoginForm .loginPasswordForgot a {
  font-size: .85rem !important;
  color: #3E5538 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(62,85,56,.3);
  padding-bottom: 1px;
}
body .WaGadgetLoginForm .loginPasswordForgot a:hover { border-color: #3E5538; }

/* Force the whole form-column chain to full-width block. Several WA wrappers
   (.oAuthForm, .openAuthFormContainer, …) shrink-wrap their content, so the
   buttons' width:100% was resolving against a NARROW box — that's why they
   weren't filling the card. */
body .WaGadgetLoginForm .loginContainer,
body .WaGadgetLoginForm .loginContainerInner,
body .WaGadgetLoginForm .loginContainerForm,
body .WaGadgetLoginForm .loginContainerFormInner,
body .WaGadgetLoginForm .openAuthFormContainer,
body .WaGadgetLoginForm .oAuthForm,
body .WaGadgetLoginForm .generalLoginBox {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  text-align: left !important;
}

/* Social login buttons (Google / Microsoft / Apple) */
body .WaGadgetLoginForm .oAuthButtonsContainer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* let the buttons fill the card width */
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #EDE7DC !important;
}
body .WaGadgetLoginForm .wa-authenticateLoginLink {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;               /* fill the form, not shrink to the icon */
  max-width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: #242424 !important;
  background: #fff !important;
  border: 1.5px solid #DDD5C8 !important;
  border-radius: 100px !important;
  padding: 11px 16px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
body .WaGadgetLoginForm .wa-authenticateLoginLink:hover {
  border-color: #5C7A52 !important;
  background: #EEF3EC !important;
}
/* Show the button label (WA's icon-only style hides .authenticateLoginText) so
   the full-width pills read "Log in with Google/Microsoft/Apple". */
body .WaGadgetLoginForm .authenticateLoginText {
  display: inline-block !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: #242424 !important;
  text-indent: 0 !important;
  overflow: visible !important;
}
/* Brand logos on the social buttons (embedded SVGs — no external files) */
body .WaGadgetLoginForm .authenticateLoginIcon {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex-shrink: 0;
}
body .WaGadgetLoginForm .wa-authenticateLoginLink.googlePlus .authenticateLoginIcon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cpath%20fill='%23FFC107'%20d='M43.6%2020.5H42V20H24v8h11.3C33.7%2032.4%2029.3%2035%2024%2035c-6.6%200-12-5.4-12-12s5.4-12%2012-12c3.1%200%205.9%201.2%208%203.1l5.7-5.7C34.6%206.1%2029.6%204%2024%204%2012.9%204%204%2012.9%204%2024s8.9%2020%2020%2020%2020-8.9%2020-20c0-1.3-.1-2.3-.4-3.5z'/%3E%3Cpath%20fill='%23FF3D00'%20d='M6.3%2014.7l6.6%204.8C14.7%2016%2019%2013%2024%2013c3.1%200%205.9%201.2%208%203.1l5.7-5.7C34.6%206.1%2029.6%204%2024%204%2016.3%204%209.7%208.3%206.3%2014.7z'/%3E%3Cpath%20fill='%234CAF50'%20d='M24%2044c5.2%200%209.9-2%2013.4-5.2l-6.2-5.2C29.2%2035%2026.7%2036%2024%2036c-5.3%200-9.7-2.6-11.3-7l-6.5%205C9.6%2039.6%2016.2%2044%2024%2044z'/%3E%3Cpath%20fill='%231976D2'%20d='M43.6%2020.5H42V20H24v8h11.3c-.8%202.3-2.3%204.3-4.1%205.6l6.2%205.2C39.9%2036.5%2044%2030.9%2044%2024c0-1.3-.1-2.3-.4-3.5z'/%3E%3C/svg%3E") !important;
}
body .WaGadgetLoginForm .wa-authenticateLoginLink.microsoft .authenticateLoginIcon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23F25022'%20d='M1%201h10v10H1z'/%3E%3Cpath%20fill='%237FBA00'%20d='M13%201h10v10H13z'/%3E%3Cpath%20fill='%2300A4EF'%20d='M1%2013h10v10H1z'/%3E%3Cpath%20fill='%23FFB900'%20d='M13%2013h10v10H13z'/%3E%3C/svg%3E") !important;
}
body .WaGadgetLoginForm .wa-authenticateLoginLink.apple .authenticateLoginIcon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M16.4%2012.8c0-2.3%201.9-3.4%202-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7%200-1.8-.8-3-.8-1.5%200-3%20.9-3.8%202.3-1.6%202.8-.4%207%201.2%209.3.8%201.1%201.7%202.4%202.9%202.3%201.2-.05%201.6-.75%203-.75s1.8.75%203%20.73c1.2-.02%202-1.1%202.8-2.2.9-1.3%201.2-2.5%201.3-2.6-.03-.01-2.5-1-2.5-3.8zM14.2%206c.6-.8%201.1-1.9.9-3-1%20.04-2.1.7-2.8%201.5-.6.7-1.1%201.8-1%202.8%201.1.1%202.2-.5%202.9-1.3z'/%3E%3C/svg%3E") !important;
}

/* ══════════════════════════════════════════════════════════════════
   LOGIN PAGE — force the form EXPANDED (not a dropdown)
   ────────────────────────────────────────────────────────────────
   The Custom HTML block on /Sys/Login adds  body.ngm-login-page  (see
   system-pages/login/01-top.html). On that page only, we open the login
   panel inline as a centred card and hide the "Log in" trigger. Everywhere
   else the gadget keeps its normal dropdown behaviour.
══════════════════════════════════════════════════════════════════ */
body.ngm-login-page .WaGadgetLoginForm .loginLink { display: none !important; }

/* The native gadget is a header-style DROPDOWN: its .loginPanel is
   absolutely positioned and anchored to the (now hidden) trigger, so on this
   page it renders as a narrow box pinned to the edge and overflows the
   viewport. Force every level out of dropdown positioning and into an inline,
   centred card. Selectors are broadened (with AND without .loginContainer,
   since the logged-out DOM may omit it) and class names are doubled to raise
   specificity above WA's theme rules. */
body.ngm-login-page .WaGadgetLoginForm.WaGadgetLoginForm .loginContainer,
body.ngm-login-page .WaGadgetLoginForm.WaGadgetLoginForm .loginPanel {
  position: static !important;
  float: none !important;
  transform: none !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  inset: auto !important;
}
body.ngm-login-page .WaGadgetLoginForm.WaGadgetLoginForm .loginContainer {
  width: 100% !important; max-width: 400px !important; margin: 0 auto !important;
}
body.ngm-login-page .WaGadgetLoginForm.WaGadgetLoginForm .loginPanel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 36px 36px 34px !important;
  background: #fff !important;
  border: 1px solid var(--ngm-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 40px rgba(62,85,56,.10) !important;
}
/* Kill the dropdown pointer/arrow on this page */
body.ngm-login-page .WaGadgetLoginForm .loginPanel::before,
body.ngm-login-page .WaGadgetLoginForm .loginPanel::after { display: none !important; }



/* ══════════════════════════════════════════════════════════════════
   PAGE — MEETING-TYPE DETAIL PAGES (Counted Thread, Evening Needlepointers,
   Potpourri Stitchers, Beading)
══════════════════════════════════════════════════════════════════ */
/* ── Meeting-type detail pages (ngm-mt-*) ──────────────────── */
.ngm-mt-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.ngm-mt-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:2px 0 20px; }
.ngm-mt-when { font-family:var(--ngm-sans); font-size:.95rem; font-weight:500; color:var(--ngm-sage-dk); }
.ngm-mt-hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.ngm-mt-about p { font-family:var(--ngm-sans); font-size:1.0625rem; color:var(--ngm-gray); line-height:1.8; max-width:680px; margin:0 0 22px; }
.ngm-mt-tags { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 0; padding:0; }
.ngm-mt-tags li { font-family:var(--ngm-sans); font-size:.85rem; color:var(--ngm-sage-dk); background:var(--ngm-sage-lt); border-radius:100px; padding:7px 16px; }
.ngm-mt-details { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:40px; }
.ngm-mt-detail { background:#fff; border:1px solid var(--ngm-border); border-radius:var(--ngm-radius-lg); padding:26px 28px; }
.ngm-mt-detail h3 { font-family:var(--ngm-sans); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ngm-sage); margin:0 0 10px; }
.ngm-mt-detail p { font-family:var(--ngm-sans); font-size:1rem; color:var(--ngm-gray); line-height:1.7; margin:0; }
.ngm-mt-detail a { color:var(--ngm-sage-dk) !important; }
/* Photo placeholders — swap the whole box for an <img> when you have a picture */
.ngm-mt-photo { background:var(--ngm-sage-lt); border:1px dashed #C4D0BC; border-radius:var(--ngm-radius-lg); min-height:300px; display:flex; align-items:center; justify-content:center; text-align:center; }
.ngm-mt-photo span { font-family:var(--ngm-sans); font-size:.82rem; letter-spacing:.02em; color:var(--ngm-sage-dk); padding:22px; opacity:.85; }
.ngm-mt-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.ngm-mt-gallery .ngm-mt-photo { min-height:210px; }
/* Where-we-meet + map */
.ngm-mt-loc { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.ngm-mt-addr { font-family:var(--ngm-sans); font-size:1rem; color:var(--ngm-gray); line-height:1.9; font-style:normal; margin:8px 0 14px; }
.ngm-mt-map { border-radius:var(--ngm-radius-lg); overflow:hidden; border:1px solid var(--ngm-border); }
.ngm-mt-map iframe { display:block; width:100%; height:320px; border:none; }
@media(max-width:820px){ .ngm-mt-hero-grid { grid-template-columns:1fr; gap:32px; } }
@media(max-width:760px){ .ngm-mt-gallery { grid-template-columns:1fr; } .ngm-mt-loc { grid-template-columns:1fr; gap:28px; } }

/* ── Retreat teachers grid ─────────────────────────────────── */
.ngm-mt-teachers { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:40px; }
.ngm-mt-teacher { background:#fff; border:1px solid var(--ngm-border); border-radius:var(--ngm-radius-lg); padding:28px 30px; }
.ngm-mt-teacher h3 { font-family:var(--ngm-serif); font-size:1.4rem; font-weight:400; color:var(--ngm-charcoal); text-transform:none; margin:0 0 4px; }
.ngm-mt-teacher-spec { font-family:var(--ngm-sans); font-size:.88rem; color:var(--ngm-sage-dk); margin:0 0 14px; }
.ngm-mt-teacher ul { list-style:none; margin:0; padding:0; }
.ngm-mt-teacher li { font-family:var(--ngm-sans); font-size:.9rem; color:var(--ngm-gray); line-height:1.5; padding:9px 0; border-top:1px solid #EDE7DC; display:flex; justify-content:space-between; gap:14px; }
.ngm-mt-teacher li span { color:var(--ngm-sage-dk); white-space:nowrap; font-weight:500; }
@media(max-width:760px){ .ngm-mt-teachers { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════
   WA SYSTEM-PAGE FORMS  —  membership application / profile / renewal
   ──────────────────────────────────────────────────────────────────
   PROVISIONAL skin for Wild Apricot's native system-page forms. Verified
   against the live /application markup; profile & renewal share the same
   WA field/button classes but should be spot-checked on the live pages.
   WA uses deeply-nested table markup — we only recolour and re-font (fonts,
   headings, fields, buttons), never restructure. Stable classes only.
══════════════════════════════════════════════════════════════════ */
body .WaGadgetMembershipApplication *,
body [class*="WaGadgetMembership"] *,
body .WaGadgetPublicWizard * {
  font-family: "DM Sans", system-ui, sans-serif !important;
}
/* Level / section titles -> Cormorant */
body .WaGadgetMembershipApplication .infoTitle,
body .WaGadgetMembershipApplication .fieldSubTitle,
body [class*="WaGadgetMembership"] .fieldSubTitle {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.25rem !important; font-weight: 400 !important; color: #242424 !important;
}
body .WaGadgetMembershipApplication .levelPrice,
body [class*="WaGadgetMembership"] .levelPrice { color: #3E5538 !important; font-weight: 500; }
body .WaGadgetMembershipApplication .levelRenewal,
body .WaGadgetMembershipApplication .levelRecurring,
body [class*="WaGadgetMembership"] .levelRenewal { color: #656565 !important; }
/* Field labels */
body .WaGadgetMembershipApplication .fieldMain,
body [class*="WaGadgetMembership"] .fieldMain,
body .WaGadgetMembershipApplication label { font-size: .9rem !important; color: #242424 !important; }
/* Inputs */
body .WaGadgetMembershipApplication input[type="text"],
body .WaGadgetMembershipApplication input[type="email"],
body .WaGadgetMembershipApplication input[type="password"],
body .WaGadgetMembershipApplication input[type="tel"],
body .WaGadgetMembershipApplication select,
body .WaGadgetMembershipApplication textarea,
body [class*="WaGadgetMembership"] input[type="text"],
body [class*="WaGadgetMembership"] select,
body [class*="WaGadgetMembership"] textarea {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: .95rem !important; padding: 10px 13px !important;
  border: 1px solid #DDD5C8 !important; border-radius: 10px !important;
  background: #fff !important; color: #242424 !important; box-sizing: border-box !important;
}
body .WaGadgetMembershipApplication input:focus,
body .WaGadgetMembershipApplication select:focus,
body .WaGadgetMembershipApplication textarea:focus {
  outline: none !important; border-color: #5C7A52 !important;
  box-shadow: 0 0 0 3px rgba(92,122,82,.15) !important;
}
/* WA "stylized" buttons -> sage pill (native form buttons site-wide) */
body .stylizedButton,
body a.stylizedButton,
body input.stylizedButton,
body button.stylizedButton {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: .9rem !important; font-weight: 500 !important;
  background: #3E5538 !important; color: #fff !important;
  border: 1.5px solid #3E5538 !important; border-radius: 100px !important;
  padding: 11px 26px !important; cursor: pointer; text-transform: none !important;
  transition: background .2s;
}
body .stylizedButton:hover { background: #5C7A52 !important; border-color: #5C7A52 !important; }


/* ── Contact: homepage-style location/map + social boxes ──── */
.ngm-loc-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.ngm-loc-map { border-radius:var(--ngm-radius-lg); overflow:hidden; height:320px; border:1px solid var(--ngm-border); box-shadow:var(--ngm-shm); }
.ngm-loc-map iframe { width:100%; height:100%; border:none; display:block; }
.ngm-addr-label { display:block; font-family:var(--ngm-sans); font-size:.68rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ngm-gray-lt); margin-top:20px; margin-bottom:5px; }
.ngm-addr-label:first-of-type { margin-top:0; }
.ngm-address { font-style:normal; font-family:var(--ngm-sans); font-size:1rem; color:var(--ngm-charcoal); line-height:1.85; }
.ngm-mt-cbox { display:flex; align-items:flex-start; gap:16px; }
a.ngm-mt-cbox { text-decoration:none; transition:border-color .2s, transform .18s; }
a.ngm-mt-cbox:hover { border-color:var(--ngm-sage-lt); transform:translateY(-2px); }
.ngm-mt-cbox-icon { width:46px; height:46px; border-radius:12px; background:var(--ngm-sage-lt); color:var(--ngm-sage-dk); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ngm-mt-cbox-icon svg { width:24px; height:24px; }
.ngm-mt-cbox h3 { font-family:var(--ngm-sans)!important; font-size:1rem!important; font-weight:500!important; color:var(--ngm-charcoal)!important; text-transform:none!important; letter-spacing:normal!important; margin:0 0 3px!important; }
.ngm-mt-cbox p { font-size:.9rem!important; color:var(--ngm-gray)!important; margin:0!important; line-height:1.6; }
.ngm-mt-cbox p a { color:var(--ngm-sage-dk)!important; }
/* Board roles + emails (from the About page) */
.ngm-leadership-intro { font-family:var(--ngm-sans); font-size:1rem; color:var(--ngm-gray); line-height:1.8; max-width:560px; margin-bottom:8px; }
.ngm-lcard-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px; }
.ngm-lcard { background:#fff; border:1px solid var(--ngm-border); border-radius:var(--ngm-radius-lg); padding:22px 20px 20px; }
.ngm-lcard-role { display:block; font-family:var(--ngm-sans); font-size:.67rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase!important; color:var(--ngm-sage-dk); margin-bottom:6px; }
body .ngm-lcard-email { display:block; font-family:var(--ngm-sans)!important; font-size:.8rem!important; font-weight:400!important; color:var(--ngm-gray)!important; word-break:break-all; text-decoration:none!important; }
body a.ngm-lcard-email:hover { color:var(--ngm-sage-dk)!important; }
.ngm-lcard-note { margin-top:26px; font-family:var(--ngm-sans); font-size:.85rem; color:var(--ngm-gray-lt); line-height:1.65; }
.ngm-lcard-note a { color:var(--ngm-sage-dk)!important; text-decoration:none!important; border-bottom:1px solid rgba(62,85,56,.3); }
@media(max-width:560px){ .ngm-lcard-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════
   UTILITIES (carried over from live CSS; purple relics intentionally dropped)
══════════════════════════════════════════════════════════════════ */
/* Hide Wild Apricot 'Powered by' badge */
.WaGadgetPoweredBy { display: none !important; }

/* Rounded gadget wrapper helper */
.rounded-box { border-radius: 16px; overflow: hidden; }

/* Tighten vertical gaps between stacked content gadgets */
.gadgetContentArea,
.contentGadget,
[id^="id_"] > .gadgetStyleBox {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   SYSTEM-PAGE INTRO BANDS  (.ngm-sys)
   Centered heading band used atop content-editable WA system pages
   (404, 403, authorization required, unsubscribe, terms of use) and the
   membership-application heading. The self-contained *-top.html files carry
   the same rules inline; these power the .slim versions.
══════════════════════════════════════════════════════════════════ */
:root{--ngm-sage:#5C7A52;--ngm-sage-dk:#3E5538;--ngm-rose:#B87260;--ngm-cream:#FAF7F2;--ngm-charcoal:#242424;--ngm-gray:#656565;--ngm-serif:"Cormorant Garamond",Georgia,serif;--ngm-sans:"DM Sans",system-ui,sans-serif;}
.ngm-sys *{box-sizing:border-box;margin:0;padding:0;}
.ngm-sys-band{background:var(--ngm-cream);padding:92px 24px 56px;text-align:center;}
.ngm-sys-inner{max-width:560px;margin:0 auto;}
.ngm-sys-eyebrow{display:block;font-family:var(--ngm-sans);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ngm-sage);margin-bottom:10px;}
.ngm-sys-title{font-family:var(--ngm-serif)!important;font-size:clamp(2rem,3.5vw,2.7rem);font-weight:400;line-height:1.12;color:var(--ngm-charcoal);text-transform:none!important;margin-bottom:12px;}
.ngm-sys-title em{font-style:italic;color:var(--ngm-rose)!important;}
.ngm-sys-sub{font-family:var(--ngm-sans);font-size:1rem;color:var(--ngm-gray);line-height:1.7;}
.ngm-sys-sub a{color:var(--ngm-sage-dk);font-weight:500;}
.ngm-sys-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.ngm-sys-btn{display:inline-flex;align-items:center;font-family:var(--ngm-sans);font-size:.9rem;font-weight:500;border-radius:100px;padding:12px 26px;text-decoration:none!important;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s;}
.ngm-sys-btn-green{background:var(--ngm-sage-dk);color:#fff!important;border-color:var(--ngm-sage-dk);}
.ngm-sys-btn-green:hover{background:var(--ngm-sage);border-color:var(--ngm-sage);}
.ngm-sys-btn-outline{background:transparent;color:var(--ngm-sage-dk)!important;border-color:var(--ngm-sage-dk);}
.ngm-sys-btn-outline:hover{background:var(--ngm-sage-dk);color:#fff!important;}
@media(max-width:640px){.ngm-sys-band{padding:72px 18px 44px;}}

/* ══════════════════════════════════════════════════════════════════
   MEMBER HUB  (.ngm-hub-*)  — members-only landing page
══════════════════════════════════════════════════════════════════ */
/* MEMBER HUB */
.ngm-hub-band{padding:84px 48px;}
.ngm-hub-cream{background:var(--ngm-cream);}
.ngm-hub-white{background:#fff;}
.ngm-hub-linen{background:var(--ngm-linen);}
.ngm-hub-inner{max-width:1080px;margin:0 auto;}
.ngm-hub-hero{background:var(--ngm-cream);padding:70px 48px 60px;border-bottom:1px solid var(--ngm-border);}
.ngm-hub-hero p{font-family:var(--ngm-sans);font-size:1.0625rem;color:var(--ngm-gray);line-height:1.8;max-width:560px;margin-bottom:28px;}
.ngm-hub-account{display:flex;gap:14px;flex-wrap:wrap;}
.ngm-hub-status,.ngm-hub-plink{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--ngm-border);border-radius:var(--ngm-radius);padding:14px 18px;text-decoration:none!important;color:var(--ngm-charcoal);font-family:var(--ngm-sans);transition:border-color .18s;}
.ngm-hub-status{border-left:4px solid var(--ngm-sage);}
.ngm-hub-status:hover,.ngm-hub-plink:hover{border-color:var(--ngm-sage);}
.ngm-hub-status svg,.ngm-hub-plink svg{width:20px;height:20px;color:var(--ngm-sage-dk);flex-shrink:0;}
.ngm-hub-status-t strong{font-weight:600;font-size:.95rem;}
.ngm-hub-status-t span{display:block;font-size:.82rem;color:var(--ngm-gray);margin-top:1px;}
.ngm-hub-status-go{margin-left:6px;font-size:.82rem;font-weight:600;color:var(--ngm-sage-dk);white-space:nowrap;}
.ngm-hub-plink span{font-size:.95rem;font-weight:500;}
.ngm-hub-plink .arw{width:13px;height:13px;}
/* top tasks */
.ngm-hub-tasks{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:6px;}
.ngm-hub-task{display:flex;flex-direction:column;background:var(--ngm-sage-lt);border:1px solid #DBE6D5;border-radius:var(--ngm-radius-lg);padding:32px 30px 30px;text-decoration:none!important;color:inherit;transition:transform .18s,box-shadow .18s;}
.ngm-hub-task:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(62,85,56,.14);}
.ngm-hub-ticon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;margin-bottom:20px;color:var(--ngm-sage-dk);}
.ngm-hub-ticon svg{width:28px;height:28px;}
.ngm-hub-task h3{font-family:var(--ngm-serif)!important;font-size:1.6rem;font-weight:400;color:var(--ngm-charcoal);margin-bottom:8px;line-height:1.15;}
.ngm-hub-task p{font-family:var(--ngm-sans);font-size:.95rem;color:var(--ngm-gray);line-height:1.65;flex:1;margin-bottom:18px;}
.ngm-hub-tgo{font-family:var(--ngm-sans);font-size:.9rem;font-weight:600;color:var(--ngm-sage-dk);display:inline-flex;align-items:center;gap:7px;transition:gap .18s;}
.ngm-hub-task:hover .ngm-hub-tgo{gap:11px;}
/* coming up heading */
.ngm-hub-uphead{margin-bottom:6px;}
.ngm-hub-calllink{display:inline-flex;align-items:center;gap:7px;font-family:var(--ngm-sans);font-size:.9rem;font-weight:500;color:var(--ngm-sage-dk);text-decoration:none;margin-top:22px;}
/* resources */
.ngm-hub-rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:6px;}
.ngm-hub-rtile{display:flex;flex-direction:column;background:var(--ngm-cream);border:1px solid var(--ngm-border);border-radius:var(--ngm-radius);padding:24px 22px;text-decoration:none!important;color:inherit;transition:border-color .18s,box-shadow .18s;}
.ngm-hub-rtile:hover{border-color:var(--ngm-sage);box-shadow:0 10px 26px rgba(0,0,0,.06);}
.ngm-hub-rtile svg{width:24px;height:24px;color:var(--ngm-sage-dk);margin-bottom:14px;}
.ngm-hub-rtile h4{font-family:var(--ngm-serif)!important;font-size:1.22rem;font-weight:400;color:var(--ngm-charcoal);margin-bottom:5px;line-height:1.2;}
.ngm-hub-rtile p{font-family:var(--ngm-sans);font-size:.85rem;color:var(--ngm-gray);line-height:1.55;}
/* account row */
.ngm-hub-acct{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px;}
.ngm-hub-atile{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--ngm-border);border-radius:var(--ngm-radius);padding:16px 18px;text-decoration:none!important;color:var(--ngm-charcoal);transition:border-color .18s;}
.ngm-hub-atile:hover{border-color:var(--ngm-sage);}
.ngm-hub-atile svg{width:20px;height:20px;color:var(--ngm-sage-dk);flex-shrink:0;}
.ngm-hub-atile span{font-family:var(--ngm-sans);font-size:.92rem;font-weight:500;line-height:1.25;}
/* board */
.ngm-hub-board{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px;}
.ngm-hub-brow{background:var(--ngm-cream);border:1px solid var(--ngm-border);border-radius:var(--ngm-radius);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.ngm-hub-brole{font-family:var(--ngm-sans);font-size:.95rem;font-weight:600;color:var(--ngm-charcoal);}
.ngm-hub-bemail{font-family:var(--ngm-sans);font-size:.88rem;color:var(--ngm-sage-dk)!important;text-decoration:none;}
.ngm-hub-bemail:hover{text-decoration:underline;}
.ngm-hub-help{margin-top:36px;padding:22px 26px;background:var(--ngm-linen);border-radius:var(--ngm-radius);font-family:var(--ngm-sans);font-size:.9375rem;color:var(--ngm-gray);line-height:1.7;}
.ngm-hub-help a{color:var(--ngm-sage-dk)!important;text-decoration:none;border-bottom:1px solid rgba(62,85,56,.3);}
@media(max-width:900px){.ngm-hub-band{padding:60px 26px;}.ngm-hub-hero{padding:52px 26px 44px;}.ngm-hub-tasks{grid-template-columns:1fr;}.ngm-hub-rgrid,.ngm-hub-acct{grid-template-columns:1fr 1fr;}.ngm-hub-board{grid-template-columns:1fr;}}

/* WA Upcoming-events gadget -> clean card list (add class ngm-wa-events to the gadget) */
.ngm-hub-uphead{margin-bottom:0;}
body .ngm-wa-events.WaGadgetUpcomingEvents{background:var(--ngm-linen)!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0 48px 8px!important;font-family:var(--ngm-sans)!important;}
body .ngm-wa-events .gadgetStyleBody{background:#fff!important;border:1px solid var(--ngm-border)!important;border-radius:var(--ngm-radius-lg)!important;box-shadow:0 2px 12px rgba(0,0,0,.06)!important;padding:6px 26px!important;margin:0 auto!important;max-width:1080px!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul{list-style:none!important;margin:0!important;padding:0!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li{list-style:none!important;border-bottom:1px solid var(--ngm-linen)!important;padding:18px 2px!important;margin:0!important;transition:background-color .2s!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li:last-child{border-bottom:none!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover{background-color:var(--ngm-sage-lt)!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li .title{margin:0 0 3px!important;font-weight:400!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li .title a{font-family:var(--ngm-serif)!important;font-size:1.2rem!important;font-weight:400!important;color:var(--ngm-charcoal)!important;font-style:normal!important;text-transform:none!important;text-decoration:none!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li:hover .title a{color:var(--ngm-sage-dk)!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li .date,body .ngm-wa-events.upcomingEventsStyle001 ul li .date span{font-family:var(--ngm-sans)!important;font-size:.82rem!important;font-weight:400!important;font-style:normal!important;color:var(--ngm-gray)!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li .location{display:none!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li .ngm-evt-tag{display:inline-flex!important;align-items:center!important;font-family:var(--ngm-sans)!important;font-size:.62rem!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase!important;padding:4px 10px!important;border-radius:100px!important;margin-bottom:8px!important;background:#E3EFEF!important;color:#2A5A5A!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="zoom"] .ngm-evt-tag{background:#EEEEFF!important;color:#3A46AF!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="virtual"] .ngm-evt-tag{background:#F2EEF8!important;color:#5A3A8A!important;}
body .ngm-wa-events.upcomingEventsStyle001 ul li[data-tag="person"] .ngm-evt-tag{background:var(--ngm-rose-lt)!important;color:#7A3E2E!important;}

/* member-hub meeting-links band */
/* meeting Zoom links band + per-meeting cards */
.ngm-hub-zoomband{background:var(--ngm-sage-dk);}
.ngm-hub-zoom-eyebrow{display:block;font-family:var(--ngm-sans);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px;}
.ngm-hub-zoomband h2{font-family:var(--ngm-serif);font-size:2rem;font-weight:400;color:#fff;margin:0 0 8px;line-height:1.1;}
.ngm-hub-zoomband>.ngm-hub-inner>p{font-family:var(--ngm-sans);font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.6;max-width:600px;margin:0 0 30px;}
.ngm-hub-zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.ngm-hub-zcard{display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--ngm-radius);padding:18px 18px 16px;text-decoration:none!important;transition:background .18s,transform .18s;}
.ngm-hub-zcard:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.ngm-hub-zcard-name{font-family:var(--ngm-serif);font-size:1.18rem;color:#fff;line-height:1.2;}
.ngm-hub-zcard-when{font-family:var(--ngm-sans);font-size:.8rem;color:rgba(255,255,255,.72);}
.ngm-hub-zcard-join{margin-top:12px;font-family:var(--ngm-sans);font-size:.85rem;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:7px;}
.ngm-hub-zcard-join svg{width:15px;height:15px;flex-shrink:0;}
@media(max-width:820px){.ngm-hub-zgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.ngm-hub-zgrid{grid-template-columns:1fr;}}

/* account: two primary cards above the tab tiles */
.ngm-hub-acct-top{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;margin-bottom:16px;}
.ngm-hub-acard{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--ngm-border);border-radius:var(--ngm-radius-lg);padding:24px 26px;text-decoration:none!important;color:var(--ngm-charcoal);transition:border-color .18s,box-shadow .18s,transform .18s;}
.ngm-hub-acard:hover{border-color:var(--ngm-sage);box-shadow:0 12px 30px rgba(0,0,0,.07);transform:translateY(-2px);}
.ngm-hub-acard-icon{width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ngm-sage-lt);border-radius:14px;color:var(--ngm-sage-dk);}
.ngm-hub-acard-icon svg{width:26px;height:26px;}
.ngm-hub-acard-body{flex:1;min-width:0;}
.ngm-hub-acard-body h4{font-family:var(--ngm-serif)!important;font-size:1.35rem;font-weight:400;color:var(--ngm-charcoal);margin:0 0 3px;line-height:1.2;}
.ngm-hub-acard-body p{font-family:var(--ngm-sans);font-size:.85rem;color:var(--ngm-gray);line-height:1.5;margin:0;}
.ngm-hub-acard-go{flex-shrink:0;color:var(--ngm-sage-dk);display:inline-flex;transition:transform .18s;}
.ngm-hub-acard-go svg{width:20px;height:20px;}
.ngm-hub-acard:hover .ngm-hub-acard-go{transform:translateX(3px);}
@media(max-width:760px){.ngm-hub-acct-top{grid-template-columns:1fr;}}

/* ══════════════════════════════════════════════════════════════════
   MEMBER PROFILE + TABS  —  /Sys/Profile and its tabs
   (Profile · Privacy · Email subscriptions render inline in the same
    .WaGadgetContactProfile gadget; Event registrations · Invoices · Donations
    are separate /Sys/Profile/* pages, styled by the generic table rules below.)
   /Sys/Profile is CSS-only (WA blocks custom HTML there), so this skins WA's
   native profile markup to match system-pages/member-profile/mockups/
   profile-buildable. Targets VERIFIED against the live DOM (theme
   casefile_guardian.v3.0): the real gadget class is .WaGadgetContactProfile,
   labels are .fieldLabel, values .fieldBody, section headers <h4> inside
   .captionContainer, the tab bar is ul.memberDetailsTabMenu (li.selected =
   active), and buttons are input.typeButton.
   ══════════════════════════════════════════════════════════════════ */

/* ---- fonts: DM Sans everywhere, Cormorant on the page heading ---- */
body .WaGadgetContactProfile, body .WaGadgetContactProfile *,
body .WaGadgetBreadcrumbs, body .WaGadgetBreadcrumbs * {
  font-family: var(--ngm-sans) !important;
}
/* The "Contact Profile" heading is a separate Headline gadget above the profile.
   Restyle it to the serif look; rename it to "My profile" in WA page settings. */
body .WaGadgetHeadline h1.header,
body .WaGadgetHeadline h1.header font {
  font-family: var(--ngm-serif) !important; font-weight: 400 !important;
  color: var(--ngm-charcoal) !important; text-transform: none !important;
}
/* The "Click EDIT PROFILE to Make Changes" red arrow is a content image in that
   gadget. Hidden here for the clean look; delete it in WA to remove permanently. */
body .WaGadgetHeadline .gadgetStyleBody p img { display: none !important; }

/* ---- breadcrumb ---- */
body .WaGadgetBreadcrumbs { font-size: .82rem !important; }
body .WaGadgetBreadcrumbs a { color: var(--ngm-sage-dk) !important; text-decoration: none !important; }

/* ---- top action buttons: Edit profile (outline) + My directory profile (link) ---- */
body .WaGadgetContactProfile input.typeButton {
  background: var(--ngm-sage-dk) !important; color: #fff !important;
  border: 1px solid var(--ngm-sage-dk) !important; border-radius: 999px !important;
  padding: 12px 24px !important; font-size: .88rem !important; font-weight: 600 !important;
  cursor: pointer !important; box-shadow: none !important; text-transform: none !important;
  transition: background .18s, color .18s;
}
body .WaGadgetContactProfile input.typeButton:hover { background: var(--ngm-sage) !important; }
/* Edit-profile reads as secondary (outline); Renew stays the filled primary. */
body .WaGadgetContactProfile input[id$="editButtonTop"].typeButton,
body .WaGadgetContactProfile input[id$="editButtonBottom"].typeButton {
  background: transparent !important; color: var(--ngm-sage-dk) !important;
}
body .WaGadgetContactProfile input[id$="editButtonTop"].typeButton:hover,
body .WaGadgetContactProfile input[id$="editButtonBottom"].typeButton:hover {
  background: var(--ngm-sage-lt) !important;
}
body .WaGadgetContactProfile .memberDirectoryDetailsLink {
  color: var(--ngm-sage-dk) !important; font-weight: 600 !important;
  font-size: .88rem !important; text-decoration: none !important; margin-left: 6px;
}

/* ---- tab bar: ul.memberDetailsTabMenu ---- */
body .WaGadgetContactProfile ul.memberDetailsTabMenu {
  display: flex !important; flex-wrap: wrap !important; gap: 26px !important;
  list-style: none !important; margin: 6px 0 30px !important; padding: 0 !important;
  border-bottom: 1px solid var(--ngm-border) !important;
}
body .WaGadgetContactProfile ul.memberDetailsTabMenu li {
  float: none !important; margin: 0 !important; padding: 0 0 12px !important;
  background: none !important; border: none !important; list-style: none !important;
}
body .WaGadgetContactProfile ul.memberDetailsTabMenu li a,
body .WaGadgetContactProfile ul.memberDetailsTabMenu li span {
  color: var(--ngm-gray) !important; font-size: .9rem !important; font-weight: 400 !important;
  text-decoration: none !important; background: none !important;
}
/* Active tab: WA shows the current tab's <span> label (and hides its <a>), while
   inactive tabs show their <a> link. WA does NOT move .selected when you switch
   tabs, so key the active look off the VISIBLE label span (its inline style is
   "display: inline"; hidden ones are "display: none"), which follows the current
   tab across Profile / Privacy / Email subscriptions and the sub-pages. */
body .WaGadgetContactProfile ul.memberDetailsTabMenu li span:not([style*="none"]) {
  color: var(--ngm-sage-dk) !important; font-weight: 600 !important;
}
/* full-width underline under the active tab (modern browsers via :has; the
   sage-bold label above is the fallback where :has isn't supported) */
body .WaGadgetContactProfile ul.memberDetailsTabMenu li:has(span:not([style*="none"])) {
  box-shadow: inset 0 -2px 0 0 var(--ngm-sage) !important;
}

/* ---- section headers: <h4> inside .captionContainer (full-width sage eyebrow) ---- */
body .WaGadgetContactProfile .captionContainer .fieldLabel { display: none !important; }
body .WaGadgetContactProfile .captionContainer .fieldBody {
  width: 100% !important; float: none !important;
  border-bottom: 1px solid var(--ngm-border) !important; padding-bottom: 10px !important;
}
body .WaGadgetContactProfile .captionContainer h4 {
  margin: 0 !important; font-family: var(--ngm-sans) !important; font-size: .72rem !important;
  font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--ngm-sage) !important;
}
body .WaGadgetContactProfile .captionContainer h4 .explanation {
  letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important;
  color: var(--ngm-gray-lt) !important; font-style: italic;
}

/* ---- data field rows: .fieldLabel (label) / .fieldBody (value) ---- */
body .WaGadgetContactProfile .fieldContainer.simpleTextContainer,
body .WaGadgetContactProfile .fieldContainer.textFieldContainer {
  border-bottom: 1px solid #F0EDE6 !important; padding: 4px 0 !important;
}
body .WaGadgetContactProfile .labeledTextContainer .fieldLabel,
body .WaGadgetContactProfile .singleStringContainer .fieldLabel,
body .WaGadgetContactProfile .fieldLabel span {
  color: var(--ngm-sage-dk) !important; font-weight: 600 !important; font-size: .85rem !important;
}
body .WaGadgetContactProfile .fieldBody,
body .WaGadgetContactProfile .fieldBody span,
body .WaGadgetContactProfile .fieldBody .label {
  color: var(--ngm-charcoal) !important; font-size: .9rem !important;
}
body .WaGadgetContactProfile .fieldBody a { color: var(--ngm-sage-dk) !important; }
/* membership-level sub-lines */
body .WaGadgetContactProfile .levelPrice { color: var(--ngm-sage-dk) !important; font-weight: 500 !important; }
body .WaGadgetContactProfile .levelRenewal,
body .WaGadgetContactProfile .levelRecurring,
body .WaGadgetContactProfile .typeInstruction {
  color: var(--ngm-gray-lt) !important; font-style: italic;
}

/* ---- Privacy tab: the "Details to show" grid (#memberFieldTable) ---- */
body .WaGadgetContactProfile .includeMeView {
  color: var(--ngm-charcoal) !important; font-weight: 600 !important; font-size: .95rem !important;
}
body .WaGadgetContactProfile #memberFieldTable {
  width: 100% !important; border-collapse: collapse !important; margin-top: 6px !important;
}
body .WaGadgetContactProfile #memberFieldTable th,
body .WaGadgetContactProfile #memberFieldTable td {
  border-bottom: 1px solid #F0EDE6 !important; padding: 12px 14px !important; vertical-align: middle !important;
}
/* three column headers: Anybody / Members / No access — sage eyebrows, centred */
body .WaGadgetContactProfile .memberFieldHeadingTD { text-align: center !important; }
body .WaGadgetContactProfile .memberFieldHeadingTitle {
  color: var(--ngm-sage) !important; font-weight: 600 !important;
  font-size: .72rem !important; letter-spacing: .12em !important; text-transform: uppercase !important;
}
/* row labels down the left (Send message form, Email, …) */
body .WaGadgetContactProfile th.memberFieldTitle { text-align: left !important; font-weight: 400 !important; }
body .WaGadgetContactProfile .memberFieldTitle span { color: var(--ngm-charcoal) !important; font-size: .9rem !important; }
/* the selected-visibility indicator cells, centred under each column */
body .WaGadgetContactProfile .memberFieldValueTD { text-align: center !important; }
body .WaGadgetContactProfile .memberFieldValueTD > div { margin: 0 auto !important; }

/* ---- Email subscriptions tab: "Subscribed" status labels ---- */
body .WaGadgetContactProfile .labeledImage span { color: var(--ngm-sage-dk) !important; font-weight: 600 !important; }

/* ---- Social network login: Connect / Disconnect as design-system chips ---- */
body .WaGadgetContactProfile .socialLogin {
  display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important;
}
body .WaGadgetContactProfile .socialLoginImg img {
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  display: inline-block !important; vertical-align: middle !important;
}
body .WaGadgetContactProfile .socialLoginName { color: var(--ngm-charcoal) !important; font-size: .9rem !important; }
body .WaGadgetContactProfile .connectExternalProfileButton,
body .WaGadgetContactProfile .disconnectExternalProfileButton {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  border: 1px solid var(--ngm-border) !important; border-radius: 999px !important;
  padding: 8px 16px !important; font-size: .85rem !important; font-weight: 600 !important;
  color: var(--ngm-sage-dk) !important; text-decoration: none !important; background: #fff !important;
  transition: border-color .18s, background .18s !important;
}
body .WaGadgetContactProfile .connectExternalProfileButton:hover,
body .WaGadgetContactProfile .disconnectExternalProfileButton:hover {
  border-color: var(--ngm-sage) !important; background: var(--ngm-sage-lt) !important;
}
/* the brand icon inside the Connect chip */
body .WaGadgetContactProfile .authenticateLoginIcon { flex-shrink: 0 !important; }

/* ---- Edit-profile mode: form fields (inputs / selects / textareas) + the
        Search boxes on the Invoices/Donations/Event tabs. In view mode the only
        inputs are hidden, so these rules only surface in edit/search. ---- */
body .WaGadgetContactProfile input[type="text"],
body .WaGadgetContactProfile input[type="email"],
body .WaGadgetContactProfile input[type="tel"],
body .WaGadgetContactProfile input[type="password"],
body .WaGadgetContactProfile input[type="search"],
body .WaGadgetContactProfile input[type="number"],
body .WaGadgetContactProfile select,
body .WaGadgetContactProfile textarea {
  font-family: var(--ngm-sans) !important; font-size: .95rem !important;
  color: var(--ngm-charcoal) !important; background: #fff !important;
  border: 1px solid var(--ngm-border) !important; border-radius: var(--ngm-radius) !important;
  padding: 10px 12px !important; box-shadow: none !important;
}
body .WaGadgetContactProfile input[type="text"]:focus,
body .WaGadgetContactProfile input[type="email"]:focus,
body .WaGadgetContactProfile input[type="tel"]:focus,
body .WaGadgetContactProfile input[type="password"]:focus,
body .WaGadgetContactProfile input[type="search"]:focus,
body .WaGadgetContactProfile input[type="number"]:focus,
body .WaGadgetContactProfile select:focus,
body .WaGadgetContactProfile textarea:focus {
  border-color: var(--ngm-sage) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(92,122,82,.14) !important;
}
/* edit-mode field labels + the "* Mandatory fields" note on-brand */
body .WaGadgetContactProfile .fieldEditor .fieldLabel,
body .WaGadgetContactProfile label { color: var(--ngm-sage-dk) !important; }

/* ---- hide the User ID row on the Profile tab (optional; mockup omits it).
        #idContainer12024901 is NGM's User ID field on this account form —
        if that field id ever changes, update or remove this line. ---- */
body .WaGadgetContactProfile #idContainer12024901 { display: none !important; }

/* ---- separate profile sub-pages (Event registrations / Invoices / Donations)
        still use generic WA table markup; kept provisional until captured live. ---- */
body [class*="EventRegistrations"] table, body [class*="Finances"] table,
body [class*="Invoices"] table, body [class*="Donations"] table {
  border-collapse: collapse !important; width: 100% !important; font-size: .95rem !important;
}
body [class*="EventRegistrations"] table th, body [class*="Finances"] table th,
body [class*="Invoices"] table th, body [class*="Donations"] table th {
  background: var(--ngm-sage-lt) !important; color: var(--ngm-sage-dk) !important;
  font-weight: 600 !important; text-align: left !important; padding: 12px 14px !important;
  border-bottom: 1px solid var(--ngm-border) !important;
}
body [class*="EventRegistrations"] table td, body [class*="Finances"] table td,
body [class*="Invoices"] table td, body [class*="Donations"] table td {
  padding: 12px 14px !important; border-bottom: 1px solid var(--ngm-border) !important;
  color: var(--ngm-charcoal) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MEMBER PUBLIC PROFILE  —  /Sys/PublicProfile
   The "My directory profile" page + what members see of each other in the
   directory. Different gadget (.WaGadgetMemberPublicProfile) than the contact
   profile, but the same inner markup (captionContainer h4 / fieldLabel /
   fieldBody / typeButton), so it gets the same skin. Verified against the live
   DOM (theme casefile_guardian.v3.0).
   ══════════════════════════════════════════════════════════════════ */
body .WaGadgetMemberPublicProfile,
body .WaGadgetMemberPublicProfile * { font-family: var(--ngm-sans) !important; }
/* member name heading (holds the name + a Send-message button) */
body .WaGadgetMemberPublicProfile .memberDirectoryDetailsHeaderContainer h2,
body .WaGadgetMemberPublicProfile h2 {
  font-family: var(--ngm-serif) !important; font-weight: 400 !important; color: var(--ngm-charcoal) !important;
  font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
  display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important;
}
/* Back link above the name */
body .WaGadgetMemberPublicProfile .pageBackContainer a {
  color: var(--ngm-sage-dk) !important; font-weight: 600 !important; font-size: .88rem !important;
  text-decoration: none !important;
}
/* section header <h4> (full-width sage eyebrow) */
body .WaGadgetMemberPublicProfile .captionContainer .fieldLabel { display: none !important; }
body .WaGadgetMemberPublicProfile .captionContainer .fieldBody {
  width: 100% !important; float: none !important;
  border-bottom: 1px solid var(--ngm-border) !important; padding-bottom: 10px !important;
}
body .WaGadgetMemberPublicProfile .captionContainer h4 {
  margin: 0 !important; font-family: var(--ngm-sans) !important; font-size: .72rem !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ngm-sage) !important;
}
/* data field rows */
body .WaGadgetMemberPublicProfile .fieldContainer.simpleTextContainer {
  border-bottom: 1px solid #F0EDE6 !important; padding: 4px 0 !important;
}
body .WaGadgetMemberPublicProfile .labeledTextContainer .fieldLabel,
body .WaGadgetMemberPublicProfile .fieldLabel span {
  color: var(--ngm-sage-dk) !important; font-weight: 600 !important; font-size: .85rem !important;
}
body .WaGadgetMemberPublicProfile .fieldBody,
body .WaGadgetMemberPublicProfile .fieldBody span,
body .WaGadgetMemberPublicProfile .fieldBody .label {
  color: var(--ngm-charcoal) !important; font-size: .9rem !important;
}
body .WaGadgetMemberPublicProfile .fieldBody a { color: var(--ngm-sage-dk) !important; }
/* Send-message button as a sage pill */
body .WaGadgetMemberPublicProfile input.typeButton {
  font-family: var(--ngm-sans) !important; background: var(--ngm-sage-dk) !important; color: #fff !important;
  border: 1px solid var(--ngm-sage-dk) !important; border-radius: 999px !important;
  padding: 10px 20px !important; font-size: .82rem !important; font-weight: 600 !important;
  cursor: pointer !important; box-shadow: none !important; text-transform: none !important;
}
body .WaGadgetMemberPublicProfile input.typeButton:hover { background: var(--ngm-sage) !important; }

/* ══════════════════════════════════════════════════════════════════
   EMAIL MEMBER  —  /Sys/PublicProfile/SendEmail  ("Send message" form)
   Reached from the Send-message button on a member's public profile.
   Gadget: .WaGadgetEmailMember. Verified against the live DOM.
   ══════════════════════════════════════════════════════════════════ */
body .WaGadgetEmailMember, body .WaGadgetEmailMember * { font-family: var(--ngm-sans) !important; }
body .WaGadgetEmailMember .pageBackContainer a {
  color: var(--ngm-sage-dk) !important; font-weight: 600 !important; font-size: .88rem !important; text-decoration: none !important;
}
body .WaGadgetEmailMember .memberDirectoryDetailsHeaderContainer h2,
body .WaGadgetEmailMember h2 {
  font-family: var(--ngm-serif) !important; font-weight: 400 !important; color: var(--ngm-charcoal) !important;
  font-size: clamp(1.9rem, 3vw, 2.4rem) !important; text-transform: none !important;
}
/* "Send message" section header */
body .WaGadgetEmailMember .captionContainer .fieldLabel { display: none !important; }
body .WaGadgetEmailMember .captionContainer .fieldBody {
  width: 100% !important; float: none !important; border-bottom: 1px solid var(--ngm-border) !important; padding-bottom: 10px !important;
}
body .WaGadgetEmailMember .captionContainer h4 {
  margin: 0 !important; font-family: var(--ngm-sans) !important; font-size: .72rem !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ngm-sage) !important;
}
/* mandatory note + field labels + required asterisks */
body .WaGadgetEmailMember .mandatoryFieldsTitle { color: var(--ngm-gray) !important; }
body .WaGadgetEmailMember .mandatoryLabel,
body .WaGadgetEmailMember .fieldLabel { color: var(--ngm-sage-dk) !important; font-weight: 600 !important; }
body .WaGadgetEmailMember .mandatorySymbol { color: var(--ngm-rose-dk) !important; }
/* inputs + textarea */
body .WaGadgetEmailMember input.typeText,
body .WaGadgetEmailMember textarea.typeText,
body .WaGadgetEmailMember textarea {
  font-family: var(--ngm-sans) !important; font-size: .95rem !important; color: var(--ngm-charcoal) !important; background: #fff !important;
  border: 1px solid var(--ngm-border) !important; border-radius: var(--ngm-radius) !important; padding: 10px 12px !important;
  box-shadow: none !important; width: 100% !important; max-width: 540px !important;
}
body .WaGadgetEmailMember input.typeText:focus,
body .WaGadgetEmailMember textarea:focus {
  border-color: var(--ngm-sage) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(92,122,82,.14) !important;
}
/* Send button (filled pill) + Cancel (outline pill) */
body .WaGadgetEmailMember input.typeButton,
body .WaGadgetEmailMember .buttonsContainer input[type="button"] {
  font-family: var(--ngm-sans) !important; background: var(--ngm-sage-dk) !important; color: #fff !important;
  border: 1px solid var(--ngm-sage-dk) !important; border-radius: 999px !important; padding: 12px 24px !important;
  font-size: .88rem !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important;
}
body .WaGadgetEmailMember input.typeButton:hover,
body .WaGadgetEmailMember .buttonsContainer input[type="button"]:hover { background: var(--ngm-sage) !important; }
body .WaGadgetEmailMember .buttonsContainer input[type="submit"] {
  font-family: var(--ngm-sans) !important; background: transparent !important; color: var(--ngm-sage-dk) !important;
  border: 1px solid var(--ngm-sage-dk) !important; border-radius: 999px !important; padding: 12px 24px !important;
  font-size: .88rem !important; font-weight: 600 !important; cursor: pointer !important; margin-left: 10px !important; box-shadow: none !important;
}
body .WaGadgetEmailMember .buttonsContainer input[type="submit"]:hover { background: var(--ngm-sage-lt) !important; }

/* ══ Transaction grids on the Invoices & Donations tabs ══
   WA renders these into <table class="genericListTable"> inside
   .WaGadgetContactProfile (states …Finances / …Donations). Verified live. */
/* toolbar: Search field + "Records found" */
body .WaGadgetContactProfile .genericListHeaderContainer .typeTextContainer { color: var(--ngm-gray) !important; }
body .WaGadgetContactProfile input.typeTextBox {
  font-family: var(--ngm-sans) !important; background: #fff !important; color: var(--ngm-charcoal) !important;
  border: 1px solid var(--ngm-border) !important; border-radius: var(--ngm-radius) !important; padding: 8px 12px !important; box-shadow: none !important;
}
body .WaGadgetContactProfile input.typeTextBox:focus {
  border-color: var(--ngm-sage) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(92,122,82,.14) !important;
}
body .WaGadgetContactProfile #idRecordsFound,
body .WaGadgetContactProfile #idRecordsFoundNumber { color: var(--ngm-charcoal) !important; font-style: normal !important; font-weight: 600 !important; }
/* the balance readout (overrides WA's inline green) */
body .WaGadgetContactProfile .totalBalance { color: var(--ngm-sage-dk) !important; font-weight: 600 !important; }
/* the grid itself */
body .WaGadgetContactProfile table.genericListTable { width: 100% !important; border-collapse: collapse !important; }
body .WaGadgetContactProfile table.genericListTable thead th {
  background: var(--ngm-sage-lt) !important; color: var(--ngm-sage-dk) !important;
  text-transform: uppercase !important; letter-spacing: .08em !important; font-size: .72rem !important;
  font-weight: 600 !important; text-align: left !important; padding: 12px 14px !important;
  border-bottom: 1px solid var(--ngm-border) !important;
}
body .WaGadgetContactProfile table.genericListTable thead th.rightAlign,
body .WaGadgetContactProfile table.genericListTable td.rightAlign { text-align: right !important; }
/* data cells — border sits on the group's bottom row so each transaction
   (a main row + its memo/"Paid:" row) reads as one block */
body .WaGadgetContactProfile table.genericListTable tbody td {
  padding: 14px 14px 4px !important; color: var(--ngm-charcoal) !important; vertical-align: top !important; border: none !important;
}
body .WaGadgetContactProfile table.genericListTable tbody td a { color: var(--ngm-sage-dk) !important; }
body .WaGadgetContactProfile table.genericListTable .memberDirectoryBottomRow {
  padding: 0 14px 14px !important; border-bottom: 1px solid #F0EDE6 !important;
  color: var(--ngm-gray-lt) !important; font-size: .82rem !important;
}
body .WaGadgetContactProfile table.genericListTable .grayedOut { color: var(--ngm-gray) !important; }
/* empty state */
body .WaGadgetContactProfile .typeTextLabelNoData { color: var(--ngm-gray-lt) !important; font-style: italic !important; }

/* account collapsed to a single full-width tile */
.ngm-hub-acct-solo{display:block;}
.ngm-hub-acct-solo .ngm-hub-acard{padding:26px 30px;}

/* profile tile sits in the hero; subtext lists the profile page's tabs */
.ngm-hub-acard-tabs{display:block;font-family:var(--ngm-sans);font-size:.78rem;color:var(--ngm-gray-lt);line-height:1.55;margin-top:7px;}
.ngm-hub-hero .ngm-hub-acct-solo{max-width:660px;margin-top:4px;}
.ngm-hub-hero .ngm-hub-acard{align-items:flex-start;}
.ngm-hub-hero .ngm-hub-acard-icon{margin-top:2px;}
.ngm-hub-hero .ngm-hub-acard-go{align-self:center;}

/* ══════════════════════════════════════════════════════════════════
   CALENDAR — MONTH GRID (live-effective)
   The rich grid rules earlier in this file are scoped under `.ngm-cal`,
   a class the live WA gadget never receives, so they never applied.
   These mirror the intent under the REAL live wrapper
   `.WaGadgetEventsStateCalendar` (confirmed from page source).
══════════════════════════════════════════════════════════════════ */
body .WaGadgetEventsStateCalendar table.EventListCalendar {
  width: 100% !important;
  /* SEPARATE + border-spacing:0 so the OUTER frame can round; overflow
     hidden clips the frame to that radius. Every inner cell is forced
     square just below, so only the frame is rounded — no cell curves. */
  border-collapse: separate !important; border-spacing: 0 !important;
  background: #fff !important; border: 1px solid var(--ngm-linen-dk) !important;
  border-radius: var(--ngm-radius-lg) !important; overflow: hidden !important;
}
/* Force EVERY structural grid element square (cells, rows, the nested
   date-number tables, the WA item cells) so no inner curve can show.
   High specificity to beat the theme; event chips are <a> and keep their
   own rounding. */
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar td,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar th,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar tr,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar tbody,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar thead,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar table,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar td.EventListCalendarItemDefault,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar td.EventListCalendarItemInactive,
html body .WaGadgetEventsStateCalendar .monthViewType table.EventListCalendar td.EventListCalendarItemSelected {
  border-radius: 0 !important;
}
/* separate mode draws no shared borders, so rebuild the grid lines:
   a right border per cell (dropped on the last column) and a top border
   on the rows that start a week (the ones carrying a date number). */
body .WaGadgetEventsStateCalendar table.EventListCalendar td,
body .WaGadgetEventsStateCalendar table.EventListCalendar th {
  border: 0 !important; border-right: 1px solid var(--ngm-linen-dk) !important;
}
body .WaGadgetEventsStateCalendar table.EventListCalendar td:last-child,
body .WaGadgetEventsStateCalendar table.EventListCalendar th:last-child { border-right: 0 !important; }
/* horizontal line between week rows: a top border on each week's date
   row (the row carrying the date numbers). Full-width grid line. */
body .WaGadgetEventsStateCalendar table.EventListCalendar tr:has(a.calendarDate) > td {
  border-top: 1px solid var(--ngm-linen-dk) !important;
}
/* …but NOT inside the nested date-number table (its <tr> also contains
   .calendarDate, so the rule above drew a stray line inside each cell).
   Strip ALL borders on nested-table cells — no inner horizontal line and
   no stray vertical line after the date number. */
body .WaGadgetEventsStateCalendar table.EventListCalendar table td,
body .WaGadgetEventsStateCalendar table.EventListCalendar table th {
  border: 0 !important;
}
/* day-of-week header band — REAL weekday text. This theme does NOT paint CSS
   ::after generated content on table cells, so we can't inject abbreviations in
   CSS. Instead the page gadget's JS wraps each header in three spans —
   <span class="ngm-wd-f">Sunday</span><span class="ngm-wd-a">Sun</span><span
   class="ngm-wd-1">S</span> — and we swap which one shows by width (display
   toggling works without pseudo content):
     desktop (>1024) = full name,  tablet (601–1024) = 3-letter,
     mobile (≤600)   = single letter. */
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader {
  background: var(--ngm-sage-lt) !important; color: var(--ngm-sage-dk) !important;
  font-family: var(--ngm-sans) !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .03em !important;
  font-size: .66rem !important; text-align: center !important; padding: 9px 2px !important;
  border-bottom: 1px solid var(--ngm-border) !important;
}
/* desktop: full name only */
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-f { display: inline !important; }
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-a,
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-1 { display: none !important; }
/* tablet: 3-letter. (If the JS hasn't run, the cell still shows WA's full text.) */
@media (max-width: 1024px) {
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-f,
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-1 { display: none !important; }
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-a { display: inline !important; }
}
/* mobile: single letter */
@media (max-width: 600px) {
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-f,
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-a { display: none !important; }
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader .ngm-wd-1 { display: inline !important; }
}
/* ALWAYS keep the weekday row visible, at EVERY width. WA's responsive
   CSS hides it below ~767px (that's the "vanishing" on tablet/phone);
   force it back unconditionally so the labels always show. */
html body .WaGadgetEventsStateCalendar table.EventListCalendar tr:first-child {
  display: table-row !important; visibility: visible !important; opacity: 1 !important;
}
html body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader {
  display: table-cell !important; visibility: visible !important; opacity: 1 !important;
}
/* day cells */
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemDefault,
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemInactive,
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemSelected {
  border-color: var(--ngm-linen-dk) !important; background: #fff !important;
}
/* days outside this month → muted cream */
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemInactive {
  background: var(--ngm-cream) !important;
}
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemInactive a.calendarDate {
  color: var(--ngm-gray-lt) !important;
}
/* today's column → soft sage wash */
body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemSelected {
  background: var(--ngm-sage-lt) !important;
}
/* the date number in each cell */
body .WaGadgetEventsStateCalendar table.EventListCalendar a.calendarDate,
body .WaGadgetEventsStateCalendar table.EventListCalendar a.calendarDate nobr {
  color: var(--ngm-charcoal) !important; font-family: var(--ngm-sans) !important;
  font-weight: 600 !important; font-size: .82rem !important; text-decoration: none !important;
}
/* ── EVENT CHIPS — colour-coded by meeting type ──────────────────────
   EVERY event styles as a chip (a:not(.calendarDate) — not only tagged
   ones), so events without a category (e.g. Newsletter submissions) look
   the same as the rest instead of falling back to a plain serif link.
   The category in data-tags sets an accent colour via the --cat custom
   property: a left bar on desktop, the solid fill on mobile. Untagged =
   sage. Add more mappings here as new meeting types appear. */
body .WaGadgetEventsStateCalendar table.EventListCalendar a:not(.calendarDate) { --cat: var(--ngm-sage); }
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="board"]            { --cat: #4A5A6A; } /* board / admin — slate */
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="potpourri"]        { --cat: #B87260; } /* Potpourri — rose   */
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="come-and-stitch"]  { --cat: #5C7A52; } /* Come & Stitch — sage */
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="stitch-in"]        { --cat: #5B7DB1; } /* Stitch-Ins — blue  */
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="sunday-afternoon"] { --cat: #A6752E; } /* Sunday Tea — gold  */
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="count-thrd"]       { --cat: #3E8578; } /* Counted Thread/NPT — teal */
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="npt"]              { --cat: #3E8578; }
body .WaGadgetEventsStateCalendar table.EventListCalendar a[data-tags*="special"]          { --cat: #8A5A7A; } /* Special — plum */

/* event chip — SOLID category fill, no left-border line, one-line title
   truncated with an ellipsis. Same look on desktop and mobile. */
body .WaGadgetEventsStateCalendar table.EventListCalendar a:not(.calendarDate) {
  display: block !important; font-family: var(--ngm-sans) !important;
  font-size: .74rem !important; line-height: 1.3 !important;
  color: #fff !important; text-decoration: none !important;
  background: var(--cat) !important; border: 0 !important;
  border-radius: 4px !important; padding: 3px 7px !important; margin: 2px 4px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
/* hover → slightly darker fill */
body .WaGadgetEventsStateCalendar table.EventListCalendar a:not(.calendarDate):hover,
body .WaGadgetEventsStateCalendar table.EventListCalendar .eventHover,
body .WaGadgetEventsStateCalendar table.EventListCalendar .eventContainerHover a:not(.calendarDate) {
  filter: brightness(0.92) !important;
}
/* the time label JS injects above an event — plain rose text, NO box.
   WA's theme wraps it in a bordered/backed chip (the "blue line" the user
   saw); strip all of that so it's just the time. */
body .WaGadgetEventsStateCalendar table.EventListCalendar .eventTime {
  font-family: var(--ngm-sans) !important; font-size: .68rem !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
  color: var(--ngm-rose) !important; padding: 0 !important; margin: 2px 0 0 !important;
  background: none !important; background-color: transparent !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
/* strip the tan card WA's theme puts behind each event (background +
   border + radius + shadow on the wrapper divs), so the time is just
   plain text over the cell and only the coloured chip has a fill.
   The chips are <a> and are unaffected. */
body .WaGadgetEventsStateCalendar table.EventListCalendar td div {
  background: none !important; background-color: transparent !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
/* ── MOBILE: match Google Calendar's month view. All seven days fit on
   screen (no sideways scroll); the weekday headers show the 3-letter
   abbreviation (Sun Mon … from the JS span swap above); and every event
   becomes a compact solid category-coloured bar showing its title, truncated
   to the cell. The time label is hidden here — exactly as Google's month view
   does — to leave room for titles. */
@media (max-width: 720px) {
  /* fixed layout = equal columns that all fit, and lets titles ellipsis */
  body .WaGadgetEventsStateCalendar table.EventListCalendar {
    width: 100% !important; min-width: 0 !important; table-layout: fixed !important;
  }
  /* equal 1/7 columns, borders counted INSIDE the width so all seven fit
     the viewport exactly (no overflow), and clip anything that spills */
  body .WaGadgetEventsStateCalendar table.EventListCalendar td,
  body .WaGadgetEventsStateCalendar table.EventListCalendar th {
    box-sizing: border-box !important; width: 14.28% !important; overflow: hidden !important;
  }
  /* weekday header on phones: FORCE it visible (WA's own mobile CSS hides
     the day-of-week row — that's why the days vanished on small screens)
     and size the 3-letter abbreviation shown by the span swap above. */
  html body .WaGadgetEventsStateCalendar table.EventListCalendar tr:first-child,
  html body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader {
    display: table-cell !important; visibility: visible !important; opacity: 1 !important;
  }
  html body .WaGadgetEventsStateCalendar table.EventListCalendar tr:first-child {
    display: table-row !important;
  }
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarHeader {
    font-size: .62rem !important; letter-spacing: 0 !important; padding: 6px 0 !important;
    color: var(--ngm-sage-dk) !important;
  }
  /* small date numbers */
  body .WaGadgetEventsStateCalendar table.EventListCalendar a.calendarDate,
  body .WaGadgetEventsStateCalendar table.EventListCalendar a.calendarDate nobr { font-size: .68rem !important; }
  /* tighten day-cell padding so the bars use the full column width */
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemDefault,
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemInactive,
  body .WaGadgetEventsStateCalendar table.EventListCalendar td.EventListCalendarItemSelected { padding: 2px 1px !important; }
  /* hide the time label */
  body .WaGadgetEventsStateCalendar table.EventListCalendar .eventTime { display: none !important; }
  /* unclip the WA wrapper div around each event so the bar can show */
  body .WaGadgetEventsStateCalendar table.EventListCalendar td div:has(> a:not(.calendarDate)) { height: auto !important; overflow: visible !important; }
  /* events → solid category-coloured bars with white, truncated titles */
  body .WaGadgetEventsStateCalendar table.EventListCalendar a:not(.calendarDate) {
    display: block !important; background: var(--cat) !important; color: #fff !important;
    border-left: 0 !important; border-radius: 3px !important;
    font-family: var(--ngm-sans) !important; font-size: .6rem !important; font-weight: 500 !important;
    line-height: 1.4 !important; padding: 2px 4px !important; margin: 1px 2px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  body .WaGadgetEventsStateCalendar table.EventListCalendar a:not(.calendarDate):hover { filter: brightness(0.92) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   EVENT — SINGLE EVENT DETAIL PAGE  (.WaGadgetEventsStateDetails)
   Confirmed from page source: Back link, page title, When/Location
   info box, description body. The nested corner-div box wrappers are
   left structurally alone; we skin the readable parts only.
══════════════════════════════════════════════════════════════════ */
/* Back link */
body .WaGadgetEventsStateDetails .pageBackContainer a,
body .WaGadgetEventsStateDetails a.eventBackLink {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important; font-weight: 500 !important;
  color: var(--ngm-sage-dk) !important; text-decoration: none !important;
}
body .WaGadgetEventsStateDetails .pageBackContainer a:hover,
body .WaGadgetEventsStateDetails a.eventBackLink:hover { color: var(--ngm-sage) !important; }
/* Event title */
body .WaGadgetEventsStateDetails h1.pageTitle,
body .WaGadgetEventsStateDetails h1.SystemPageTitle {
  font-family: var(--ngm-serif) !important; font-weight: 400 !important;
  color: var(--ngm-charcoal) !important; line-height: 1.15 !important;
}
/* When / Location info box → sage-lt panel */
body .WaGadgetEventsStateDetails .boxInfoContainer {
  background: var(--ngm-sage-lt) !important; border: 1px solid var(--ngm-border) !important;
  border-radius: var(--ngm-radius) !important; padding: 8px 22px !important;
}
body .WaGadgetEventsStateDetails ul.boxInfo { list-style: none !important; margin: 0 !important; padding: 0 !important; }
body .WaGadgetEventsStateDetails ul.boxInfo li { padding: 8px 0 !important; }
body .WaGadgetEventsStateDetails .eventInfoBoxLabel {
  display: block !important; font-family: var(--ngm-sans) !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  font-size: .68rem !important; font-weight: 600 !important; color: var(--ngm-sage-dk) !important;
  margin-bottom: 2px !important;
}
body .WaGadgetEventsStateDetails .eventInfoBoxValue,
body .WaGadgetEventsStateDetails .eventInfoBoxValue strong,
body .WaGadgetEventsStateDetails .eventInfoBoxValue span {
  font-family: var(--ngm-sans) !important; font-size: .95rem !important; color: var(--ngm-charcoal) !important;
}
/* description body — set a readable fallback; inline fonts in content still win where present */
body .WaGadgetEventsStateDetails .boxBodyContentContainer .inner {
  font-family: var(--ngm-sans) !important; color: var(--ngm-charcoal) !important; line-height: 1.7 !important;
}

/* ══════════════════════════════════════════════════════════════════
   MEMBER DIRECTORY  (.WaGadgetMemberDirectory)
   Confirmed from page source. Simple-search chrome + advanced-search
   form. NOTE: the result cards in .memberDirectoryOuterContainer are
   rendered by WA's JS and are empty in page source, so they can't be
   skinned blind here — this styles the search UI around them.
══════════════════════════════════════════════════════════════════ */
/* simple search: label + input */
body .WaGadgetMemberDirectory #memberDirectorySearchArea label,
body .WaGadgetMemberDirectory .memberDirectorySearchArea label {
  font-family: var(--ngm-sans) !important; font-weight: 600 !important;
  color: var(--ngm-sage-dk) !important; margin-right: 8px !important;
}
body .WaGadgetMemberDirectory .memberDirectorySearchArea input[type="text"] {
  font-family: var(--ngm-sans) !important; font-size: .95rem !important;
  color: var(--ngm-charcoal) !important; background: #fff !important;
  border: 1px solid var(--ngm-border) !important; border-radius: var(--ngm-radius) !important;
  padding: 9px 14px !important; min-width: 260px !important;
}
body .WaGadgetMemberDirectory .memberDirectorySearchArea input[type="text"]:focus {
  border-color: var(--ngm-sage) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(92,122,82,.14) !important;
}
/* "Found: N" readout */
body .WaGadgetMemberDirectory .searchResult,
body .WaGadgetMemberDirectory .searchResult #membersFound {
  font-family: var(--ngm-sans) !important; color: var(--ngm-gray) !important; font-size: .9rem !important;
}
body .WaGadgetMemberDirectory .searchResult #membersFound { color: var(--ngm-sage-dk) !important; font-weight: 600 !important; font-style: normal !important; }
/* "Advanced search..." / "Go to simple search" links */
body .WaGadgetMemberDirectory .advSearchContainerLink a,
body .WaGadgetMemberDirectory .exitAdvSearchContainer a,
body .WaGadgetMemberDirectory .clearValuesContainer a {
  font-family: var(--ngm-sans) !important; font-weight: 500 !important;
  color: var(--ngm-sage-dk) !important; text-decoration: none !important;
}
body .WaGadgetMemberDirectory .advSearchContainerLink a:hover,
body .WaGadgetMemberDirectory .exitAdvSearchContainer a:hover,
body .WaGadgetMemberDirectory .clearValuesContainer a:hover { color: var(--ngm-sage) !important; }
/* advanced search: each criterion row */
body .WaGadgetMemberDirectory .criteriaListItem .fieldLabel.labelColumn,
body .WaGadgetMemberDirectory .criteriaListItem .fieldLabel {
  font-family: var(--ngm-sans) !important; font-weight: 600 !important; color: var(--ngm-charcoal) !important;
}
body .WaGadgetMemberDirectory .criteriaListItem select,
body .WaGadgetMemberDirectory .criteriaListItem input[type="text"] {
  font-family: var(--ngm-sans) !important; font-size: .92rem !important; color: var(--ngm-charcoal) !important;
  background: #fff !important; border: 1px solid var(--ngm-border) !important;
  border-radius: 10px !important; padding: 7px 11px !important;
}
body .WaGadgetMemberDirectory .criteriaListItem select:focus,
body .WaGadgetMemberDirectory .criteriaListItem input[type="text"]:focus {
  border-color: var(--ngm-sage) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(92,122,82,.14) !important;
}
/* the "or" separator between Search and Go-to-simple */
body .WaGadgetMemberDirectory .separatorTextContainer {
  font-family: var(--ngm-sans) !important; color: var(--ngm-gray-lt) !important;
  font-style: italic !important; text-transform: lowercase !important;
}
/* Search submit → filled sage pill */
body .WaGadgetMemberDirectory input.searchButton {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important; font-weight: 600 !important;
  color: #fff !important; background: var(--ngm-sage-dk) !important;
  border: 1.5px solid var(--ngm-sage-dk) !important; border-radius: 999px !important;
  padding: 9px 26px !important; cursor: pointer !important; transition: background .15s ease !important;
}
body .WaGadgetMemberDirectory input.searchButton:hover { background: var(--ngm-sage) !important; border-color: var(--ngm-sage) !important; }
/* ── RESULT ROWS (confirmed from a rendered row) ──
   The results are a table of clickable rows (tr.normal) with three
   columns: name (h5>a), location (.memberValue lines), contact
   (email link + phone). JS toggles a highlight class on hover; we
   also style :hover so the whole row reads as a clickable card. */
body .WaGadgetMemberDirectory .memberDirectoryOuterContainer table { width: 100% !important; border-collapse: collapse !important; }
body .WaGadgetMemberDirectory tr.normal { cursor: pointer !important; transition: background .12s ease !important; }
body .WaGadgetMemberDirectory tr.normal:hover,
body .WaGadgetMemberDirectory tr.over { background: var(--ngm-sage-lt) !important; }
body .WaGadgetMemberDirectory td.memberDirectoryColumn1,
body .WaGadgetMemberDirectory td.memberDirectoryColumn2,
body .WaGadgetMemberDirectory td.memberDirectoryColumn3 {
  padding: 14px 16px !important; vertical-align: top !important;
  border-bottom: 1px solid var(--ngm-linen-dk) !important;
}
/* member name */
body .WaGadgetMemberDirectory td.memberDirectoryColumn1 h5 { margin: 0 !important; }
body .WaGadgetMemberDirectory td.memberDirectoryColumn1 h5 a {
  font-family: var(--ngm-sans) !important; font-size: 1rem !important; font-weight: 600 !important;
  color: var(--ngm-sage-dk) !important; text-decoration: none !important;
}
body .WaGadgetMemberDirectory tr.normal:hover td.memberDirectoryColumn1 h5 a { color: var(--ngm-sage) !important; }
/* secondary values (city / state / phone) */
body .WaGadgetMemberDirectory .memberValue {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important; color: var(--ngm-gray) !important; line-height: 1.5 !important;
}
/* email links stay sage */
body .WaGadgetMemberDirectory .memberValue a { color: var(--ngm-sage-dk) !important; text-decoration: none !important; }
body .WaGadgetMemberDirectory .memberValue a:hover { text-decoration: underline !important; }
/* column header row, if present */
body .WaGadgetMemberDirectory .memberDirectoryOuterContainer th {
  font-family: var(--ngm-sans) !important; text-transform: uppercase !important; letter-spacing: .07em !important;
  font-size: .7rem !important; font-weight: 600 !important; color: var(--ngm-sage-dk) !important;
  background: var(--ngm-sage-lt) !important; text-align: left !important; padding: 10px 16px !important;
  border-bottom: 1px solid var(--ngm-border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MEMBERSHIP APPLICATION / JOIN WIZARD — remaining pieces
   (.WaGadgetMembershipApplication / .WaGadgetPublicWizard)
   The fonts, field rows, level pricing, inputs, and .stylizedButton are
   handled earlier in this file. These fill the confirmed gaps: the step
   heading, mandatory markers, field hints, checkbox groups, and the
   Next / Submit / Cancel step buttons (plain WA submit inputs, not
   .stylizedButton, so they need their own pill treatment).
══════════════════════════════════════════════════════════════════ */
body .WaGadgetMembershipApplication h3.formTitle,
body .WaGadgetPublicWizard h3.formTitle {
  font-family: var(--ngm-serif) !important; font-weight: 400 !important;
  color: var(--ngm-charcoal) !important; font-size: 1.6rem !important; line-height: 1.2 !important;
}
/* mandatory field label + asterisk */
body .WaGadgetMembershipApplication .mandatoryLabel,
body .WaGadgetPublicWizard .mandatoryLabel {
  font-family: var(--ngm-sans) !important; font-weight: 600 !important; color: var(--ngm-charcoal) !important;
}
body .WaGadgetMembershipApplication .mandatorySymbol,
body .WaGadgetPublicWizard .mandatorySymbol { color: var(--ngm-rose) !important; font-weight: 700 !important; }
/* input hint text (e.g. "Enter as XXX-XXX-XXXX") */
body .WaGadgetMembershipApplication .typeInstruction,
body .WaGadgetPublicWizard .typeInstruction {
  font-family: var(--ngm-sans) !important; font-size: .8rem !important; color: var(--ngm-gray-lt) !important; margin-top: 3px !important;
}
/* checkbox-group field label stays on-brand */
body .WaGadgetMembershipApplication .checkboxGroupContainer .fieldLabel,
body .WaGadgetPublicWizard .checkboxGroupContainer .fieldLabel {
  font-family: var(--ngm-sans) !important; font-weight: 600 !important; color: var(--ngm-charcoal) !important;
}
/* Next / Submit → filled sage pill */
body .WaGadgetMembershipApplication input.nextButton:not(.hidden),
body .WaGadgetMembershipApplication input.submitApplicationButton,
body .WaGadgetPublicWizard input.nextButton:not(.hidden),
body .WaGadgetPublicWizard input.submitApplicationButton {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important; font-weight: 600 !important;
  color: #fff !important; background: var(--ngm-sage-dk) !important;
  border: 1.5px solid var(--ngm-sage-dk) !important; border-radius: 999px !important;
  padding: 10px 30px !important; cursor: pointer !important; transition: background .15s ease !important;
}
body .WaGadgetMembershipApplication input.nextButton:not(.hidden):hover,
body .WaGadgetMembershipApplication input.submitApplicationButton:hover,
body .WaGadgetPublicWizard input.nextButton:not(.hidden):hover,
body .WaGadgetPublicWizard input.submitApplicationButton:hover { background: var(--ngm-sage) !important; border-color: var(--ngm-sage) !important; }
/* Cancel (no-script submit) → outline pill */
body .WaGadgetMembershipApplication input[name$="cancelNoScript"],
body .WaGadgetPublicWizard input[name$="cancelNoScript"] {
  font-family: var(--ngm-sans) !important; font-size: .9rem !important; font-weight: 600 !important;
  color: var(--ngm-sage-dk) !important; background: transparent !important;
  border: 1.5px solid var(--ngm-sage-dk) !important; border-radius: 999px !important;
  padding: 10px 26px !important; cursor: pointer !important; transition: all .15s ease !important;
}
body .WaGadgetMembershipApplication input[name$="cancelNoScript"]:hover,
body .WaGadgetPublicWizard input[name$="cancelNoScript"]:hover { background: var(--ngm-sage-dk) !important; color: #fff !important; }