@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* ==========================================================================
   MOAB CARELINK — UNIFIED STYLESHEET
   Primary teal · warm clay accent · deep forest for hero · sand neutrals
   ========================================================================== */

:root {
  /* ============================================================
     Moab CareLink — Samantha-spec palette (April 2026)
     Main bg #F7F6F2 · Header/Footer #355C66 · Buttons #5D8C8A · Headlines #2F3E46 · Accent #C69C7B
     ============================================================ */

  /* Primary brand palette */
  --primary:    #5D8C8A;       /* button teal (per spec) */
  --primary-dk: #355C66;       /* header/footer teal (per spec) */
  --primary-lt: #DCE3DD;       /* soft sage-mist */
  --accent:     #C69C7B;       /* warm light copper (per spec) */
  --accent-dk:  #A07A5A;       /* deeper copper for hovers */
  --accent-lt:  #EBDBCB;       /* very soft warm blush */

  /* Named palette aliases */
  --sage:       #DCE3DD;       /* soft sage-mist */
  --sage-lt:    #E8EDE5;       /* lighter sage-mist */
  --sage-dk:    #B6C2B8;       /* deeper sage */
  --clay:       #C69C7B;       /* warm copper — matches --accent */
  --clay-lt:    #EBDBCB;       /* soft copper blush */
  --forest:     #5D8C8A;       /* button teal — matches --primary */
  --forest-dk:  #355C66;       /* header/footer teal — matches --primary-dk */
  --sand:       #F7F6F2;       /* main page bg per spec */
  --sand-dk:    #EBE9E1;       /* slightly darker cream surface */

  /* Neutrals */
  --bg:         #F7F6F2;       /* main bg per spec */
  --bg-white:   #FCFBF7;       /* very warm near-white */
  --bg-soft:    #EBE9E1;       /* soft cream surface */
  --bg-main:    #F7F6F2;       /* main bg per spec */
  --text-dark:  #2F3E46;       /* headline color per spec — cool charcoal */
  --text-mid:   #4A5660;       /* mid gray with cool undertone */
  --text-light: #6E7780;       /* light cool gray */
  --text-soft:  #6E7780;       /* matches text-light */
  --border:     rgba(53, 92, 102, 0.18);
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --shadow-soft:0 4px 20px rgba(53, 92, 102, 0.08);
  --shadow-md:  0 8px 32px rgba(53, 92, 102, 0.12);
  --transition: all 0.3s ease;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-dark);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent); }
ul { list-style: none; }

/* ============== TYPOGRAPHY ============== */
h1,h2,h3,h4 { font-family: 'Playfair Display', serif; line-height: 1.3; color: var(--text-dark); }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 600; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 700; }
p  { margin-bottom: 1em; color: var(--text-mid); }
p:last-child { margin-bottom: 0; }
strong { color: var(--text-dark); font-weight: 700; }

/* ============== SKIP LINK ============== */
.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--primary-dk); color: #fff;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-weight: 700; z-index: 9999; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ============== EMERGENCY STRIP ============== */
.emergency-strip {
  background: var(--primary-dk); color: #fff; text-align: center;
  padding: 8px 20px; font-size: 0.9rem;
  display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
}

/* ============== NAVIGATION ============== */
.nav-wrapper {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 12px rgba(53, 92, 102, 0.07);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 1rem;
}
.nav-logo-img { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img img {
  height: 60px; width: auto; display: block;
  border: none; outline: none; box-shadow: none;
}
.nav-brand {
  display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
}
.nav-brand-img {
  height: 52px; width: auto; display: block;
  border: none; outline: none; box-shadow: none;
}
.nav-brand-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--forest);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-brand-accent {
  color: var(--clay);
}
.nav-brand:hover .nav-brand-text { color: var(--forest-dk); }
.nav-links {
  display: flex; gap: 0.1rem; align-items: center; flex: 1; justify-content: center;
}
.nav-links li { list-style: none; }
.nav-links a {
  padding: 0.4rem 0.75rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; color: var(--text-mid); font-weight: 400; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--primary-lt); color: var(--primary-dk);
}
.nav-cta { flex-shrink: 0; }
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer; padding: 8px; border-radius: var(--radius-sm);
  background: none; border: none; z-index: 300;
}
.hamburger span {
  display: block; width: 24px; height: 2px; background: var(--primary-dk);
  border-radius: 2px; transition: var(--transition);
}

/* ============== LAYOUT HELPERS ============== */
.container        { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.container-narrow { max-width: 820px;  margin: 0 auto; padding: 0 2rem; }
.section          { padding: 4.5rem 0; }
.section-sm       { padding: 2.5rem 0; }

.bg-white   { background: var(--bg-white); }
.bg-soft    { background: var(--bg-soft); }
.bg-main    { background: var(--bg); }
.bg-sand    { background: var(--sand); }
.bg-sage    { background: var(--sage-lt); }
.bg-primary { background: var(--primary); color: #fff; }
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary p { color: #fff; }

.divider        { height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); border: none; margin: 3.5rem 0; }
.divider-soft   { height: 1px; background: var(--border); border: none; margin: 2.5rem 0; }

/* ============== HERO — HOMEPAGE (matches the calm welcoming reference) ============== */
.hero-calm {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(217, 222, 208, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(198, 156, 123, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--sand) 0%, #F8F2E6 100%);
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  position: relative;
}
.hero-calm .hero-pill {
  display: inline-block;
  background: var(--sage-lt);
  color: var(--forest);
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}
.hero-calm h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--forest);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.1;
  max-width: 18ch;
  margin: 0 auto 1.5rem;
}
.hero-calm .hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text-mid);
  max-width: 62ch;
  margin: 0 auto 2.25rem;
  line-height: 1.75;
}
.hero-calm-ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 760px;
  margin: 0 auto 2rem;
}
.hero-calm-ctas-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
}
.hero-card-link.for-now .hc-icon {
  background: linear-gradient(135deg, var(--clay-lt), #F0DCC9);
  color: var(--forest);
}
.hero-card-link.for-now .hc-arrow { color: var(--forest); }
.hero-card-link {
  background: #fff;
  border: 1px solid rgba(47,79,79,0.12);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  display: flex; gap: 1rem; align-items: flex-start;
  text-decoration: none;
  color: var(--text-dark);
}
.hero-card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  color: var(--text-dark);
}
.hero-card-link .hc-icon {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.hero-card-link.for-caregivers .hc-icon {
  background: linear-gradient(135deg, var(--sage-lt), #E7EFE5);
  color: var(--forest);
}
.hero-card-link.for-patients .hc-icon {
  background: linear-gradient(135deg, var(--sand), #EEE3CF);
  color: var(--forest);
}
.hero-card-link h3 {
  font-size: 1.15rem; margin-bottom: 0.3rem;
  color: var(--forest); font-weight: 700;
}
.hero-card-link p {
  font-size: 0.92rem; color: var(--text-light); margin: 0; line-height: 1.55;
}
.hero-card-link .hc-arrow {
  font-size: 0.85rem; font-weight: 700;
  color: var(--forest); margin-top: 0.55rem; display: inline-block;
}
.hero-card-link.for-patients .hc-arrow { color: var(--forest); }

.hero-calm .scroll-hint {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text-light);
  margin-top: 1rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
.hero-calm .scroll-hint::after {
  content: "↓"; font-size: 1.2rem; animation: bounceY 2s infinite;
}
@keyframes bounceY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(4px); }
}

/* ============== HERO — interior pages (compact) ============== */
.page-header {
  background: linear-gradient(145deg, var(--bg-white) 0%, var(--bg-soft) 100%);
  padding: 3.5rem 2rem 2.5rem; border-bottom: 1px solid var(--border);
}
.page-header h1 { margin-bottom: 0.75rem; }
.page-header p  { font-size: 1.1rem; color: var(--text-light); max-width: 640px; margin: 0; }

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem; border-radius: 50px;
  font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
  border: 2px solid transparent; text-decoration: none;
  white-space: nowrap; line-height: 1.3;
}
.btn-primary  { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover  { background: var(--primary-dk); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(53, 92, 102, 0.28); }
.btn-accent   { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover   { background: var(--accent-dk); color: #fff; transform: translateY(-1px); }
.btn-outline  { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover  { background: var(--primary-lt); color: var(--primary-dk); }
.btn-sage     { background: var(--sage); color: var(--forest); border-color: var(--sage); font-weight: 700; }
.btn-sage:hover     { background: var(--sage-dk); color: #fff; transform: translateY(-1px); }
.btn-clay     { background: var(--clay); color: #fff; border-color: var(--clay); }
.btn-clay:hover     { background: var(--accent-dk); color: #fff; }
.btn-forest   { background: var(--forest); color: #fff; border-color: var(--forest); }
.btn-forest:hover   { background: var(--forest-dk); color: #fff; }
.btn-ghost    { background: transparent; color: var(--text-mid); border-color: var(--border); }
.btn-ghost:hover    { background: var(--bg-soft); color: var(--text-dark); }
.btn-white    { background: #fff; color: var(--primary-dk); border-color: #fff; }
.btn-white:hover    { background: var(--primary-lt); }
.btn-sm       { padding: 0.5rem 1.2rem; font-size: 0.88rem; }
.btn-lg       { padding: 0.9rem 2.2rem; font-size: 1.05rem; }

/* ============== CARDS ============== */
.card {
  background: var(--bg-white); border-radius: var(--radius-md);
  padding: 2rem; box-shadow: var(--shadow-soft);
  border: 1px solid var(--border); transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-soft  { background: var(--bg-soft); border-color: var(--primary-lt); }
.card-sand  { background: var(--sand); border-color: var(--sand-dk); }
.card-sage  { background: var(--sage-lt); border-color: var(--sage); }
.card-clay  { background: var(--clay-lt); border-color: var(--clay); }
.card-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.card-primary h2, .card-primary h3, .card-primary h4 { color: #fff; }
.card-primary p { color: rgba(255,255,255,0.88); }

/* Clickable card variant — used for assessment links, etc. Whole card is the link. */
a.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.card-link:hover,
a.card-link:focus {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary-lt);
  text-decoration: none;
  color: inherit;
  outline: none;
}
a.card-link h4 {
  color: var(--text-dark);
}

/* ============== GRIDS ============== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }

/* ============== SECTION HEADERS ============== */
.section-header { margin-bottom: 2.5rem; }
.section-header.center { text-align: center; }
.section-header h2 { margin-bottom: 0.75rem; }
.section-header p { font-size: 1.05rem; color: var(--text-light); max-width: 620px; }
.section-header.center p { margin: 0 auto; }
.section-label {
  display: inline-block; font-size: 1.05rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.85rem;
}

/* ============== ACCORDION ============== */
.accordion { margin-bottom: 0.6rem; }
.accordion-btn {
  width: 100%; background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1.1rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-family: 'Lato', sans-serif; font-size: 1rem;
  font-weight: 700; color: var(--text-dark); text-align: left;
  transition: var(--transition); gap: 1rem;
}
.accordion-btn:hover { background: var(--bg-soft); border-color: var(--primary); }
.accordion-btn.open {
  background: var(--primary-lt); border-color: var(--primary);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.accordion-icon { font-size: 1.2rem; transition: transform 0.3s ease; flex-shrink: 0; color: var(--primary); }
.accordion-btn.open .accordion-icon { transform: rotate(45deg); }
.accordion-body {
  display: none; background: var(--bg-white); border: 1px solid var(--border);
  border-top: none; border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm); padding: 1.5rem 1.7rem;
}
.accordion-body.open { display: block; }
.accordion-body ul { list-style: disc; padding-left: 1.5rem; }
.accordion-body ul li { margin-bottom: 0.45rem; color: var(--text-mid); }
.accordion-body p { margin-bottom: 0.7rem; }

/* ============== TABS ============== */
.tab-nav {
  display: flex; gap: 0.5rem; margin-bottom: 2rem;
  background: var(--bg-soft); padding: 0.45rem;
  border-radius: var(--radius-md); flex-wrap: wrap;
}
.tab-btn {
  flex: 1; min-width: 110px; padding: 0.65rem 1.2rem;
  border: none; background: transparent; border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700;
  color: var(--text-light); cursor: pointer; transition: var(--transition); text-align: center;
}
.tab-btn:hover { background: rgba(255,255,255,0.7); color: var(--text-dark); }
.tab-btn.active { background: var(--bg-white); color: var(--primary-dk); box-shadow: 0 2px 10px rgba(53, 92, 102, 0.10); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============== RESOURCE / LISTING CARDS ============== */
.resource-card {
  background: var(--bg-white); border-radius: var(--radius-md);
  padding: 1.75rem; box-shadow: var(--shadow-soft);
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
}
.resource-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.resource-card .resource-category {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 0.65rem;
}
.resource-card p { font-size: 0.95rem; margin-bottom: 0.75rem; }

.listing-card {
  background: var(--bg-white); border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem; box-shadow: var(--shadow-soft);
  border: 1px solid var(--border); display: flex; flex-direction: column;
  gap: 0.5rem; transition: var(--transition);
}
.listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-tag {
  display: inline-block; background: var(--primary-lt); color: var(--primary-dk);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.2rem 0.7rem; border-radius: 20px;
  margin-bottom: 0.25rem; width: fit-content;
}
.listing-card h3 { font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--text-dark); }
.listing-card p  { font-size: 0.95rem; color: var(--text-light); flex: 1; }

/* ============== FILTER BAR ============== */
.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filter-btn {
  padding: 0.45rem 1.15rem; border-radius: 50px; border: 2px solid var(--border);
  background: var(--bg-white); font-family: 'Lato', sans-serif;
  font-size: 0.88rem; font-weight: 700; color: var(--text-mid);
  cursor: pointer; transition: var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ============== STEP CARDS ============== */
.step-card {
  display: flex; gap: 1.5rem; align-items: flex-start;
  background: var(--bg-white); border-radius: var(--radius-md);
  padding: 1.75rem 2rem; box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}
.step-number {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(53, 92, 102, 0.22);
}
.step-content h3 { margin-bottom: 0.4rem; font-size: 1.15rem; }
.step-content p  { color: var(--text-mid); margin-bottom: 0; }

/* ============== PILLS ============== */
.pill {
  display: inline-block; padding: 0.3rem 0.85rem;
  border-radius: 20px; font-size: 0.8rem; font-weight: 700;
}
.pill-primary { background: var(--primary-lt); color: var(--primary-dk); }
.pill-accent  { background: var(--accent-lt); color: var(--accent-dk); }
.pill-sage    { background: var(--sage-lt); color: var(--forest); }
.pill-blue    { background: var(--primary-lt); color: var(--primary-dk); }
.pill-clay    { background: var(--clay-lt); color: var(--accent-dk); }

/* ============== INFO BOX ============== */
.info-box {
  background: var(--bg-soft); border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.2rem 1.5rem; margin: 1.25rem 0;
}
.info-box.warning { background: rgba(198, 156, 123, 0.10); border-left-color: var(--accent); }
.info-box.forest  { background: rgba(47,79,79,0.08); border-left-color: var(--forest); }
.info-box p { margin-bottom: 0.5rem; }
.info-box p:last-child { margin-bottom: 0; }
.info-box h4 { margin-bottom: 0.5rem; }

/* ============== CHECKLIST ============== */
.checklist { list-style: none; padding: 0; }
.checklist li {
  padding: 0.55rem 0 0.55rem 2rem; position: relative; color: var(--text-mid);
  border-bottom: 1px solid var(--border); font-size: 0.98rem;
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
  content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: 900;
}

/* ============== DISCLAIMER BOX / STRIP ============== */
.disclaimer-box {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 2rem 2.5rem; text-align: center;
}
.disclaimer-box p {
  color: var(--text-light); font-size: 1rem; line-height: 1.8; margin-bottom: 0;
}
.disclaimer-strip {
  background: var(--bg-soft); border-top: 1px solid var(--border);
  padding: 1.1rem 2rem; text-align: center;
}
.disclaimer-strip p {
  margin: 0; font-size: 0.88rem; color: var(--text-light); line-height: 1.6;
}

/* ============== PHONE LINK ============== */
a.phone-link {
  color: var(--primary-dk); font-weight: 700; text-decoration: underline;
  text-decoration-color: rgba(53, 92, 102, 0.38); text-underline-offset: 3px;
}
a.phone-link:hover { color: var(--accent); }

/* ============== BURNOUT QUIZ (homepage) ============== */
.quiz-card {
  background: var(--bg-white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-md);
  border: 1px solid var(--border); max-width: 680px; margin: 0 auto;
}
.quiz-progress {
  height: 6px; background: var(--primary-lt); border-radius: 10px;
  margin-bottom: 2rem; overflow: hidden;
}
.quiz-progress-fill {
  height: 100%; background: linear-gradient(to right, var(--primary), var(--primary-dk));
  border-radius: 10px; transition: width 0.4s ease;
}
.quiz-question {
  font-family: 'Playfair Display', serif; font-size: 1.2rem;
  color: var(--text-dark); margin-bottom: 1.5rem; line-height: 1.55;
}
.quiz-options { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.5rem; }
.quiz-option {
  padding: 0.9rem 1.35rem; border-radius: var(--radius-sm);
  border: 2px solid var(--border); background: var(--bg);
  font-family: 'Lato', sans-serif; font-size: 1rem;
  color: var(--text-mid); cursor: pointer; text-align: left; transition: var(--transition);
}
.quiz-option:hover { border-color: var(--primary); background: var(--primary-lt); color: var(--primary-dk); }
.quiz-option.selected { border-color: var(--primary); background: var(--primary-lt); color: var(--primary-dk); font-weight: 700; }
.quiz-nav { display: flex; justify-content: space-between; gap: 1rem; }
.quiz-result { text-align: center; }
.quiz-result-icon { font-size: 3rem; margin-bottom: 1rem; }
.quiz-result h3 { margin-bottom: 0.75rem; }
.quiz-result p { margin-bottom: 1rem; }
.quiz-result-links { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.75rem; }
.quiz-result-group {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.quiz-result-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}
.quiz-result-link {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.4rem; background: var(--bg-soft);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--primary-dk); font-weight: 700; transition: var(--transition);
}
.quiz-result-link:hover { background: var(--primary-lt); }

/* ============== SIMPLE 5-Q FATIGUE TOGGLE (homepage shorter tool) ============== */
.fatigue-question {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.fatigue-question:last-child { border-bottom: none; }
.fatigue-question p { margin: 0; font-size: 1rem; color: var(--text-dark); flex: 1; }
.fatigue-toggle { display: flex; gap: 0.5rem; flex-shrink: 0; }
.fatigue-btn {
  padding: 0.4rem 1rem; border-radius: 50px; border: 2px solid var(--border);
  background: var(--bg); font-family: 'Lato', sans-serif; font-size: 0.9rem;
  font-weight: 700; cursor: pointer; transition: var(--transition); color: var(--text-mid);
}
.fatigue-btn.yes.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.fatigue-btn.no.selected  { background: var(--primary); color: #fff; border-color: var(--primary); }
.fatigue-result {
  margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--radius-md);
  text-align: center; display: none;
}
.fatigue-result.show { display: block; }
.fatigue-result.mild        { background: var(--primary-lt); border: 1px solid var(--primary); }
.fatigue-result.significant { background: var(--accent-lt); border: 1px solid var(--accent); }
.fatigue-result h4 { margin-bottom: 0.5rem; }

/* ============== BURDEN SELF-CHECK (22 Q) ============== */
.zbi-card {
  background: var(--bg-white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-md);
  border: 1px solid var(--border); max-width: 780px; margin: 0 auto;
}
.zbi-intro {
  background: var(--bg-soft); padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm); margin-bottom: 2rem;
  border-left: 4px solid var(--primary);
}
.zbi-intro p { font-size: 0.95rem; margin-bottom: 0.5rem; color: var(--text-mid); }
.zbi-intro p:last-child { margin-bottom: 0; }
.zbi-question-num {
  font-size: 0.82rem; color: var(--primary); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem;
  display: block;
}
.zbi-scale {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem; margin-bottom: 1rem;
}
.zbi-scale button {
  padding: 0.7rem 0.3rem; border-radius: var(--radius-sm);
  border: 2px solid var(--border); background: var(--bg);
  font-family: 'Lato', sans-serif; font-size: 0.82rem; font-weight: 700;
  color: var(--text-mid); cursor: pointer; transition: var(--transition);
  line-height: 1.25;
}
.zbi-scale button:hover { border-color: var(--primary); background: var(--primary-lt); color: var(--primary-dk); }
.zbi-scale button.selected {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.zbi-result {
  margin-top: 1.5rem; padding: 2rem; border-radius: var(--radius-md);
  text-align: center; border: 2px solid var(--border);
}
.zbi-result.none     { background: #E8F5E9; border-color: #A5D6A7; }
.zbi-result.mild     { background: var(--primary-lt); border-color: var(--primary); }
.zbi-result.moderate { background: var(--accent-lt); border-color: var(--accent); }
.zbi-result.severe   { background: #FFEBEE; border-color: #E57373; }
.zbi-result .zbi-score {
  font-family: 'Playfair Display', serif; font-size: 3rem;
  font-weight: 700; color: var(--text-dark); line-height: 1; margin-bottom: 0.3rem;
}
.zbi-result .zbi-scale-label {
  font-size: 0.78rem; color: var(--text-light);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem;
}
.zbi-result h3 { margin-bottom: 0.75rem; }

/* ============== CTA STRIP ============== */
.cta-strip { background: var(--primary); padding: 4rem 2rem; text-align: center; }
.cta-strip h2 { color: #fff; margin-bottom: 1rem; }
.cta-strip p  { color: rgba(255,255,255,0.9); margin-bottom: 2rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-strip p strong,
.cta-strip p em,
.cta-strip p span,
.cta-strip h2 strong { color: #fff; }
.cta-strip a:not(.btn) { color: #fff; text-decoration: underline; }
.cta-strip a:not(.btn):hover { color: rgba(255,255,255,0.85); }
.btn-actions  { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============== TWO-DOOR SECTION (Caregiver vs Patient) ============== */
.twodoor {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  max-width: 1000px; margin: 0 auto;
}
.door {
  background: #fff; border-radius: var(--radius-lg);
  padding: 2.25rem 2rem; box-shadow: var(--shadow-soft);
  border-top: 5px solid var(--primary); transition: var(--transition);
  display: flex; flex-direction: column; gap: 0.75rem;
  text-decoration: none; color: var(--text-dark);
}
.door.patient { border-top-color: var(--accent); }
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--text-dark); }
.door .door-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--primary-lt); color: var(--primary-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin-bottom: 0.5rem;
}
.door.patient .door-icon { background: var(--accent-lt); color: var(--accent-dk); }
.door h3 {
  font-size: 1.4rem; color: var(--forest); margin-bottom: 0.25rem;
}
.door .door-tag {
  font-size: 0.78rem; color: var(--primary); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.door.patient .door-tag { color: var(--accent); }
.door p { color: var(--text-mid); font-size: 0.97rem; line-height: 1.65; margin: 0; }
.door .door-cta {
  margin-top: 0.75rem; color: var(--primary-dk);
  font-weight: 700; font-size: 0.95rem;
}
.door.patient .door-cta { color: var(--accent-dk); }

/* ============== CARE LEVEL CARDS ============== */
.care-card {
  background: var(--bg-white); border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem; box-shadow: var(--shadow-soft);
  border: 1px solid var(--border); border-top: 4px solid var(--primary);
  transition: var(--transition); display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none; color: var(--text-dark);
}
.care-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-top-color: var(--accent); color: var(--text-dark); }
.care-card-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.care-card-icon svg { display: block; }
.care-card h3 { font-size: 1.1rem; margin-bottom: 0; color: var(--text-dark); }
.care-card p { font-size: 0.92rem; color: var(--text-light); flex: 1; margin-bottom: 0; }
.care-card-link { font-size: 0.88rem; font-weight: 700; color: var(--primary); margin-top: 0.5rem; }
.care-card:hover .care-card-link { color: var(--accent); }

/* ============== FOOTER ============== */
/* Uses the same dark teal as the top emergency strip for visual symmetry */
footer {
  background: var(--forest-dk); color: rgba(255,255,255,0.85);
  padding: 3rem 0 1.5rem; font-size: 0.92rem;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 2rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem; margin-bottom: 2rem;
}
.footer-logo-text {
  font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700;
  color: #fff; display: block; margin-bottom: 0.75rem;
}
.footer-brand p { color: rgba(255,255,255,0.78); font-size: 0.9rem; line-height: 1.7; }
.footer-logo { height: 50px; width: auto; margin-bottom: 0.75rem; }
footer h4 {
  color: #fff; font-family: 'Lato', sans-serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 1rem;
}
footer ul li { margin-bottom: 0.5rem; }
footer ul li a { color: rgba(255,255,255,0.82); }
footer ul li a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.25rem;
  max-width: 1100px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.75rem; font-size: 0.83rem; color: rgba(255,255,255,0.65);
}
.footer-bottom a { color: rgba(255,255,255,0.75); }
.footer-bottom a:hover { color: #fff; }

/* ============== UTILITIES ============== */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.hidden { display: none !important; }

/* ============== FULL-GUIDE HIGHLIGHTED BANNER ============== */
.full-guide-cta {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dk) 100%);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 6px 24px rgba(47, 79, 79, 0.28);
  text-decoration: none;
  transition: var(--transition);
  max-width: 760px;
  margin: 0 auto;
  border: 2px solid transparent;
}
.full-guide-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(47, 79, 79, 0.38);
  color: #fff;
  border-color: rgba(184, 192, 173, 0.55);
}
.full-guide-cta .fg-icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.22);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-guide-cta .fg-text {
  flex: 1;
  min-width: 0;
}
.full-guide-cta .fg-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 0.35rem;
  display: block;
}
.full-guide-cta .fg-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.3rem;
  color: #fff;
}
.full-guide-cta .fg-desc {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
  margin: 0;
}
.full-guide-cta .fg-arrow {
  font-size: 1.8rem;
  flex-shrink: 0;
  opacity: 0.85;
  transition: var(--transition);
}
.full-guide-cta:hover .fg-arrow { transform: translateX(4px); opacity: 1; }
@media (max-width: 580px) {
  .full-guide-cta { flex-direction: column; text-align: center; padding: 1.5rem 1.25rem; gap: 1rem; }
  .full-guide-cta .fg-arrow { display: none; }
}

/* ============== THERAPIST CALLOUT ============== */
.therapist-callout {
  background: linear-gradient(135deg, var(--bg-white) 0%, var(--primary-lt) 100%);
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  text-decoration: none;
  color: var(--text-dark);
  max-width: 760px;
  margin: 0 auto;
}
.therapist-callout:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--text-dark);
}
.therapist-callout .tc-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.therapist-callout .tc-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-dk);
  margin-bottom: 0.25rem;
}
.therapist-callout h4 {
  color: var(--primary-dk);
  margin-bottom: 0.3rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
}
.therapist-callout p { margin: 0; font-size: 0.94rem; color: var(--text-mid); line-height: 1.55; }
.therapist-callout .tc-arrow {
  color: var(--primary-dk); font-weight: 700; font-size: 0.9rem;
  margin-top: 0.4rem; display: inline-block;
}
@media (max-width: 580px) {
  .therapist-callout { flex-direction: column; text-align: center; padding: 1.5rem 1.25rem; }
}

/* ============== SMOOTH SCROLL + SECTION OFFSET ============== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h2[id], section[id] { scroll-margin-top: 100px; }

/* ============== NAV HIGHLIGHT (Start Here — subtle, calming) ============== */
.nav-links a.nav-highlight {
  background: rgba(217, 222, 208, 0.50);   /* soft sage */
  color: var(--forest) !important;
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(184, 192, 173, 0.60);
  transition: var(--transition);
}
.nav-links a.nav-highlight:hover {
  background: rgba(184, 192, 173, 0.65);
  color: var(--forest) !important;
  border-color: rgba(122, 154, 128, 0.7);
}

/* ============== STAGE COLLAPSIBLES (inside level-step cards) ============== */
.stage-collapsible {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: var(--transition);
}
.stage-collapsible:hover { border-color: var(--primary); }
.stage-collapsible summary {
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--primary-dk);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.98rem;
  list-style: none;
  transition: var(--transition);
  gap: 1rem;
}
.stage-collapsible summary::-webkit-details-marker { display: none; }
.stage-collapsible summary::marker { content: ""; }
.stage-collapsible summary:hover { background: var(--primary-lt); }
.stage-collapsible summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 700;
  transition: transform 0.25s ease;
  line-height: 1;
  flex-shrink: 0;
}
.stage-collapsible[open] summary {
  background: var(--primary-lt);
  border-bottom: 1px solid var(--border);
}
.stage-collapsible[open] summary::after { transform: rotate(45deg); }
.stage-collapsible-body {
  padding: 1.1rem 1.5rem 1.25rem;
  background: #fff;
}
.stage-collapsible-body ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0;
}
.stage-collapsible-body ul li {
  margin-bottom: 0.55rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-size: 0.97rem;
  list-style: disc;
  padding-left: 0.25rem;
  position: static;
}
.stage-collapsible-body ul li::before { content: none; }
.stage-collapsible-body ul li::marker { color: var(--accent); }
.stage-collapsible-body ul li:last-child { margin-bottom: 0; }

/* The what's-happening prose that stays visible inside a stage */
.stage-overview {
  color: var(--text-mid);
  line-height: 1.75;
  font-size: 0.98rem;
  margin-bottom: 1.25rem;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .twodoor { grid-template-columns: 1fr; }
  .nav-links a { padding: 0.4rem 0.55rem; font-size: 0.85rem; }
}
/* v14: Bumped from 720px → 1024px to ensure hamburger appears before
   browsers like DuckDuckGo at half-window get caught in the broken zone
   between desktop nav layout and mobile dropdown layout. */
@media (max-width: 1024px) {
  .hamburger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: var(--bg-white);
    border-bottom: 2px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: 0.75rem 1rem 1rem; gap: 0.25rem; z-index: 250; justify-content: flex-start;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.75rem 1rem; font-size: 1rem; }
  .nav-cta { display: none; }
  .emergency-strip { gap: 0.75rem; font-size: 0.8rem; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-calm-ctas { grid-template-columns: 1fr; }
  .hero-calm-ctas-three { grid-template-columns: 1fr; }
  .hero-calm { padding: 3rem 1.25rem 2.5rem; }
  .section { padding: 3rem 0; }
  .fatigue-question { flex-direction: column; align-items: flex-start; }
  .zbi-scale { grid-template-columns: repeat(5, 1fr); font-size: 0.72rem; }
  .zbi-scale button { font-size: 0.72rem; padding: 0.55rem 0.15rem; }
  .nav-inner { height: 64px; }
  .nav-logo-img img { height: 52px; }
  .nav-brand-img { height: 44px; }
  .nav-brand-text { font-size: 1.2rem; }
  .step-card { flex-direction: column; gap: 1rem; }
}
@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 1.25rem; }
  .card { padding: 1.5rem; }
  .disclaimer-box { padding: 1.5rem; }
  .quiz-card, .zbi-card { padding: 1.5rem 1.25rem; }
}

/* ============== LEVEL-STEP (patient levels + caregiver fatigue stages) ============== */
.level-step {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.level-step-head {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(95deg, var(--primary-lt) 0%, rgba(255,255,255,0.4) 70%);
  border-bottom: 1px solid var(--border);
}
.level-num {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary-dk); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
}
.level-step-head h3 { margin: 0 0 0.15rem; font-size: 1.15rem; }
.level-tag {
  font-size: 0.78rem; color: var(--accent); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Collapsed/expanded body — single column, lighter padding, tighter line spacing.
   Reverts the heavy two-column box from earlier. Caregivers reported this took up
   too much room; the patient-guide-style accordion is what was wanted. */
.level-step-body {
  padding: 1.4rem 1.75rem 0.75rem;
  display: block;
}
.level-col {
  margin-bottom: 1.25rem;
}
.level-col + .level-col {
  border-top: 1px dashed var(--border);
  padding-top: 1.25rem;
}
.level-col h4 {
  font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 0.55rem;
}
.level-col p, .level-col li {
  color: var(--text-mid); font-size: 0.97rem; line-height: 1.65;
}
.level-col ul { padding-left: 1rem; margin: 0; }
.level-col ul li {
  margin-bottom: 0.4rem; list-style: none; position: relative; padding-left: 1.1rem;
}
.level-col ul li::before {
  content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.applies-to {
  padding: 0.85rem 1.75rem; background: var(--bg-soft);
  font-size: 0.9rem; color: var(--text-mid);
  border-top: 1px solid var(--border);
}
.applies-to strong { color: var(--primary-dk); }

/* When level-step is a collapsible <details> (caregiver fatigue stages):
   only the head shows when closed; entire body + applies-to shown when open.
   This drastically reduces scrolling on the caregiver-fatigue page. */
.level-step-collapsible {
  cursor: default;
}
.level-step-collapsible > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: background 0.18s ease;
}
.level-step-collapsible > summary::-webkit-details-marker { display: none; }
.level-step-collapsible > summary::marker { content: ""; }
.level-step-collapsible > summary:hover {
  background: linear-gradient(95deg, var(--primary-lt) 0%, rgba(255,255,255,0.55) 70%);
}
.level-step-collapsible > summary::after {
  content: "+";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--primary);
  font-weight: 300;
  line-height: 1;
  transition: transform 0.2s ease;
}
.level-step-collapsible[open] > summary::after {
  content: "−";
}
.level-step-collapsible > summary > div:nth-child(2) {
  padding-right: 2.25rem; /* room for the +/− indicator */
}

@media (max-width: 720px) {
  .level-step-body { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
  .level-step-head { padding: 1.25rem; }
  .applies-to { padding: 1rem 1.25rem; }
}

/* anchor-card + reach-out-card + page-toc + reassure-band used on adapting.html */
.anchor-card {
  background: #fff; border-radius: var(--radius-md); padding: 1.5rem;
  box-shadow: var(--shadow-soft); border-top: 4px solid var(--primary);
  transition: var(--transition);
}
.anchor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.anchor-card .anchor-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--primary-lt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem; font-size: 1.3rem;
}
.anchor-card h4 { color: var(--primary-dk); margin-bottom: 0.4rem; font-size: 1rem; }
.anchor-card p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.55; margin: 0; }

.reach-out-card {
  background: linear-gradient(135deg, #fff 0%, var(--accent-lt) 100%);
  border: 1px solid rgba(198, 156, 123, 0.30);
  border-radius: var(--radius-md);
  padding: 2rem 2.25rem;
}
.reach-out-card h3 { color: var(--accent-dk); margin-bottom: 0.75rem; }

.page-toc {
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.8);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; justify-content: center;
}
.page-toc a {
  font-size: 0.85rem; color: var(--text-mid); text-decoration: none;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--border); transition: var(--transition);
}
.page-toc a:hover {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.reassure-band {
  background: var(--primary-dk); color: #fff;
  padding: 3.5rem 1.5rem; text-align: center;
}
.reassure-band h2 {
  color: #fff; font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  max-width: 40ch; margin: 0 auto 1rem; line-height: 1.35;
}
.reassure-band p { color: rgba(255,255,255,0.85); max-width: 55ch; margin: 0 auto; }
.reassure-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 0.7rem; max-width: 900px; margin: 2rem auto 0;
}
/* Default chip — used on LIGHT backgrounds (Patient Overview).
   Dark readable text on a soft tinted pill. */
.reassure-chip {
  background: #fff;
  border: 1px solid rgba(53, 92, 102, 0.22);
  color: var(--forest-dk, #234448);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
}
/* When inside the dark .reassure-band — switch to light text on dark */
.reassure-band .reassure-chip {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  font-weight: 500;
}

/* ============== EMAIL REVEAL (click-to-show, no mailto) ============== */
.email-reveal {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: inherit;
}
.email-reveal:hover { color: var(--primary-dk); }
.email-reveal.revealed {
  color: var(--text-dark);
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  background: var(--sage-lt);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  user-select: all;
}
/* Footer-context email-reveal: subtle, light on dark forest */
.footer-grid .email-reveal,
footer .email-reveal {
  color: rgba(255,255,255,0.82);
}
.footer-grid .email-reveal:hover,
footer .email-reveal:hover {
  color: #fff;
}
.footer-grid .email-reveal.revealed,
footer .email-reveal.revealed {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ============== BACK TO TOP BUTTON (auto-injected) ============== */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(53, 92, 102, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
  z-index: 90;
}
.back-to-top:hover {
  background: var(--forest-dk);
  transform: translateY(-2px);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 600px) {
  .back-to-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }
}

/* ============== READING TIME PILL (long pages) ============== */
.reading-time {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-top: 0.5rem;
  padding: 0.25rem 0.7rem;
  background: rgba(53, 92, 102, 0.06);
  border-radius: 999px;
}

/* ============== PATIENT WELCOME — soothing introductory prose ============== */
/* The single most important block of writing on the site. Centered, generous
   line-spacing, comfortable max line length, embedded "Right Now" card that
   feels like a continuation of the prose rather than an interruption. */
.patient-welcome {
  background: #FBF8F2;
}
.patient-welcome-prose {
  text-align: center;
}
.patient-welcome-prose > p {
  max-width: 62ch;
  margin: 0 auto 1.25rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text-mid, #3f4f4e);
  text-align: left;
}
.patient-welcome-prose > p:first-of-type {
  font-size: 1.12rem;
}
.patient-welcome-close {
  margin-top: 1.5rem !important;
  font-size: 1.1rem !important;
  font-style: italic;
  color: var(--forest-dk, #234448) !important;
  text-align: center !important;
}
.patient-welcome-close strong {
  font-style: normal;
  color: var(--forest-dk, #234448);
}

/* The embedded soothing card — feels like part of the welcome, not a separate section */
.welcome-card {
  background: linear-gradient(135deg, #F1F4EE 0%, #E3EBE2 100%);
  border: 1.5px solid rgba(53, 92, 102, 0.18);
  border-left: 5px solid var(--forest, #355C66);
  border-radius: 14px;
  padding: 1.85rem 2rem;
  margin: 2.25rem auto;
  max-width: 64ch;
  text-align: left;
  box-shadow: 0 2px 8px rgba(31, 66, 52, 0.06);
}
.welcome-card-label {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-dk, #234448);
  margin-bottom: 0.55rem;
}
.welcome-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  margin-bottom: 0.85rem !important;
  color: var(--text-dk, #1c2e2c);
}
.welcome-card p {
  margin: 0;
  color: var(--text-mid, #3f4f4e);
  line-height: 1.7;
  font-size: 1.02rem;
}

@media (max-width: 600px) {
  .patient-welcome-prose > p {
    font-size: 1rem;
  }
  .welcome-card {
    padding: 1.4rem 1.4rem;
    border-radius: 12px;
  }
}

/* ============== END PATIENT WELCOME ============== */

/* ============== PERMISSIONS & PRACTICES (caregiver wellness) ============== */
/* Warm, soothing background and softly-bordered cards. Each card has the
   "permission line" rendered in serif italic — that's the line that needs
   to land emotionally before any explanation does. */
.permissions-section {
  background: linear-gradient(180deg, #FBF8F2 0%, #F4EDE0 100%);
  padding: 3.5rem 1.5rem;
}
.permission-card {
  background: #fff;
  border: 1.5px solid rgba(120, 80, 50, 0.14);
  border-left: 5px solid #C9986F;
  border-radius: 14px;
  padding: 1.85rem 2rem;
  margin: 0 auto 1.4rem;
  max-width: 64ch;
  box-shadow: 0 2px 10px rgba(120, 80, 50, 0.07);
}
.permission-card:last-of-type {
  margin-bottom: 0;
}
.permission-line {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.35;
  color: var(--forest-dk, #234448);
  margin: 0 0 1.1rem;
}
.permission-body p {
  margin: 0 0 0.85rem;
  color: var(--text-mid, #3f4f4e);
  line-height: 1.7;
  font-size: 1rem;
}
.permission-body p:last-child {
  margin-bottom: 0;
}
.permission-body strong {
  color: var(--text-dk, #1c2e2c);
}
.permission-try {
  background: linear-gradient(135deg, #F1F4EE 0%, #E3EBE2 100%);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 1.1rem 0;
  border-left: 3px solid var(--forest, #355C66);
}
.permission-try-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-dk, #234448);
  margin-bottom: 0.5rem;
}
.permission-try-time {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  font-style: italic;
  color: var(--text-mid, #4a5e5d);
  margin-left: 0.25rem;
}
.permission-try p {
  margin: 0;
  color: var(--text-dk, #1c2e2c);
}
.permission-try em {
  color: var(--forest-dk, #234448);
  font-style: italic;
}
.permission-source {
  font-size: 0.88rem !important;
  color: var(--text-light, #6b7878) !important;
  margin-top: 0.85rem !important;
}
.permission-source a {
  color: var(--forest-dk, #234448);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.permission-source a:hover {
  color: var(--forest, #355C66);
}
@media (max-width: 600px) {
  .permission-card {
    padding: 1.4rem 1.35rem;
  }
  .permissions-section {
    padding: 2.5rem 1rem;
  }
}
/* ============== END PERMISSIONS & PRACTICES ============== */


/* ============== PRIORITY CARD (top-of-page primary CTA) ============== */
/* Soothing sage-mist with a thin teal accent — invites without alarming.
   Soft shadow draws the eye gently rather than shouting. */
.priority-card {
  background: linear-gradient(135deg, #F1F4EE 0%, #E3EBE2 100%);
  border-radius: 18px;
  padding: 1.75rem 2rem;
  border: 1.5px solid rgba(53, 92, 102, 0.22);
  box-shadow: 0 6px 22px rgba(53, 92, 102, 0.10);
  position: relative;
  margin: 2rem auto;
  max-width: 880px;
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.priority-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(53, 92, 102, 0.18);
  text-decoration: none;
  border-color: var(--forest);
}
.priority-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.priority-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dk) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(53, 92, 102, 0.20);
}
.priority-text { flex: 1; min-width: 0; }
.priority-label {
  color: var(--forest-dk);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  display: block;
  opacity: 0.75;
}
.priority-title {
  color: var(--forest-dk);
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.4rem 0;
}
.priority-description {
  color: var(--text-dark);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}
.priority-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.priority-cta .cta-button {
  background: var(--forest);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(53, 92, 102, 0.25);
}
.priority-card:hover .cta-button {
  background: var(--forest-dk);
}
.priority-cta .cta-text {
  color: var(--forest-dk);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  opacity: 0.7;
}
@media (max-width: 720px) {
  .priority-card { padding: 1.5rem 1.25rem; }
  .priority-content { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .priority-title { font-size: 1.35rem; }
  .priority-cta { flex-direction: row; align-self: flex-end; }
}

/* ============== PAGE SUMMARY (top-of-page short orientation) ============== */
.page-summary {
  background: var(--sand);
  border-left: 4px solid var(--forest);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin: 1.75rem auto;
  max-width: 760px;
}
.page-summary p {
  margin: 0;
  color: var(--text-dark);
  font-size: 1.05rem;
  line-height: 1.65;
}
.page-summary p + p { margin-top: 0.75rem; }
.page-summary .ps-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--forest);
  background: rgba(168, 191, 163, 0.4);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  border: 1px solid rgba(122,154,128,0.4);
  transition: var(--transition);
}
.page-summary .ps-cta:hover {
  background: rgba(168, 191, 163, 0.7);
  color: var(--forest-dk);
}
.page-summary .ps-readon {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--text-light);
  font-style: italic;
}

/* ============== CANONICAL CARD (single source-of-truth resource card) ============== */
.canonical-ref {
  background: rgba(217,222,208,0.35);
  border-left: 3px solid var(--sage-dk);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  margin: 0.75rem 0;
  font-size: 0.95rem;
  color: var(--text-mid);
}
.canonical-ref strong { color: var(--text-dark); }
.canonical-ref a { font-weight: 600; }


/* ============== NAV DROPDOWNS ============== */
.nav-links li.has-dropdown {
  position: relative;
}
.nav-links li.has-dropdown > a::after {
  content: "▾";
  font-size: 0.6em;
  margin-left: 0.3em;
  opacity: 0.6;
  vertical-align: middle;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 240px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(53, 92, 102, 0.12);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 100;
}
.nav-links li.has-dropdown:hover > .nav-dropdown,
.nav-links li.has-dropdown:focus-within > .nav-dropdown,
.nav-links li.has-dropdown.open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown li {
  margin: 0;
  display: block;
}
.nav-dropdown li a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  font-size: 0.92rem;
  white-space: nowrap;
  font-weight: 500;
  text-decoration: none;
}
.nav-dropdown li a:hover,
.nav-dropdown li a:focus {
  background: var(--sage-lt, #E8EDE0);
  color: var(--forest);
}
.nav-dropdown li.dropdown-divider {
  border-top: 1px solid var(--border);
  margin: 0.4rem 0;
  height: 0;
  padding: 0;
}
.nav-dropdown li.dropdown-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 700;
  padding: 0.4rem 0.85rem 0.2rem;
}

/* v14: On mobile (hamburger expanded), dropdowns are collapsed by default
   and toggle open/closed on tap of the parent. This keeps the menu
   scannable in one screen instead of dumping every submenu item at once.
   Bumped breakpoint from 800px → 1024px to match the new mobile-nav range. */
@media (max-width: 1024px) {
  /* Show chevron on mobile parent links and rotate when open */
  .nav-links li.has-dropdown > a::after {
    content: "▾";
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
    opacity: 0.65;
  }
  .nav-links li.has-dropdown.open > a::after {
    transform: rotate(180deg);
  }
  /* Disable hover/focus-within reveal on mobile — only explicit .open shows */
  .nav-links li.has-dropdown:hover > .nav-dropdown,
  .nav-links li.has-dropdown:focus-within > .nav-dropdown {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
  }
  /* Mobile dropdown: collapsed by default */
  .nav-dropdown {
    position: static;
    opacity: 0;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
    border-left: 2px solid var(--sage);
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease,
                padding 0.25s ease, margin 0.25s ease;
  }
  /* Expanded state */
  .nav-links li.has-dropdown.open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    max-height: 1200px;
    padding: 0.25rem 0 0.5rem 1rem;
    margin: 0.25rem 0 0.5rem 0.5rem;
  }
  .nav-dropdown li a {
    padding: 0.5rem 0.75rem;
    font-size: 0.92rem;
  }
}

/* ============== BIG-BUTTON ACCORDION (expandable resource sections) ============== */
/* Used to collapse long content sections behind a clear, inviting button.
   The button itself reads as a clear card — when expanded, content slides
   into view below without page-jump. */

.expand-section {
  max-width: 880px;
  margin: 1.25rem auto;
  padding: 0 1.5rem;
}

/* ============================================================
   EXPAND CARDS (accordions) — readability-focused (Round 8)
   Each card visually a distinct object so the eye gets rhythm.
   ============================================================ */

details.expand-card {
  background: #FFFFFF;
  border: 1.5px solid var(--sage);
  border-left-width: 6px;
  border-radius: 14px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(53, 92, 102, 0.07);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
  position: relative;
}

/* Alternate card backgrounds subtly between warm-cream and cool-mist
   so consecutive cards don't blur together */
details.expand-card:nth-of-type(odd)  { background: #FFFFFF; }
details.expand-card:nth-of-type(even) { background: linear-gradient(135deg, #FCFBF7 0%, #F5F2EB 100%); }

/* Color-coded left borders cycle through 4 palette colors so the eye
   reads each card as its own thing */
details.expand-card:nth-of-type(4n+1) { border-left-color: var(--forest); }
details.expand-card:nth-of-type(4n+2) { border-left-color: var(--clay); }
details.expand-card:nth-of-type(4n+3) { border-left-color: var(--sage-dk); }
details.expand-card:nth-of-type(4n)   { border-left-color: var(--accent-dk); }

details.expand-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(53, 92, 102, 0.10);
}

/* OPEN state — visually obvious which one you're reading */
details.expand-card[open] {
  background: linear-gradient(135deg, #F1F4EE 0%, #E8EDE5 100%);
  border-color: var(--forest);
  box-shadow: 0 8px 28px rgba(53, 92, 102, 0.16);
}

/* SUMMARY ROW (clickable header) */
details.expand-card summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
details.expand-card summary::-webkit-details-marker { display: none; }
details.expand-card summary::marker { content: ""; }

/* ICON TILE — color-coded per position (matches left border) */
.expand-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.2s ease;
}
details.expand-card:nth-of-type(4n+1) .expand-card-icon { background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dk) 100%); }
details.expand-card:nth-of-type(4n+2) .expand-card-icon { background: linear-gradient(135deg, var(--clay) 0%, var(--accent-dk) 100%); }
details.expand-card:nth-of-type(4n+3) .expand-card-icon { background: linear-gradient(135deg, var(--sage-dk) 0%, var(--forest) 100%); }
details.expand-card:nth-of-type(4n)   .expand-card-icon { background: linear-gradient(135deg, var(--accent-dk) 0%, #6f4d31 100%); }

details.expand-card:hover .expand-card-icon {
  transform: scale(1.05);
}

/* TEXT BLOCK */
.expand-card-text {
  flex: 1;
  min-width: 0;
}

.expand-card-title {
  font-family: 'Lato', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.35rem;
  color: var(--forest-dk);
  margin: 0 0 0.5rem 0;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.expand-card-sub {
  font-size: 0.97rem;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.6;
}

/* SOURCE PILL — visually separates the "Sources: X, Y, Z" tag
   from the descriptive sub-text so it doesn't blur together */
.expand-card-sub strong.sources-tag,
.expand-card-sources {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.18rem 0.6rem;
  background: rgba(53, 92, 102, 0.08);
  color: var(--forest-dk);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 10px;
  font-family: 'Lato', sans-serif;
}

/* TOGGLE PLUS/MINUS */
.expand-card-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--sage-dk);
  color: var(--forest-dk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
  transition: all 0.2s ease;
  margin-top: 0.25rem;
}
details.expand-card[open] .expand-card-toggle {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  transform: rotate(45deg);
}

/* BODY */
.expand-card-body {
  padding: 0 1.5rem 1.5rem 4.6rem;
  color: var(--text-dark);
  line-height: 1.7;
  border-top: 1px solid rgba(53, 92, 102, 0.10);
  margin-top: 0.25rem;
  padding-top: 1.25rem;
}
.expand-card-body h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  margin-top: 1.25rem;
}

/* MOBILE */
@media (max-width: 720px) {
  details.expand-card { margin-bottom: 1rem; }
  details.expand-card summary { padding: 1rem 1.1rem; gap: 0.85rem; }
  .expand-card-title { font-size: 1.1rem; }
  .expand-card-sub { font-size: 0.9rem; }
  .expand-card-icon { width: 40px; height: 40px; }
  .expand-card-toggle { width: 28px; height: 28px; font-size: 1.2rem; }
  .expand-card-body { padding: 1.1rem 1.1rem 1.25rem; }
}
/* ============== ORIENTATION CARDS (home hero — caregiver vs patient) ============== */
/* Two cards side-by-side. Caregiver = warmer (cream + copper accents).
   Patient = calmer (teal-mist + teal accents). Bold colored top labels.
   Designed to be comprehensible in under 1 second by someone in distress. */

.orient-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 980px;
  margin: 2.5rem auto 1.5rem;
  padding: 0 1rem;
}

.orient-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 18px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.orient-card:hover {
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(53, 92, 102, 0.18);
}

/* Caregiver card — warmer/supportive */
.orient-card-caregiver {
  background: linear-gradient(135deg, #FBF6EC 0%, #F4ECD9 100%);
  border-color: rgba(198, 156, 123, 0.30);
  box-shadow: 0 6px 22px rgba(198, 156, 123, 0.12);
}
.orient-card-caregiver:hover {
  border-color: var(--clay);
  box-shadow: 0 14px 36px rgba(198, 156, 123, 0.22);
}

/* Patient card — calmer/reassuring */
.orient-card-patient {
  background: linear-gradient(135deg, #EEF3F1 0%, #DDE7E6 100%);
  border-color: rgba(53, 92, 102, 0.30);
  box-shadow: 0 6px 22px rgba(53, 92, 102, 0.10);
}
.orient-card-patient:hover {
  border-color: var(--forest);
  box-shadow: 0 14px 36px rgba(53, 92, 102, 0.22);
}

/* Bold colored top labels — readable in under 1 second */
.orient-label {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.orient-label-caregiver {
  background: var(--accent-dk);
  color: #fff;
}
.orient-label-patient {
  background: var(--forest-dk);
  color: #fff;
}

.orient-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 0.65rem 0;
}

.orient-sub {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0 0 1.5rem 0;
  flex: 1;
}

/* Plain text+arrow at the bottom of orient cards.
   Reads as a directional cue inside the wrapping <a>, not a button. */
.orient-arrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  margin-top: 0.25rem;
  color: var(--text-dk);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.orient-arrow span {
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.2s ease;
}
.orient-card-caregiver .orient-arrow {
  color: var(--accent-dk);
}
.orient-card-patient .orient-arrow {
  color: var(--forest-dk);
}
.orient-card:hover .orient-arrow {
  border-bottom-color: currentColor;
}
.orient-card:hover .orient-arrow span {
  transform: translateX(3px);
}

/* Help-right-now signpost row beneath the orientation cards */
.orient-help-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0.5rem auto 1.5rem;
  padding: 0 1rem;
}
.orient-help-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--forest-dk);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.orient-help-link:hover {
  background: rgba(53, 92, 102, 0.08);
  color: var(--forest-dk);
  text-decoration: none;
}
.orient-help-icon {
  display: inline-flex;
  color: var(--forest);
}
.orient-help-divider {
  color: var(--text-light);
  opacity: 0.6;
}

/* Mobile: stack cards vertically */
@media (max-width: 720px) {
  .orient-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.75rem auto 1rem;
  }
  .orient-card { padding: 1.5rem 1.25rem 1.4rem; }
  .orient-title { font-size: 1.5rem; }
  .orient-sub { font-size: 0.95rem; }
  .orient-arrow { font-size: 0.92rem; }
  .orient-help-row { gap: 0.5rem; }
  .orient-help-link { font-size: 0.88rem; }
}

/* ============== NAV SUB-LABEL (small line under nav item, e.g. "for caregivers and patients") ============== */
.nav-sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-light);
  margin-top: 0.1rem;
  line-height: 1.15;
  font-style: italic;
}
.nav-links a:hover .nav-sub { color: var(--text-mid); }
@media (max-width: 880px) {
  /* Hide the subline in mobile hamburger nav so each item stays one line */
  .nav-sub { display: none; }
}

/* ============== QUICK LOCAL RESOURCES CALLOUT (top of audience pages — for the moment someone needs to call now) ============== */
.quick-local-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 880px;
  margin: 1.25rem auto 0;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, #F1F4EE 0%, #E3EBE2 100%);
  border: 1.5px solid rgba(53, 92, 102, 0.22);
  border-radius: 14px;
  color: var(--forest-dk);
  text-decoration: none;
  font-size: 0.98rem;
  line-height: 1.45;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.quick-local-link:hover {
  text-decoration: none;
  color: var(--forest-dk);
  border-color: var(--forest);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(53, 92, 102, 0.14);
}
.quick-local-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quick-local-text { flex: 1; min-width: 0; }
.quick-local-text strong { display: block; font-weight: 700; color: var(--text-dark); }
.quick-local-arrow {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--forest);
}
@media (max-width: 600px) {
  .quick-local-link { margin: 1rem 1rem 0; padding: 0.75rem 1rem; font-size: 0.92rem; }
}

/* ============== ACCORDION VARIATION + SCROLL MARGIN FIX (Round 7) ============== */
/* Give each expand-card a colored left accent bar so it doesn't blur into the next one.
   Alternate warm/cool tints via :nth-of-type so the eye has rhythm. */

details.expand-card {
  position: relative;
  padding-left: 0;
  border-left-width: 6px;
  border-left-color: var(--sage);
}
details.expand-card:nth-of-type(3n+1) { border-left-color: var(--forest); }
details.expand-card:nth-of-type(3n+2) { border-left-color: var(--clay); }
details.expand-card:nth-of-type(3n+3) { border-left-color: var(--sage-dk); }

details.expand-card[open] {
  border-color: var(--forest);
  box-shadow: 0 6px 24px rgba(53, 92, 102, 0.14);
}

/* Scroll-margin fix so anchor links don't overshoot the target */
[id] { scroll-margin-top: 110px; }
details.expand-card[id] { scroll-margin-top: 115px; }
section[id], article[id], h2[id], h3[id] { scroll-margin-top: 110px; }

/* ---- Featured dropdown item (the 📍 Local Resources link at top of each section dropdown) ---- */
.nav-dropdown li a.dropdown-featured {
  background: linear-gradient(135deg, var(--primary-lt, #E0EAE2) 0%, var(--sand, #F5EFE2) 100%);
  font-weight: 700;
  color: var(--primary-dk, #2C5F4F);
  border-left: 3px solid var(--primary, #4A8B73);
}
.nav-dropdown li a.dropdown-featured:hover,
.nav-dropdown li a.dropdown-featured:focus {
  background: var(--primary-lt, #E0EAE2);
  color: var(--forest, #1F4234);
}

/* ============================================================
   V5 DESIGN ADDITIONS — integrated header band + linked chips/anchors
   ============================================================
   These styles support the V5 redesign. The integrated header band
   (Option B) groups the small section-label and the headline into a
   single visual unit so users can't skim past the label. Linked
   reassure-chips and anchor-cards visually signal that they open
   external trusted clinical sources.
*/

/* --- Integrated header band ------------------------------------ */
.header-band {
  display: block;
  padding: 1.4rem 1.75rem 1.6rem;
  border-radius: 14px;
  text-align: center;
  background: var(--sage-lt, #E0EAE2);
  border: 1px solid rgba(53, 92, 102, 0.10);
  box-shadow: 0 1px 2px rgba(31, 66, 52, 0.04);
}
.header-band-label {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-dk, #2c5054);
  margin-bottom: 0.6rem;
  opacity: 1;
}
.header-band-title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.95rem, 4.8vw, 2.7rem);
  line-height: 1.18;
  color: var(--text-dk, #1c2e2c);
}
.header-band-sub {
  margin: 0.5rem 0 0;
  color: var(--text-mid, #4a5e5d);
  font-size: 0.98rem;
}

/* Poetic subtitle — equal-or-greater visual weight than the title.
   The italic serif in forest tone gives this softer, more human voice
   the prominence it needs to soothe the clinical word above it. */
.header-band-poetic {
  margin: 0.85rem 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  color: var(--forest-dk, #2c5054);
  line-height: 1.25;
  opacity: 1;
}

/* Small contextual line under the poetic slogan — carries the OVERVIEW vs
   FULL GUIDE distinction without crowding the title or the slogan. */
.header-band-context {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  color: var(--text-mid, #4a5e5d);
  line-height: 1.5;
}
.header-band-context-link {
  color: var(--forest-dk, #234448);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.header-band-context-link:hover,
.header-band-context-link:focus {
  color: var(--forest, #355C66);
}

/* Hero jump-grid — 4 destination links on the patient guide hero,
   each with a label + 1-line description so people know what they will land on */
.hero-jump-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  max-width: 720px;
  margin: 1.75rem auto 0;
}
.hero-jump-btn {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1.5px solid rgba(53, 92, 102, 0.18);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-dk, #1c2e2c);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  text-align: left;
}
.hero-jump-btn:hover,
.hero-jump-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(31, 66, 52, 0.10);
  border-color: rgba(53, 92, 102, 0.36);
  background: #FBFCFA;
  text-decoration: none;
}
.hero-jump-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--forest-dk, #234448);
}
.hero-jump-sub {
  font-size: 0.85rem;
  color: var(--text-mid, #4a5e5d);
  line-height: 1.35;
}
.hero-jump-btn-primary {
  background: linear-gradient(135deg, #F1E9DA 0%, #E5D7BF 70%, #DDE8E2 100%);
  border-color: rgba(120, 80, 50, 0.22);
}
.hero-jump-btn-primary .hero-jump-label {
  color: #6e4530;
}
.hero-jump-btn-primary:hover,
.hero-jump-btn-primary:focus {
  background: linear-gradient(135deg, #EFE5D2 0%, #E2D2B4 70%, #D5E2DA 100%);
  border-color: rgba(120, 80, 50, 0.36);
}
@media (max-width: 600px) {
  .hero-jump-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

/* Patient/forest variant (used on patient pages and sections) */
.header-band-patient {
  background: linear-gradient(135deg, #E5EEEC 0%, #D8E5E2 100%);
  border-color: rgba(53, 92, 102, 0.14);
}
.header-band-patient .header-band-label {
  color: var(--forest-dk, #234448);
}

/* Sand variant (used on warmer sections like "Things You Can Do") */
.header-band-sand {
  background: linear-gradient(135deg, #F4ECE0 0%, #ECDFCE 100%);
  border-color: rgba(120, 80, 50, 0.12);
}
.header-band-sand .header-band-label {
  color: #6e4530;
}

/* Caregiver variant — warmer earth tones to match the caregiver section's visual identity */
.header-band-caregiver {
  background: linear-gradient(135deg, #F2E9DC 0%, #E5D5BD 100%);
  border-color: rgba(120, 80, 50, 0.16);
}
.header-band-caregiver .header-band-label {
  color: #6e4530;
}

/* Right Now variant — slightly stronger forest tone for urgency-without-alarm */
.header-band-rightnow {
  background: linear-gradient(135deg, #DCE9E5 0%, #C8DCD7 100%);
  border-color: rgba(35, 68, 72, 0.16);
}
.header-band-rightnow .header-band-label {
  color: var(--forest-dk, #234448);
}

/* ADJUSTING TO A NEW NORMAL — most prominent variant (the gold of the page) */
.header-band-adjusting {
  background: linear-gradient(135deg, #F1E9DA 0%, #E5D7BF 50%, #DDE8E2 100%);
  border-color: rgba(120, 80, 50, 0.18);
  padding: 1.7rem 2rem 1.85rem;
  box-shadow: 0 2px 6px rgba(110, 69, 48, 0.08);
}
.header-band-adjusting .header-band-label {
  color: #6e4530;
  font-size: 0.85rem;
}
.header-band-adjusting .header-band-title {
  font-size: clamp(1.85rem, 4.5vw, 2.7rem);
}

/* Section background for the "Adjusting" gold section */
.adjusting-section {
  background: #FCF8F1;
  border-top: 1px solid rgba(120, 80, 50, 0.08);
  border-bottom: 1px solid rgba(120, 80, 50, 0.08);
}
.adjusting-intro {
  background: #fff;
  border: 1px solid rgba(53, 92, 102, 0.10);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 0 auto;
  max-width: 760px;
  box-shadow: 0 1px 3px rgba(31, 66, 52, 0.04);
}
.adjusting-intro p {
  margin: 0 0 0.85rem;
  color: var(--text-mid, #3f4f4e);
  line-height: 1.7;
  font-size: 1rem;
}
.adjusting-intro p:last-child {
  margin-bottom: 0;
}

/* --- Reassure chips: clickable links ----------------------- */
.reassure-cta-hint {
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-mid, #4a5e5d);
  margin: 0.5rem auto 1rem;
  max-width: 600px;
  font-style: italic;
}
a.reassure-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Hover for chips on LIGHT backgrounds */
a.reassure-chip:hover,
a.reassure-chip:focus {
  background: #FBFCFA;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(31, 66, 52, 0.12);
  text-decoration: none;
  border-color: rgba(53, 92, 102, 0.45);
  color: var(--forest-dk, #234448);
}
/* Hover for chips inside dark .reassure-band */
.reassure-band a.reassure-chip:hover,
.reassure-band a.reassure-chip:focus {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  box-shadow: none;
}
.reassure-chip-arrow {
  font-size: 0.78em;
  opacity: 0.6;
  transform: translateY(-1px);
}
a.reassure-chip:hover .reassure-chip-arrow,
a.reassure-chip:focus .reassure-chip-arrow {
  opacity: 1;
}

/* --- Anchor cards now linked to credible sources --------------- */
a.anchor-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.anchor-card-link:hover,
a.anchor-card-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(31, 66, 52, 0.10);
  text-decoration: none;
  border-color: rgba(53, 92, 102, 0.30);
}
.anchor-card-source {
  display: inline-block;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--forest-dk, #2c5054);
  border-top: 1px solid rgba(53, 92, 102, 0.10);
  margin-top: 0.85rem;
}
.anchor-card-source-quiet {
  color: var(--text-light, #6b7878);
  font-style: italic;
  font-weight: 500;
}

/* Self-management anchor with nested "Utah direct sign-up" secondary link */
.anchor-card-stacked .anchor-card-source {
  margin-bottom: 0.65rem;
}
.anchor-card-extra-link {
  display: block;
  margin-top: 0;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(135deg, #F1E9DA 0%, #E5D7BF 100%);
  border: 1px solid rgba(120, 80, 50, 0.20);
  border-radius: 8px;
  color: #6e4530;
  font-size: 0.84rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  text-decoration: none;
}
.anchor-card-extra-link:hover,
.anchor-card-extra-link:focus {
  background: linear-gradient(135deg, #EFE5D2 0%, #E2D2B4 100%);
  border-color: rgba(120, 80, 50, 0.36);
  outline: none;
  transform: translateY(-1px);
}
.anchor-card-extra-link strong {
  display: block;
  color: #6e4530;
}
.anchor-card-extra-source {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: rgba(110, 69, 48, 0.75);
  font-style: italic;
}
a.anchor-card-link .anchor-card-source {
  border-top-color: rgba(53, 92, 102, 0.14);
}
a.anchor-card-link:hover .anchor-card-source,
a.anchor-card-link:focus .anchor-card-source {
  color: var(--accent-dk, #6e4530);
}

/* --- Local accordion (for the collapsed local-resources block) - */
.local-accordion {
  max-width: 880px;
  margin: 0 auto;
}

/* --- Mobile tweaks for the new pieces --------------------------- */
@media (max-width: 720px) {
  .header-band {
    padding: 1.15rem 1.25rem 1.3rem;
    border-radius: 12px;
  }
  .header-band-label {
    font-size: 0.85rem;
    letter-spacing: 0.14em;
  }
  .header-band-poetic {
    font-size: 1.5rem;
  }
  .header-band-adjusting {
    padding: 1.3rem 1.25rem 1.4rem;
  }
  .adjusting-intro {
    padding: 1.2rem 1.1rem;
    border-radius: 10px;
  }
  .adjusting-intro p {
    font-size: 0.96rem;
  }
}

/* ============== RIGHT NOW · COMPACT ACCORDIONS ============== */
/* Lightweight, tightly-packed accordion specifically for the Right Now page.
   Each subsection (60 seconds, next hour, this week, longer way) collapses
   numbered cards behind a clickable summary row so the whole page scans in
   one screen. Description text moves into the summary so a depleted reader
   can still tell what each one offers without expanding it. */
details.rn-acc {
  background: #fff;
  border: 1px solid rgba(53, 92, 102, 0.18);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  margin-top: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
details.rn-acc:first-of-type {
  margin-top: 1.5rem;
}
details.rn-acc[open] {
  background: linear-gradient(135deg, #F8FAF7 0%, #EFF3EE 100%);
  border-color: var(--forest);
  box-shadow: 0 4px 18px rgba(53, 92, 102, 0.10);
}
details.rn-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
details.rn-acc summary::-webkit-details-marker { display: none; }
details.rn-acc summary::marker { content: ""; }
.rn-acc-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.1rem;
}
details.rn-acc[open] .rn-acc-num { background: var(--forest-dk); }
.rn-acc-text { flex: 1; min-width: 0; }
.rn-acc-title {
  margin: 0 0 0.25rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--text-dark);
}
.rn-acc-desc {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.55;
}
.rn-acc-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(53, 92, 102, 0.28);
  background: #fff;
  color: var(--forest-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 600;
  transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
  margin-top: 0.15rem;
}
details.rn-acc[open] .rn-acc-toggle {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  transform: rotate(45deg);
}
.rn-acc-body {
  padding: 0 1.25rem 1.25rem 3.6rem;
  color: var(--text-dark);
  line-height: 1.7;
}
.rn-acc-body > p:first-child { margin-top: 0.25rem; }
.rn-acc-body p { font-size: 0.97rem; color: var(--text-mid); }
.rn-acc-body p strong { color: var(--text-dark); }
.rn-acc-body ul, .rn-acc-body ol {
  padding-left: 1.25rem;
  color: var(--text-mid);
  line-height: 1.75;
  font-size: 0.95rem;
}
.rn-acc-body .info-box { margin-top: 0.85rem; }
@media (max-width: 640px) {
  details.rn-acc summary { padding: 0.85rem 1rem; gap: 0.65rem; }
  .rn-acc-num { width: 28px; height: 28px; font-size: 0.85rem; }
  .rn-acc-title { font-size: 1rem; }
  .rn-acc-desc { font-size: 0.88rem; }
  .rn-acc-body { padding: 0 1rem 1rem 2.85rem; }
}

/* Variant: patient-only accordion (sage tint) — used for "Especially for patients" */
details.rn-acc.rn-acc-patient { border-left-color: var(--forest); background: #FAFCF8; }
details.rn-acc.rn-acc-patient .rn-acc-num { background: var(--forest); }
/* Variant: caregiver-only accordion (sand tint) */
details.rn-acc.rn-acc-caregiver { border-left-color: var(--accent); background: #FDFBF6; }
details.rn-acc.rn-acc-caregiver .rn-acc-num { background: var(--accent); color: #fff; }

/* ============== WARM PATIENT SUB-LINK CARDS ============== */
/* Softer, more obviously inviting cards for the patient sub-paths
   (Find where you are / Find your anchor / Things that may help / Adjusting).
   Replaces the old plain white card layout that was overlookable on a skim. */
.warm-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  max-width: 920px;
  margin: 1.5rem auto 0;
}
@media (max-width: 720px) {
  .warm-card-grid { grid-template-columns: 1fr; gap: 0.85rem; }
}
a.warm-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(135deg, #FDFCF7 0%, #F5EFDF 100%);
  border: 1.5px solid rgba(201, 152, 111, 0.32);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-dark);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  box-shadow: 0 2px 10px rgba(31, 66, 52, 0.06);
}
a.warm-card::after {
  content: "→";
  position: absolute;
  top: 1.5rem; right: 1.6rem;
  font-size: 1.3rem;
  color: var(--accent);
  transition: transform 0.18s ease;
  font-weight: 600;
}
a.warm-card:hover,
a.warm-card:focus {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(201, 152, 111, 0.22);
  background: linear-gradient(135deg, #FFFEFA 0%, #F8F2E0 100%);
  text-decoration: none;
}
a.warm-card:hover::after,
a.warm-card:focus::after {
  transform: translateX(3px);
}
.warm-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--forest-dk);
  margin: 0;
  padding-right: 2rem;
  line-height: 1.25;
}
.warm-card-sub {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.55;
}
/* Variant for the "Adjusting to a new normal" card — slightly distinct
   to signal it's a different kind of resource (curated reading) */
a.warm-card.warm-card-alt {
  background: linear-gradient(135deg, #F4EFE5 0%, #E8DFCB 100%);
  border-color: var(--accent);
}
a.warm-card.warm-card-alt:hover,
a.warm-card.warm-card-alt:focus {
  background: linear-gradient(135deg, #FAF5EB 0%, #F0E8D5 100%);
}

/* ============== "WHAT IS NORMAL" CHIPS — MORE OBVIOUSLY CLICKABLE ============== */
/* For fatigued patients, the chip styling needed to read more clearly as
   tappable links. Bumps font weight, adds a subtle outline+arrow lift on hover. */
.reassure-chip-prominent {
  background: #fff !important;
  border: 1.5px solid var(--forest) !important;
  color: var(--forest-dk) !important;
  font-weight: 700 !important;
  font-size: 0.97rem !important;
  padding: 0.7rem 1.2rem !important;
  box-shadow: 0 2px 8px rgba(53, 92, 102, 0.10);
}
.reassure-chip-prominent:hover,
.reassure-chip-prominent:focus {
  background: var(--primary-lt) !important;
  border-color: var(--forest-dk) !important;
  color: var(--forest-dk) !important;
  box-shadow: 0 5px 16px rgba(53, 92, 102, 0.20) !important;
}
.reassure-chip-prominent .reassure-chip-arrow {
  opacity: 0.85;
  font-weight: 700;
}

/* ============== PATIENT TOOL CARD — softer than caregiver permission-card ============== */
/* Used for the parallel patient Real Tools section. Tone: gentler hand on
   the shoulder rather than the caregiver's release-of-pressure. */
.patient-tool-card {
  background: #FFFEFB;
  border: 1px solid rgba(53, 92, 102, 0.14);
  border-left: 4px solid var(--forest);
  border-radius: 14px;
  padding: 1.75rem 1.85rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px rgba(31, 66, 52, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.patient-tool-card:hover {
  box-shadow: 0 5px 20px rgba(31, 66, 52, 0.10);
  border-left-color: var(--forest-dk);
}
.patient-tool-line {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--forest-dk);
  line-height: 1.35;
  margin: 0 0 0.85rem;
  font-style: italic;
}
.patient-tool-body p {
  color: var(--text-dark);
  font-size: 0.97rem;
  line-height: 1.7;
  margin: 0 0 0.85rem;
}
.patient-tool-body p:last-child { margin-bottom: 0; }
.patient-tool-try {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, #F1F4EE 0%, #E8EDE5 100%);
  border-radius: 10px;
  border-left: 3px solid var(--forest);
}
.patient-tool-try-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-dk);
  display: block;
  margin-bottom: 0.4rem;
}
.patient-tool-try-time {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
  font-size: 0.78rem;
  margin-left: 0.4rem;
}
.patient-tool-try p { margin: 0; font-size: 0.94rem; color: var(--text-dark); line-height: 1.65; }
.patient-tool-try em { color: var(--forest-dk); font-style: italic; font-weight: 500; }
.patient-tool-source {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--text-light);
}
.patient-tool-source a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px dashed var(--forest);
  font-weight: 500;
}
.patient-tool-source a:hover, .patient-tool-source a:focus {
  color: var(--forest-dk);
  border-bottom-style: solid;
}
@media (max-width: 640px) {
  .patient-tool-card { padding: 1.4rem 1.3rem; }
  .patient-tool-line { font-size: 1.15rem; }
}

/* ============== V12: PERMISSIONS — BIGGER HEADER + ACCORDION CARDS ============== */
/* The "Real tools for hard days" line is the strongest sentence on the page;
   give it the size and weight it deserves. */
.section-label-xl {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
}
.permissions-h2 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.15;
  color: var(--forest-dk);
}
.permissions-sub {
  margin: 1rem auto 0;
  color: var(--text-mid);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 60ch;
}
.permissions-close {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: var(--text-mid);
  font-style: italic;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

/* Accordion variant — same visual family as rn-acc but warmer (sand accent) */
details.permission-acc {
  background: #fff;
  border: 1px solid rgba(53, 92, 102, 0.16);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  margin-top: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
details.permission-acc:first-of-type { margin-top: 1.5rem; }
details.permission-acc[open] {
  background: linear-gradient(135deg, #FBF8F2 0%, #F4EFE3 100%);
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(201, 152, 111, 0.18);
}
details.permission-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
details.permission-acc summary::-webkit-details-marker { display: none; }
details.permission-acc summary::marker { content: ""; }
.permission-acc-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 0.15rem;
}
details.permission-acc[open] .permission-acc-num {
  background: var(--forest-dk);
}
.permission-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.permission-acc-line {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--text-dark);
}
.permission-acc-desc {
  font-size: 0.93rem;
  color: var(--text-mid);
  line-height: 1.55;
}
.permission-acc-toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 152, 111, 0.4);
  background: #fff;
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 600;
  transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
  margin-top: 0.2rem;
}
details.permission-acc[open] .permission-acc-toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(45deg);
}
.permission-acc-body {
  padding: 0 1.4rem 1.4rem 4rem;
  color: var(--text-dark);
  line-height: 1.7;
}
.permission-acc-body p { font-size: 0.96rem; color: var(--text-mid); margin: 0 0 0.85rem; }
.permission-acc-body p strong { color: var(--text-dark); }
.permission-acc-body p:last-child { margin-bottom: 0; }
.permission-acc-body em { color: var(--forest-dk); font-style: italic; }

@media (max-width: 640px) {
  details.permission-acc summary { padding: 0.95rem 1.1rem; gap: 0.75rem; }
  .permission-acc-num { width: 30px; height: 30px; font-size: 0.9rem; }
  .permission-acc-line { font-size: 1.05rem; }
  .permission-acc-desc { font-size: 0.88rem; }
  .permission-acc-body { padding: 0 1.1rem 1.1rem 3rem; }
}

/* ============== V12: LOCAL RESOURCES TOP SECTION ============== */
.local-resources-top {
  background: linear-gradient(180deg, #FBFCF8 0%, #F1F4EE 100%);
  padding: 3rem 1.5rem 3.5rem;
}
.local-resources-h2 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.95rem, 4.5vw, 2.7rem);
  line-height: 1.18;
  color: var(--text-dk, #1c2e2c);
}
.local-resources-sub {
  margin: 0.85rem 0 0;
  color: var(--text-mid);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Two big featured cards (AmeriCorps + Neighbor to Neighbor) */
.local-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 820px) {
  .local-feature-grid { grid-template-columns: 1fr; }
}
.local-feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.85rem 1.85rem;
  border: 1px solid rgba(53, 92, 102, 0.16);
  box-shadow: 0 3px 14px rgba(31, 66, 52, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  color: var(--text-dark);
}
a.local-feature-card:hover,
a.local-feature-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(31, 66, 52, 0.13);
  border-color: var(--forest);
  text-decoration: none;
}
.local-feature-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.local-feature-icon img {
  max-height: 64px;
  width: auto;
  display: block;
}
.local-feature-icon svg {
  color: var(--accent);
}
.local-feature-tag {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.local-feature-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--forest-dk);
}
.local-feature-title-display { font-size: 1.65rem; }
.bulletin-name {
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: var(--forest-dk);
  display: inline-block;
  margin-bottom: 0.1rem;
}
.bulletin-sub {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  font-size: 1.25rem;
  display: inline-block;
}
.local-feature-card p {
  margin: 0;
  color: var(--text-mid);
  line-height: 1.65;
  font-size: 0.96rem;
}
.local-feature-card p strong { color: var(--text-dark); }
.local-feature-cta {
  margin: 0.5rem 0 0 !important;
  color: var(--forest) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.local-feature-bulletin {
  background: linear-gradient(135deg, #FDFCF7 0%, #F4ECD8 100%);
  border-color: rgba(201, 152, 111, 0.35);
}
.local-feature-bulletin .local-feature-icon svg { color: var(--accent); }
.local-feature-americorps {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F4F1 100%);
}

/* Collapsible local services accordion */
details.local-services-acc {
  background: #fff;
  border: 1px solid rgba(53, 92, 102, 0.20);
  border-left: 4px solid var(--forest);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
details.local-services-acc[open] {
  background: #FBFCF8;
  border-color: var(--forest-dk);
  box-shadow: 0 4px 18px rgba(53, 92, 102, 0.10);
}
details.local-services-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
details.local-services-acc summary::-webkit-details-marker { display: none; }
details.local-services-acc summary::marker { content: ""; }
.local-services-acc-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-lt);
  color: var(--forest-dk);
  display: flex; align-items: center; justify-content: center;
}
details.local-services-acc[open] .local-services-acc-icon {
  background: var(--forest);
  color: #fff;
}
.local-services-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.local-services-acc-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text-dark);
  line-height: 1.3;
}
.local-services-acc-desc {
  color: var(--text-mid);
  font-size: 0.93rem;
  line-height: 1.55;
}
.local-services-acc-toggle {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(53, 92, 102, 0.32);
  background: #fff;
  color: var(--forest-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 600;
  transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
}
details.local-services-acc[open] .local-services-acc-toggle {
  background: var(--forest-dk);
  border-color: var(--forest-dk);
  color: #fff;
  transform: rotate(45deg);
}
.local-services-acc-body {
  padding: 0 1.4rem 1.4rem 1.4rem;
}
.local-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin-top: 0.5rem;
}
@media (max-width: 720px) {
  .local-services-grid { grid-template-columns: 1fr; }
}
.local-service-card {
  background: #FBFCF8;
  border: 1px solid rgba(53, 92, 102, 0.12);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
}
.local-service-card h4 {
  margin: 0 0 0.25rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--forest-dk);
  line-height: 1.25;
}
.local-service-meta {
  margin: 0 0 0.6rem !important;
  font-size: 0.82rem !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
.local-service-card p {
  margin: 0 0 0.55rem;
  font-size: 0.93rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.local-service-contact {
  font-size: 0.92rem !important;
  color: var(--text-dark) !important;
  line-height: 1.7 !important;
  margin-top: 0.5rem !important;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(53, 92, 102, 0.16);
}

@media (max-width: 640px) {
  .local-resources-top { padding: 2rem 1.1rem 2.5rem; }
  .local-feature-card { padding: 1.4rem 1.3rem; }
  .bulletin-name { font-size: 1.7rem; }
  .bulletin-sub { font-size: 1.05rem; }
  .local-feature-icon img { max-height: 50px; }
  details.local-services-acc summary { padding: 0.95rem 1.1rem; gap: 0.75rem; }
}

/* ============== V12: PATIENT TOOLS — BIGGER HEADER + ACCORDION ============== */
.patient-tools-h2 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.15;
  color: var(--forest-dk);
}
.patient-tools-tagline {
  margin: 0.4rem 0 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--accent);
  line-height: 1.3;
}
.patient-tools-sub {
  margin: 1.1rem auto 0;
  color: var(--text-dark);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 60ch;
}
.patient-tools-sub strong { color: var(--forest-dk); }
.patient-tools-arrangement {
  margin: 1rem auto 0;
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
  max-width: 56ch;
}

/* Accordion variant (forest accent) for patient tools */
details.patient-tool-acc {
  background: #FFFEFB;
  border: 1px solid rgba(53, 92, 102, 0.16);
  border-left: 4px solid var(--forest);
  border-radius: 12px;
  margin-top: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
details.patient-tool-acc:first-of-type { margin-top: 1.5rem; }
details.patient-tool-acc[open] {
  background: linear-gradient(135deg, #FBFCF8 0%, #EFF3EE 100%);
  border-color: var(--forest-dk);
  box-shadow: 0 4px 18px rgba(53, 92, 102, 0.12);
}
details.patient-tool-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
details.patient-tool-acc summary::-webkit-details-marker { display: none; }
details.patient-tool-acc summary::marker { content: ""; }
.patient-tool-acc-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 0.15rem;
}
details.patient-tool-acc[open] .patient-tool-acc-num {
  background: var(--forest-dk);
}
.patient-tool-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.patient-tool-acc-line {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--forest-dk);
  font-style: italic;
}
.patient-tool-acc-desc {
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.55;
}
.patient-tool-acc-toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(53, 92, 102, 0.32);
  background: #fff;
  color: var(--forest-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 600;
  transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
  margin-top: 0.2rem;
}
details.patient-tool-acc[open] .patient-tool-acc-toggle {
  background: var(--forest-dk);
  border-color: var(--forest-dk);
  color: #fff;
  transform: rotate(45deg);
}
.patient-tool-acc-body {
  padding: 0 1.4rem 1.4rem 4rem;
  color: var(--text-dark);
  line-height: 1.7;
}
.patient-tool-acc-body p { font-size: 0.96rem; color: var(--text-mid); margin: 0 0 0.85rem; line-height: 1.7; }
.patient-tool-acc-body p strong { color: var(--text-dark); }
.patient-tool-acc-body p:last-child { margin-bottom: 0; }
.patient-tool-acc-body em { color: var(--forest-dk); font-style: italic; }
.patient-tool-acc-body .patient-tool-try {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, #F1F4EE 0%, #E8EDE5 100%);
  border-radius: 10px;
  border-left: 3px solid var(--forest);
}
.patient-tool-acc-body .patient-tool-try-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-dk);
  display: block;
  margin-bottom: 0.4rem;
}
.patient-tool-acc-body .patient-tool-try-time {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
  font-size: 0.78rem;
  margin-left: 0.4rem;
}
.patient-tool-acc-body .patient-tool-try p { margin: 0; font-size: 0.94rem; color: var(--text-dark); line-height: 1.65; }
.patient-tool-acc-body .patient-tool-source {
  margin: 0.85rem 0 0 !important;
  font-size: 0.85rem !important;
  color: var(--text-light) !important;
}
.patient-tool-acc-body .patient-tool-source a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px dashed var(--forest);
  font-weight: 500;
}
.patient-tool-acc-body .patient-tool-source a:hover {
  color: var(--forest-dk);
  border-bottom-style: solid;
}

@media (max-width: 640px) {
  details.patient-tool-acc summary { padding: 0.95rem 1.1rem; gap: 0.75rem; }
  .patient-tool-acc-num { width: 30px; height: 30px; font-size: 0.9rem; }
  .patient-tool-acc-line { font-size: 1.05rem; }
  .patient-tool-acc-desc { font-size: 0.88rem; }
  .patient-tool-acc-body { padding: 0 1.1rem 1.1rem 3rem; }
}

/* ============== V12: BEREAVEMENT PAGE ============== */
.bereavement-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: var(--forest-dk);
  margin: 0 0 1rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Print: expand all rn-acc accordions when printing */
@media print {
  details.rn-acc, details.permission-acc, details.patient-tool-acc, details.local-services-acc {
    background: #fff !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  details.rn-acc summary, details.permission-acc summary, details.patient-tool-acc summary, details.local-services-acc summary {
    cursor: default;
  }
  details:not([open]) > *:not(summary) {
    display: block !important;
  }
  .rn-acc-toggle, .permission-acc-toggle, .patient-tool-acc-toggle, .local-services-acc-toggle {
    display: none !important;
  }
  .nav-wrapper, .emergency-strip, footer, .disclaimer-strip {
    display: none !important;
  }
}

/* ============== V12: HEADER-BAND-SAND VARIANT for bereavement page ============== */
.header-band.header-band-sand {
  background: linear-gradient(135deg, #FBF8F2 0%, #F0E8D5 100%);
  border-color: rgba(201, 152, 111, 0.4);
}

/* ============== V12: VETERANS POINTER (Caregiver page CTA card) ============== */
a.veterans-pointer {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 1.85rem;
  background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid #4B5563;
}
a.veterans-pointer:hover, a.veterans-pointer:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  color: #fff;
  border-color: #BFA76A;
}
.veterans-pointer-icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 12px;
  background: rgba(191, 167, 106, 0.18);
  border: 1.5px solid rgba(191, 167, 106, 0.4);
  display: flex; align-items: center; justify-content: center;
  color: #E5CB85;
}
.veterans-pointer-text { flex: 1; min-width: 0; }
.veterans-pointer-tag {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #E5CB85;
  margin-bottom: 0.3rem;
}
.veterans-pointer-text h3 {
  margin: 0 0 0.4rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.25;
  color: #fff;
}
.veterans-pointer-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  line-height: 1.6;
}
.veterans-pointer-arrow {
  flex-shrink: 0;
  font-size: 1.8rem;
  color: #E5CB85;
  font-weight: 600;
  transition: transform 0.18s ease;
}
a.veterans-pointer:hover .veterans-pointer-arrow,
a.veterans-pointer:focus .veterans-pointer-arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  a.veterans-pointer { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.3rem; }
  .veterans-pointer-icon { width: 50px; height: 50px; }
  .veterans-pointer-arrow { align-self: flex-end; }
}

/* ============== V13: 3-COL FEATURE GRID + MOAB SOLUTIONS CARD ============== */
.local-feature-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 1024px) {
  .local-feature-grid-3 { grid-template-columns: 1fr; }
}
.local-feature-moab {
  background: linear-gradient(135deg, #FBFCF8 0%, #E8F0E2 100%);
  border-color: rgba(53, 92, 102, 0.25);
}
.local-feature-moab .local-feature-icon { color: var(--forest); }

/* ============== V13: HERO QUICK BUTTON (caregiver hero, 22-Q self-check) ============== */
.hero-quick-btn {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--forest-dk);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-quick-btn:hover, .hero-quick-btn:focus {
  background: #fff;
  color: var(--forest-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 152, 111, 0.25);
  text-decoration: none;
  border-color: var(--forest-dk);
}

/* ============== V13: "WHAT DO YOU NEED FIRST?" 3-BUTTON ROW ============== */
.quick-pick {
  padding: 1.75rem 1.5rem 0.75rem;
  background: transparent;
}
.quick-pick-label {
  text-align: center;
  margin: 0 0 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-dk);
}
.quick-pick-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .quick-pick-row { grid-template-columns: 1fr; }
}
a.quick-pick-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1.5px solid rgba(53, 92, 102, 0.20);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
a.quick-pick-btn:hover, a.quick-pick-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31, 66, 52, 0.10);
  text-decoration: none;
  color: var(--text-dark);
  border-color: var(--forest);
  background: #FBFCF8;
}
.quick-pick-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}
.quick-pick-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.3;
}
a.quick-pick-phone:hover { border-color: var(--forest-dk); }
a.quick-pick-self:hover { border-color: var(--accent); }
a.quick-pick-learn:hover { border-color: var(--primary); }

/* ============== V13: PERSISTENT RIGHT NOW PILL (top-right, all pages) ============== */
.persistent-rn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  background: var(--forest-dk);
  color: #fff;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.15s ease, transform 0.15s ease;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.persistent-rn:hover, .persistent-rn:focus {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.persistent-rn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFD27A;
  display: inline-block;
}
@media (max-width: 640px) {
  .persistent-rn {
    top: 8px;
    right: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}
/* Hide on the Right Now page itself - no point pointing to where you already are */
body.is-right-now .persistent-rn { display: none; }

/* ============== V13: MASTER-EXPANDER (collapses entire Real Tools sections) ============== */
/* Wraps the full collection of accordion cards in a single tap-to-reveal,
   so the page scans in one screen by default. */
details.master-expander {
  max-width: 880px;
  margin: 0 auto;
}
details.master-expander > summary.master-expander-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--forest-dk);
  width: fit-content;
  margin: 0 auto;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
details.master-expander > summary.master-expander-summary::-webkit-details-marker { display: none; }
details.master-expander > summary.master-expander-summary::marker { content: ""; }
details.master-expander > summary.master-expander-summary:hover,
details.master-expander > summary.master-expander-summary:focus {
  background: #FBFCF8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201, 152, 111, 0.22);
  border-color: var(--forest-dk);
}
.master-expander-arrow {
  font-size: 1rem;
  color: var(--accent);
  transition: transform 0.2s ease;
  display: inline-block;
}
details.master-expander[open] > summary.master-expander-summary .master-expander-arrow {
  transform: rotate(180deg);
}
details.master-expander[open] > summary.master-expander-summary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
details.master-expander[open] > summary.master-expander-summary:hover,
details.master-expander[open] > summary.master-expander-summary:focus {
  background: var(--forest-dk);
  border-color: var(--forest-dk);
  color: #fff;
}
details.master-expander[open] > summary.master-expander-summary .master-expander-arrow {
  color: #fff;
}
.master-expander-body {
  margin-top: 1.5rem;
  animation: master-fade-in 0.25s ease;
}
.master-expander-hint {
  text-align: center;
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  color: var(--text-mid);
  font-style: italic;
}
@keyframes master-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Print: master-expander always shows its contents */
@media print {
  details.master-expander, details.master-expander[open] {
    display: block;
  }
  details.master-expander > .master-expander-body {
    display: block !important;
    margin-top: 1rem;
  }
  details.master-expander > summary.master-expander-summary {
    display: none;
  }
}

/* ============== V15 — LEVEL COLLAPSE (5 Levels of Adapting) ============== */
.level-collapse {
  width: 100%;
}
.level-collapse > summary.level-step-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  transition: var(--transition);
  position: relative;
}
.level-collapse > summary.level-step-head::-webkit-details-marker { display: none; }
.level-collapse > summary.level-step-head::marker { content: ""; }
.level-collapse > summary.level-step-head:hover .level-tag,
.level-collapse > summary.level-step-head:hover h3 { color: var(--primary-dk); }
.level-collapse-arrow {
  margin-left: auto;
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
  transition: transform 0.25s ease;
  line-height: 1;
  flex-shrink: 0;
  padding: 0 0.5rem;
}
.level-collapse[open] > summary.level-step-head .level-collapse-arrow {
  transform: rotate(180deg);
}
.level-collapse > .level-step-body,
.level-collapse > .applies-to {
  margin-top: 1rem;
}

/* ============== V15 — FEATURED CARD "LEARN MORE" COLLAPSE ============== */
.feature-card-collapse {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.feature-card-collapse > summary.feature-card-collapse-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.4rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-dk);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.feature-card-collapse > summary::-webkit-details-marker { display: none; }
.feature-card-collapse > summary::marker { content: ""; }
.feature-card-collapse > summary:hover { background: var(--primary-lt); color: var(--accent); }
.feature-card-collapse-arrow {
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 700;
  transition: transform 0.25s ease;
  line-height: 1;
  margin-left: 0.5rem;
}
.feature-card-collapse[open] > summary .feature-card-collapse-arrow {
  transform: rotate(180deg);
}
.feature-card-collapse-body {
  padding: 0.5rem 0.4rem 0.25rem;
}
.feature-card-collapse-body p {
  margin: 0;
}

/* ============== V15 — REACH-OUT (Mental Health Evaluation) COLLAPSE ============== */
.reach-out-collapse {
  width: 100%;
  margin-bottom: 0.5rem;
}
.reach-out-collapse > summary.reach-out-collapse-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  gap: 1rem;
}
.reach-out-collapse > summary::-webkit-details-marker { display: none; }
.reach-out-collapse > summary::marker { content: ""; }
.reach-out-collapse > summary:hover { border-color: var(--primary); background: var(--primary-lt); }
.reach-out-collapse-h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--primary-dk);
  line-height: 1.35;
}
.reach-out-collapse-arrow {
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 700;
  transition: transform 0.25s ease;
  line-height: 1;
  flex-shrink: 0;
}
.reach-out-collapse[open] > summary .reach-out-collapse-arrow {
  transform: rotate(180deg);
}
.reach-out-collapse[open] > summary {
  background: var(--primary-lt);
  border-color: var(--primary);
}
.reach-out-collapse-body {
  padding: 1rem 1.25rem 0.5rem;
}

/* ============================================================
   SURVEY BANNER — Grand County Older Adults Needs Assessment
   Inserted just below the main nav on every page.
   ============================================================ */
.survey-banner {
  background: linear-gradient(135deg, var(--primary-dk) 0%, #2A4A53 100%);
  color: #fff;
  padding: 0.85rem 1rem;
  border-bottom: 3px solid var(--accent);
  text-align: center;
}
.survey-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.survey-banner-text {
  color: #fff;
  font-weight: 500;
  font-size: 1.02rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.survey-banner-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border: 2px solid #fff;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  white-space: nowrap;
}
.survey-banner-btn:hover,
.survey-banner-btn:focus {
  background: #fff;
  color: var(--primary-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  outline: none;
}
@media (max-width: 640px) {
  .survey-banner {
    padding: 0.75rem 0.75rem;
  }
  .survey-banner-inner {
    gap: 0.65rem;
  }
  .survey-banner-text {
    font-size: 0.95rem;
  }
  .survey-banner-btn {
    font-size: 0.88rem;
    padding: 0.55rem 1.1rem;
    letter-spacing: 0.03em;
  }
}