/* ==========================================================================
   premium.css — refinement layer for No Safety Net
   --------------------------------------------------------------------------
   Loaded last, after podcast-wow.css. Nothing else was edited to make this
   work, so removing the two <link> tags returns the site to exactly how it
   looked before.

   Direction: quiet editorial. An Instrument Serif masthead voice for the big
   type, Cabin for everything you actually read, hairlines instead of heavy
   rules, soft layered shadows instead of hard offsets, one bronze accent used
   sparingly, and more air between things. Nothing shouts; the structure and
   all the copy stay exactly where they were.
   ========================================================================== */

:root {
  --lux-ink: #1d1a19;
  --lux-ink-2: #23201e;
  --lux-paper: #fcf9f6;
  --lux-bone: #f2ece5;
  --lux-rose: #c98f98;
  --lux-rose-soft: #ead1d5;
  --lux-bronze: #7e5f3b;
  --lux-bronze-lite: #cdad83;
  --lux-bronze-line: rgba(126, 95, 59, .26);
  --lux-muted: #6b625c;

  --lux-hair: rgba(29, 26, 25, .11);
  --lux-hair-2: rgba(29, 26, 25, .2);
  --lux-hair-dark: rgba(242, 236, 229, .14);
  --lux-hair-dark-2: rgba(242, 236, 229, .24);

  --lux-display: "Instrument Serif", "Hoefler Text", Georgia, "Times New Roman", serif;
  --lux-body: "Cabin", "Avenir Next", "Segoe UI", sans-serif;

  --lux-r-sm: 3px;
  --lux-r: 6px;
  --lux-r-lg: 12px;

  --lux-sh-sm: 0 1px 2px rgba(29, 26, 25, .04), 0 3px 10px -6px rgba(29, 26, 25, .12);
  --lux-sh: 0 1px 2px rgba(29, 26, 25, .05), 0 10px 26px -16px rgba(29, 26, 25, .22);
  --lux-sh-lg: 0 2px 4px rgba(29, 26, 25, .05), 0 22px 50px -26px rgba(29, 26, 25, .28);
  --lux-sh-xl: 0 3px 6px rgba(29, 26, 25, .06), 0 38px 78px -38px rgba(29, 26, 25, .34);

  --lux-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- base ---------------------------------------------------------------- */

html { background: var(--lux-ink) !important; }

body {
  background: var(--lux-bone) !important;
  color: var(--lux-ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* finer, quieter paper grain than the original */
body::after {
  opacity: .019 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.96' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E") !important;
}

::selection { background: var(--lux-rose-soft); color: var(--lux-ink); }

/* Site-wide podcast launch announcement. */
body .marquee-bar {
  display: block !important;
  position: relative;
  z-index: 110;
  padding: 9px 16px !important;
  overflow: hidden;
  border: 0 !important;
  background: #1c1c1c !important;
  color: #f2c6cf !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
body .marquee-inner {
  width: max-content;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  animation: nsn-launch-scroll 28s linear infinite !important;
  text-align: center;
}
body .marquee-inner span {
  min-width: 25vw;
  margin: 0 !important;
  color: #f2c6cf !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  line-height: 1.5;
  text-transform: uppercase;
}
body .marquee-inner span::after {
  content: none !important;
}
body .marquee-bar:hover .marquee-inner { animation-play-state: paused !important; }
@keyframes nsn-launch-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-25% - 8px), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body .marquee-inner {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    animation: none !important;
    transform: none !important;
  }
  body .marquee-inner span[aria-hidden="true"] { display: none; }
  body .marquee-bar { white-space: normal !important; }
}

/* One typeface for reading, not whatever Calibri-ish font the visitor's
   machine happened to have. Cabin is already being downloaded. */
body,
body p, body li, body a, body span, body strong, body em, body small,
body button, body input, body textarea, body select, body label,
body td, body th, body dt, body dd, body summary, body blockquote, body figcaption {
  font-family: var(--lux-body) !important;
}

body p, body li { letter-spacing: .003em; }

/* --- display type -------------------------------------------------------- */

body .hero h1,
body .relief-hero h1,
body .sup-hero h1,
body .policy-hero h1,
body .home-hero h1,
body .mission h2,
body .resources h2,
body .video-section h2,
body .guides-intro h2,
body .section-title,
body .strategies > h2,
body .relief-section > h2,
body .hub-intro h2,
body .path-card h2,
body .nsn-podcast-copy h2,
body .contact-strip h2,
body .name-story-inner h2,
body .fashion-mission-inner h2,
body .founder-note h2,
body .accordion-panel .guide-inner h2,
body .empower h2,
body .friendship-panel h2,
body .invite-intro h2 {
  font-family: var(--lux-display) !important;
  font-weight: 400 !important;
  font-style: normal;
  letter-spacing: -.012em !important;
  text-transform: none !important;
}

body .mission h2,
body .resources h2,
body .video-section h2,
body .guides-intro h2,
body .section-title,
body .strategies > h2,
body .relief-section > h2,
body .hub-intro h2,
body .empower h2,
body .friendship-panel h2 {
  font-size: clamp(2.35rem, 4.9vw, 4.1rem) !important;
  line-height: 1.02 !important;
}

body .hero h1,
body .relief-hero h1,
body .sup-hero h1,
body .policy-hero h1 {
  font-size: clamp(2.5rem, 5.1vw, 4.4rem) !important;
  line-height: 1.04 !important;
}

body .home-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  max-width: 860px !important;
}

/* emphasis inside a masthead reads as italic, not as a colour change alone */
body .hero h1 em,
body .relief-hero h1 em,
body .sup-hero h1 em,
body .policy-hero h1 em {
  font-family: var(--lux-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--lux-rose) !important;
}

body .path-card h2 { font-size: clamp(1.95rem, 3.1vw, 2.7rem) !important; line-height: 1.06 !important; }
body .nsn-podcast-copy h2 { font-size: clamp(2rem, 3.4vw, 3rem) !important; line-height: 1.04 !important; }
body .contact-strip h2 { font-size: clamp(2rem, 3.8vw, 3.2rem) !important; line-height: 1.05 !important; }

/* sub-heads keep the sans, just calmer.

   On a standalone guide page the guide title is the h1, so the sub-heads
   inside the article are h2 rather than h3. They belong here with the other
   sub-heads rather than with the display type above, so they are listed
   explicitly -- but wrapped in :where(), which contributes nothing to
   specificity. That keeps these two selectors at exactly the weight of
   `body h3`, the weight they carried as h3s, so every per-container rule
   further down this file (`body .research-note`, `body .say-box` and the
   rest) still outranks them exactly as it did before. `.toolkit-body` is the
   full-width card section the three SOS Toolkit guides carry after their
   article. */
body h3, body h4,
body :where(.guide-drop .guide-inner) h2,
body :where(.toolkit-body) h2 {
  font-family: var(--lux-body) !important;
  font-weight: 600 !important;
  letter-spacing: -.008em !important;
  text-transform: none !important;
}

body .latest-podcast-meta h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

/* --- small labels: one shared treatment, wide-tracked (pink, set below) - */

body .nsn-podcast-kicker,
body .name-story-kicker,
body .podcast-topics-label,
body .fashion-mission-kicker,
body .social-bubbles-label,
body .founder-inner .label,
body .guide-kicker,
body .latest-podcast-meta > span {
  color: var(--lux-bronze) !important;
  font-family: var(--lux-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

body .nsn-podcast-kicker {
  border: 1px solid var(--lux-bronze-line) !important;
  border-radius: 100px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- dark surfaces: hero, contact strip, footer ------------------------- */

body .hero,
body .relief-hero,
body .sup-hero,
body .policy-hero {
  background:
    radial-gradient(115% 85% at 79% 6%, rgba(201, 143, 152, .17), transparent 58%),
    radial-gradient(85% 65% at 10% 102%, rgba(205, 173, 131, .12), transparent 62%),
    linear-gradient(168deg, var(--lux-ink-2), #161312) !important;
  border-bottom: 1px solid rgba(201, 143, 152, .3) !important;
}

body .home-hero {
  border: 1px solid var(--lux-hair-dark) !important;
  border-bottom: 1px solid rgba(201, 143, 152, .34) !important;
  border-radius: var(--lux-r-lg) !important;
  box-shadow: var(--lux-sh-xl) !important;
}

body .hero:not(.home-hero) .hero-eyebrow,
body .relief-hero .hero-eyebrow,
body .sup-hero .sup-hero-eyebrow,
body .sup-hero .hero-eyebrow,
body .policy-hero .hero-eyebrow {
  border: 1px solid rgba(205, 173, 131, .34) !important;
  border-radius: 100px !important;
  color: var(--lux-bronze-lite) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  margin-bottom: 26px !important;
  padding: 8px 15px !important;
}

body .hero > p,
body .relief-hero > p,
body .sup-hero > p,
body .policy-hero > p,
body .contact-strip p {
  color: rgba(242, 236, 229, .76) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

body footer {
  background: linear-gradient(180deg, #211e1c, #171413) !important;
  border-top: 1px solid var(--lux-hair-dark) !important;
  padding-top: 76px !important;
  padding-bottom: 52px !important;
}

body .footer-logo img {
  border: 1px solid var(--lux-hair-dark-2) !important;
  border-radius: var(--lux-r-sm) !important;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .85) !important;
}

body .footer-links a,
body .footer-social a { letter-spacing: .04em !important; font-weight: 500 !important; }
body .footer-fine { color: rgba(242, 236, 229, .5) !important; letter-spacing: .01em !important; }

body .footer-social a {
  border: 1px solid rgba(201, 143, 152, .38) !important;
  border-radius: 100px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  transition: transform .24s var(--lux-ease), background .24s var(--lux-ease),
              border-color .24s var(--lux-ease), color .24s var(--lux-ease) !important;
}

body .footer-social a:hover,
body .footer-social a:focus-visible {
  background: rgba(201, 143, 152, .12) !important;
  border-color: var(--lux-rose) !important;
  color: var(--lux-paper) !important;
  transform: translateY(-2px) !important;
}

/* Both Verella link rows sit on light cards - the paper panel on the home
   page, the bone story column on About. These had been styled for a dark
   surface, which put near-white labels on near-white paper. They now match
   the .social-bubble pills instead. */
body .brand-links a {
  border: 1px solid var(--lux-hair-2) !important;
  border-radius: 100px !important;
  background: var(--lux-paper) !important;
  color: var(--lux-ink) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  box-shadow: var(--lux-sh-sm) !important;
  transition: transform .24s var(--lux-ease), background .24s var(--lux-ease),
              border-color .24s var(--lux-ease), color .24s var(--lux-ease),
              box-shadow .24s var(--lux-ease) !important;
}

body .brand-links a:hover,
body .brand-links a:focus-visible {
  border-color: var(--lux-hair) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--lux-sh-lg) !important;
}

/* --- navigation ---------------------------------------------------------- */

body > nav {
  background: rgba(23, 20, 19, .84) !important;
  border: 1px solid var(--lux-hair-dark) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(242, 236, 229, .05),
              0 20px 44px -26px rgba(0, 0, 0, .6) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
}

body > nav .nav-links a {
  color: rgba(242, 236, 229, .82) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}

body > nav .nav-links a:hover { color: var(--lux-paper) !important; }

body > nav .nav-links .nav-cta {
  border: 1px solid var(--lux-rose) !important;
  border-radius: 100px !important;
  background: transparent !important;
  color: var(--lux-rose) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 9px 17px !important;
  box-shadow: none !important;
  transition: background .24s var(--lux-ease), color .24s var(--lux-ease) !important;
}

body > nav .nav-links .nav-cta:hover,
body > nav .nav-links .nav-cta:focus-visible {
  background: var(--lux-rose) !important;
  color: var(--lux-ink) !important;
}

body > nav .nav-logo {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* --- panels and cards: hairline + soft depth ---------------------------- */

body .resource-card,
body .topic-card,
body .truth-card,
body .rec-card,
body .ther-card,
body .sup-card,
body .relief-card,
body .strategy-card,
body .life-card,
body .bw-card,
body .accordion-item,
body .guide-drop,
body .reg-card,
body .toolkit,
body .policy-note,
body .why-box,
body .try-this,
body .say-box,
body .hub-card {
  border: 1px solid var(--lux-hair) !important;
  border-radius: var(--lux-r) !important;
  background: var(--lux-paper) !important;
  box-shadow: var(--lux-sh) !important;
  transition: transform .26s var(--lux-ease), box-shadow .26s var(--lux-ease),
              border-color .26s var(--lux-ease) !important;
}

/* the old pink-filled every-third-card becomes a quiet tonal alternation */
body .resource-card:nth-child(3n+2),
body .topic-card:nth-child(3n+2),
body .truth-card:nth-child(3n+2),
body .rec-card:nth-child(3n+2),
body .ther-card:nth-child(3n+2),
body .sup-card:nth-child(3n+2),
body .relief-card:nth-child(3n+2),
body .hub-card.books {
  background: var(--lux-bone) !important;
}

body .resource-card:hover,
body .topic-card:hover,
body .truth-card:hover,
body .rec-card:hover,
body .ther-card:hover,
body .sup-card:hover,
body .relief-card:hover,
body .strategy-card:hover,
body .life-card:hover,
body .bw-card:hover,
body .hub-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-sh-lg) !important;
  border-color: var(--lux-bronze-line) !important;
}

/* callouts keep their per-guide accent, lose the heavy frame */
body .info-callout {
  border: 1px solid var(--lux-hair) !important;
  border-left-width: 2px !important;
  border-radius: var(--lux-r-sm) !important;
  background: var(--lux-paper) !important;
  box-shadow: var(--lux-sh-sm) !important;
}

body .friendship-item,
body .relate-item,
body .res-item,
body .say-line {
  border-color: var(--lux-hair) !important;
  border-radius: var(--lux-r-sm) !important;
}

body .path-card {
  border: 1px solid var(--lux-hair) !important;
  border-radius: var(--lux-r) !important;
  background: var(--lux-paper) !important;
  box-shadow: var(--lux-sh-lg) !important;
  transition: transform .3s var(--lux-ease), box-shadow .3s var(--lux-ease),
              border-color .3s var(--lux-ease) !important;
}

body .path-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--lux-sh-xl) !important;
  border-color: var(--lux-bronze-line) !important;
}

body .latest-podcast-video,
body .podcast-topics,
body .fashion-mission-inner {
  border: 1px solid var(--lux-hair) !important;
  border-radius: var(--lux-r-lg) !important;
  background: var(--lux-paper) !important;
  box-shadow: var(--lux-sh-lg) !important;
}

body .nsn-podcast-intro,
body .name-story-inner {
  border-radius: var(--lux-r-lg) !important;
  box-shadow: var(--lux-sh-lg) !important;
}

body .nsn-podcast-logo {
  border-radius: var(--lux-r) !important;
  box-shadow: var(--lux-sh) !important;
}

body .podcast-topic-list li {
  border: 1px solid var(--lux-hair-2) !important;
  border-radius: 100px !important;
  background: var(--lux-paper) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
}

body .step-num {
  border: 1px solid var(--lux-hair-2) !important;
  border-radius: var(--lux-r-sm) !important;
  background: var(--lux-paper) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

/* --- pill links ---------------------------------------------------------- */

body .social-bubble {
  border: 1px solid var(--lux-hair-2) !important;
  background: var(--lux-paper) !important;
  box-shadow: var(--lux-sh-sm) !important;
  padding: 8px 15px 8px 12px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  transition: transform .24s var(--lux-ease), box-shadow .24s var(--lux-ease),
              border-color .24s var(--lux-ease) !important;
}

body .social-bubble:hover,
body .social-bubble:focus-visible {
  transform: translateY(-2px) !important;
  background: var(--lux-paper) !important;
  border-color: var(--lux-bronze-line) !important;
  box-shadow: var(--lux-sh) !important;
}

/* --- air ----------------------------------------------------------------- */

body .paths,
body .mission,
body .resources,
body .video-section,
body .strategies,
body .relief-section,
body .empower,
body .friendship-panel,
body .guides-intro,
body .hub {
  padding-top: clamp(54px, 6.2vw, 92px) !important;
  padding-bottom: clamp(54px, 6.2vw, 92px) !important;
}

body .hero,
body .relief-hero,
body .sup-hero,
body .policy-hero {
  padding-top: clamp(62px, 7vw, 104px) !important;
  padding-bottom: clamp(62px, 7vw, 104px) !important;
}

/* --- focus ---------------------------------------------------------------- */

body .skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  border: 2px solid var(--lux-bronze);
  border-radius: 999px;
  background: var(--lux-ink);
  color: var(--lux-paper) !important;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform .18s ease;
}

body .skip-link:focus { transform: translateY(0); }

body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body [tabindex]:focus-visible {
  outline: 2px solid var(--lux-bronze) !important;
  outline-offset: 3px !important;
}

body > nav a:focus-visible,
body > nav button:focus-visible,
body footer a:focus-visible,
body .hero a:focus-visible,
body .contact-strip a:focus-visible {
  outline-color: var(--lux-bronze-lite) !important;
}

/* --- one restrained arrival, hero only ---------------------------------- */

@keyframes lux-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

body .hero .hero-eyebrow,
body .hero h1,
body .hero > p {
  animation: lux-rise .5s var(--lux-ease) both;
}

body .hero h1  { animation-delay: .06s; }
body .hero > p { animation-delay: .12s; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 800px) {
  body .mission h2,
  body .resources h2,
  body .video-section h2,
  body .guides-intro h2,
  body .section-title,
  body .strategies > h2,
  body .relief-section > h2,
  body .hub-intro h2 {
    font-size: clamp(2.05rem, 8vw, 2.8rem) !important;
  }

  body .hero h1,
  body .relief-hero h1,
  body .sup-hero h1,
  body .policy-hero h1,
  body .home-hero h1 {
    font-size: clamp(2.1rem, 8.4vw, 3rem) !important;
  }

  body .path-card,
  body .latest-podcast-video,
  body .resource-card,
  body .topic-card,
  body .truth-card,
  body .rec-card,
  body .ther-card,
  body .sup-card,
  body .relief-card,
  body .strategy-card,
  body .life-card,
  body .bw-card,
  body .hub-card,
  body .podcast-topics,
  body .fashion-mission-inner {
    box-shadow: var(--lux-sh) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .hero .hero-eyebrow,
  body .hero h1,
  body .hero > p {
    animation: none !important;
  }

  body .path-card:hover,
  body .resource-card:hover,
  body .topic-card:hover,
  body .truth-card:hover,
  body .rec-card:hover,
  body .ther-card:hover,
  body .sup-card:hover,
  body .relief-card:hover,
  body .strategy-card:hover,
  body .life-card:hover,
  body .bw-card:hover,
  body .hub-card:hover,
  body .social-bubble:hover,
  body .hub-link:hover,
  body .quick-route a:hover,
  body .nsn-podcast-link:hover,
  body .brand-links a:hover,
  body .footer-social a:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Light-on-dark surfaces get their own treatment. These must never inherit
   the paper-card background above: the crisis band in particular carries
   999 / NHS 111 / Samaritans / Shout and has to stay legible.
   -------------------------------------------------------------------------- */

body .sup-emergency {
  background: linear-gradient(168deg, var(--lux-ink-2), #171413) !important;
  border: 1px solid var(--lux-hair-dark) !important;
  border-radius: var(--lux-r-lg) !important;
  box-shadow: var(--lux-sh-xl) !important;
  padding: 34px 36px !important;
}

body .sos-card {
  background: rgba(252, 249, 246, .05) !important;
  border: 1px solid var(--lux-hair-dark) !important;
  border-radius: var(--lux-r) !important;
  box-shadow: none !important;
  transition: border-color .26s var(--lux-ease), background .26s var(--lux-ease) !important;
}

body .sos-card:hover {
  background: rgba(252, 249, 246, .08) !important;
  border-color: rgba(205, 173, 131, .38) !important;
}

body .sup-emergency h2 {
  font-family: var(--lux-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem) !important;
  letter-spacing: -.01em !important;
}

body .sup-emergency .lead { color: rgba(242, 236, 229, .74) !important; opacity: 1 !important; }
body .sos-card .sos-name {
  color: var(--lux-bronze-lite) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
body .sos-card .sos-num { font-family: var(--lux-body) !important; font-weight: 600 !important; letter-spacing: -.01em !important; }
body .sos-card .sos-meta { color: rgba(242, 236, 229, .66) !important; opacity: 1 !important; }

/* the homepage wordmark stays a wordmark, not a pill */
body .home-hero .hero-eyebrow,
body .home-hero .brand-slogan {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--lux-bronze-lite) !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

body .home-hero .brand-slogan span:last-child {
  color: rgba(242, 236, 229, .58) !important;
  letter-spacing: .18em !important;
}

/* mid-paragraph emphasis: a rose tint and a hairline, not a weight jump */
body .home-hero .hero-highlight {
  font-family: var(--lux-body) !important;
  font-weight: 500 !important;
  color: var(--lux-rose) !important;
  border-bottom: 1px solid rgba(201, 143, 152, .34);
}

body .contact-strip {
  border-top: 1px solid var(--lux-hair-dark) !important;
  border-bottom: 1px solid var(--lux-hair-dark) !important;
}

/* --------------------------------------------------------------------------
   Guide and FAQ headers. These were solid black bars that flipped to solid
   pink when opened. As an editorial index they read better light: paper,
   ink text, a bronze hairline, and a bone tint plus a bronze edge to mark
   the one that is open.
   -------------------------------------------------------------------------- */

body .accordion-trigger,
body .guide-head {
  background: var(--lux-paper) !important;
  color: var(--lux-ink) !important;
  border-bottom: 1px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 22px 26px !important;
  transition: background .26s var(--lux-ease), border-color .26s var(--lux-ease) !important;
}

body .accordion-trigger *,
body .guide-head * { color: var(--lux-ink) !important; }

body .accordion-trigger:hover,
body .guide-head:hover {
  background: var(--lux-bone) !important;
  border-left-color: var(--lux-bronze-line) !important;
  color: var(--lux-ink) !important;
}

body .accordion-trigger:hover *,
body .guide-head:hover * { color: var(--lux-ink) !important; }

body .accordion-item.open > .accordion-trigger,
body .guide-drop[open] > .guide-head {
  background: var(--lux-bone) !important;
  border-bottom-color: var(--lux-hair) !important;
  border-left-color: var(--lux-bronze) !important;
  color: var(--lux-ink) !important;
}

body .accordion-item.open > .accordion-trigger *,
body .guide-drop[open] > .guide-head * { color: var(--lux-ink) !important; }

body .guide-head-title,
body .accordion-trigger > span:first-child {
  font-family: var(--lux-body) !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
}

/* Repeat the exact subject-box label as the scannable hook above each title. */
body .guide-subject-hook {
  display: block;
  margin-bottom: 4px;
  color: var(--lux-ink) !important;
  font-size: .78em;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .16em !important;
}

body .guide-teaser { color: var(--lux-muted) !important; letter-spacing: .003em !important; }

/* Researched education layer used throughout the women's guide collection. */
body .research-layer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: calc(100% - 60px);
  min-width: 0;
  margin: 34px 30px 36px;
  padding-top: 28px;
  border-top: 2px solid var(--lux-hair);
}

body .research-note {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--lux-hair);
  border-radius: 16px;
  background: var(--lux-bone);
}

body .research-example { background: #f8e8ef; }

body .research-note :is(h2,h3) {
  margin: 0 0 9px;
  color: var(--lux-ink) !important;
  font-family: var(--lux-body) !important;
  font-size: 1rem;
  font-weight: 800 !important;
}

body .research-note p {
  margin: 0;
  padding: 0 !important;
  color: var(--lux-muted) !important;
  font-size: .94rem !important;
  line-height: 1.62;
}

body .research-examples-label {
  margin-top: 16px !important;
  color: var(--lux-ink) !important;
  font-size: .82rem !important;
  font-weight: 800;
}

body .research-example-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

body .research-example-list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--lux-muted) !important;
  font-size: .88rem;
  line-height: 1.5;
}

body .research-example-list li::before {
  position: absolute;
  top: .68em;
  left: 2px;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: var(--lux-bronze);
}

body .teen-research-layer .research-example-list strong {
  color: var(--lux-ink) !important;
  font-weight: 800;
}

body .teen-research-layer .research-learn {
  background: #f0eafb;
}

body .teen-research-layer .research-example {
  background: #fbe7f0;
}

body .research-source {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--lux-bronze-line);
  border-radius: 999px;
  color: var(--lux-ink) !important;
  background: var(--lux-paper);
  font-size: .8rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none !important;
}

body .research-source:hover { border-color: var(--lux-bronze); }

@media (max-width: 640px) {
  body .research-layer {
    grid-template-columns: 1fr;
    width: calc(100% - 36px);
    margin: 30px 18px 28px;
  }
  body .research-source { grid-column: 1; border-radius: 14px; }
}

/* Comfortable reading floor across every women’s and teenager guide. */
body .guide-drop .guide-head-title {
  font-size: clamp(1.35rem, 2.4vw, 1.55rem) !important;
  line-height: 1.28 !important;
}

body .guide-drop .guide-teaser {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

body .guide-drop .guide-inner p,
body .guide-drop .guide-inner li,
body .guide-drop .research-note p,
body .guide-drop .research-example-list li,
body .guide-drop .relate-item > span:last-child,
body .guide-drop .say-line,
body .guide-drop .info-callout {
  font-size: clamp(1rem, .3vw + .94rem, 1.08rem) !important;
  line-height: 1.7 !important;
}

body .guide-drop .guide-inner :is(h2,h3),
body .guide-drop .guide-inner :is(h3,h4),
body .guide-drop .research-note :is(h2,h3) {
  font-size: max(1rem, 16px) !important;
  line-height: 1.4 !important;
}

body .guide-drop .research-examples-label,
body .guide-drop .research-source,
body .guide-drop .tag {
  font-size: .95rem !important;
  line-height: 1.45 !important;
}

/* Keep all five homepage support cards equally defined. */
body.home .resources .resource-grid .resource-card,
body.home .resources .resource-grid .resource-card:nth-child(3n) {
  border: 2px solid #d6547c !important;
}

/* There are five support cards in a two-column grid, so the last one has no
   partner on its row and would sit in the left-hand column with a gap beside
   it. Let it span both columns and hold it to a single column's width, so it
   centres under the other four instead.

   :nth-child(odd) is what makes this safe if a card is ever added or removed:
   the rule applies only while the final card actually starts a row on its own.
   The 13px is half the 26px grid gap set on .resource-grid; if that gap
   changes, this needs to change with it. Below 821px the grid collapses to a
   single column and the card is already full width, so the rule is scoped
   above that breakpoint. */
@media (min-width: 821px) {
  body.home .resources .resource-grid > .resource-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 13px);
  }
}

/* Give every SOS Toolkit tool link the same complete pink outline. */
body .relief-section .relief-grid .relief-card,
body .relief-section .relief-grid .relief-card:nth-child(3n) {
  border: 2px solid #d6547c !important;
}

/* Interactive check-in shared by guide and SOS Toolkit pages. */
body .attention-reset { width:min(920px,calc(100% - 36px)); margin:34px auto 54px; padding:clamp(28px,5vw,48px); border:2px solid #d6547c; border-radius:28px; background:linear-gradient(145deg,#fffaf7,#fbe7f1 58%,#f3eaf8); box-shadow:8px 8px 0 rgba(214,84,124,.16); }
body .attention-reset__intro { max-width:650px; margin:0 auto 24px; text-align:center; }
body .attention-reset__eyebrow { color:#9d244d; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
body .attention-reset h2 { margin:7px 0 8px; font-size:clamp(1.65rem,4vw,2.35rem); line-height:1.15; }
body .attention-reset__intro p { color:var(--lux-muted); }
body .attention-reset__choices { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
body .attention-reset__choices button, body .attention-reset__start, body .attention-reset__stop { min-height:46px; padding:11px 18px; border:2px solid #d6547c; border-radius:999px; background:#fffaf7; color:var(--lux-ink); font:inherit; font-weight:800; cursor:pointer; }
body .attention-reset__choices button[aria-pressed="true"], body .attention-reset__start { background:#d6547c; color:#fff; }
body .attention-reset__response { max-width:690px; margin:24px auto 0; padding:22px 24px; border-radius:18px; background:rgba(255,255,255,.78); }
body .attention-reset__message { margin-bottom:12px; font-weight:800; text-align:center; }
body .attention-reset__steps { display:grid; gap:7px; padding-left:1.35rem; }
body .attention-reset__breath { display:grid; grid-template-columns:120px 1fr; align-items:center; gap:24px; max-width:690px; margin:26px auto 0; padding-top:24px; border-top:1px solid rgba(157,36,77,.24); }
body .attention-reset__orb { width:96px; aspect-ratio:1; margin:auto; border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff,#e589c0 50%,#8a66cc); box-shadow:0 10px 28px rgba(138,102,204,.24); }
body .attention-reset__orb.is-breathing { animation:attention-breathe 10s ease-in-out 3; }
body .attention-reset__breath h3 { margin-bottom:5px; font-size:1.18rem; }
body .attention-reset__breath-copy { margin-bottom:12px; }
body .attention-reset__stop { margin-left:7px; }
body .attention-reset__activity-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:760px; margin:26px auto 0; padding-top:24px; border-top:1px solid rgba(157,36,77,.24); }
body .attention-reset__activity-grid .attention-reset__breath { grid-template-columns:96px 1fr; gap:16px; margin:0; padding:0; border:0; }
body .attention-reset__senses { padding:20px; border-radius:18px; background:rgba(255,255,255,.7); }
body .attention-reset__senses h3, body .attention-reset__explore h3 { margin-bottom:6px; font-size:1.18rem; }
body .attention-reset__sense-buttons { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 10px; }
body .attention-reset__sense-buttons button { padding:8px 12px; border:1px solid #d6547c; border-radius:999px; background:#fff; color:var(--lux-ink); font:inherit; font-weight:700; cursor:pointer; }
body .attention-reset__sense-buttons button[aria-pressed="true"] { background:#9d244d; color:#fff; }
body .attention-reset__sense-progress { font-weight:800; }
body .attention-reset__sense-clear { margin-top:8px; border:0; background:transparent; color:#8f2448; font:inherit; font-weight:800; text-decoration:underline; cursor:pointer; }
body .attention-reset__explore { display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; max-width:760px; margin:24px auto 0; padding:22px 24px; border:1px solid rgba(157,36,77,.28); border-radius:18px; background:#fffaf7; }
body .attention-reset__pick { min-height:46px; padding:11px 18px; border:2px solid #8a66cc; border-radius:999px; background:#8a66cc; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
body .attention-reset__suggestion { grid-column:1/-1; margin:0; text-align:center; font-weight:800; }
body .attention-reset__suggestion:empty { display:none; }
body .attention-reset__suggestion a { color:#8f2448; }
@keyframes attention-breathe { 0%,100%{transform:scale(.72)} 40%,60%{transform:scale(1)} }
@media (max-width:760px) { body .attention-reset__activity-grid{grid-template-columns:1fr} }
@media (max-width:560px) { body .attention-reset__choices{display:grid} body .attention-reset__choices button{width:100%} body .attention-reset__activity-grid .attention-reset__breath{grid-template-columns:1fr;text-align:center} body .attention-reset__explore{grid-template-columns:1fr;text-align:center} }
@media (prefers-reduced-motion:reduce) { body .attention-reset__orb.is-breathing{animation:none} }

/* Matching frames around the three Resources routes and their images. */
body.resources-page .hub .hub-grid .hub-card {
  border: 2px solid #d6547c !important;
}

body.resources-page .hub .hub-grid .hub-card .hub-card-image {
  border: 2px solid #d6547c !important;
}

/* Bring the Resources hub into the same soft editorial system as the site. */
body.resources-page .hub { background:linear-gradient(180deg,var(--lux-bone),var(--lux-surface)) !important; }
body.resources-page .hub-inner { width:min(1040px,100%); }
body.resources-page .hub-intro { margin-bottom:42px; }
body.resources-page .hub-intro h2 { font-size:clamp(2.25rem,5vw,4rem) !important; line-height:1 !important; letter-spacing:-.035em !important; text-transform:none !important; }
body.resources-page .hub-intro p { color:var(--lux-muted) !important; font-size:1rem; }
body.resources-page .hub .hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
body.resources-page .hub .hub-grid .hub-card { grid-column:auto; min-height:0; padding:28px !important; border-radius:26px !important; background:var(--lux-paper) !important; box-shadow:var(--lux-sh) !important; transform:none !important; }
body.resources-page .hub .hub-grid .hub-card.therapist { grid-column:1/-1; display:grid; grid-template-columns:minmax(260px,.85fr) 1.15fr; grid-template-rows:auto 1fr auto; column-gap:34px; align-items:start; background:linear-gradient(135deg,#fffaf7,#fbe7f1) !important; }
body.resources-page .hub .hub-grid .hub-card.therapist .hub-card-image { grid-row:1/4; height:100%; min-height:285px; margin:0; }
body.resources-page .hub .hub-grid .hub-card .hub-card-image { height:220px; margin-bottom:24px; border-radius:18px; box-shadow:5px 5px 0 rgba(214,84,124,.16); }
body.resources-page .hub .hub-grid .hub-card h2 { margin:0 0 12px; color:var(--lux-ink); font-family:var(--lux-display) !important; font-size:clamp(2rem,4vw,3rem) !important; font-weight:400 !important; line-height:1.02 !important; letter-spacing:-.025em !important; text-transform:none !important; }
body.resources-page .hub .hub-grid .hub-card p { margin:0 0 24px; color:var(--lux-muted) !important; font-size:1rem; line-height:1.7; }
body.resources-page .hub .hub-grid .hub-link { align-self:end; justify-self:start; margin:0; border:0; border-radius:999px; background:var(--lux-ink); color:var(--lux-paper); font-size:.86rem; font-weight:700; letter-spacing:0; text-transform:none; box-shadow:none; }
body.resources-page .hub .hub-grid .hub-link:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(38,31,34,.16); }
@media (max-width:760px) {
  body.resources-page .hub .hub-grid { grid-template-columns:1fr; }
  body.resources-page .hub .hub-grid .hub-card.therapist { grid-column:auto; display:flex; }
  body.resources-page .hub .hub-grid .hub-card.therapist .hub-card-image { width:100%; min-height:0; height:220px; margin-bottom:24px; }
}

/* Optional micro-activities inside alternating detailed guides. */
body .guide-mini-action { margin:28px 0 4px; padding:clamp(22px,4vw,30px); border:2px dashed #d6547c; border-radius:18px; background:linear-gradient(135deg,#fffaf7,#fbe7f1); text-align:center; }
body .guide-mini-action__label { display:block; margin:0 auto 7px; color:#912343; font-size:.76rem; font-weight:800; letter-spacing:.1em; line-height:1.4; text-align:center; text-transform:uppercase; }
body .guide-mini-action :is(h2,h3) { max-width:520px; margin:0 auto 6px; font-size:clamp(1.18rem,3vw,1.42rem) !important; line-height:1.3 !important; text-align:center; }
body .guide-mini-action__intro { max-width:520px; margin:0 auto 16px; text-align:center; }
body .guide-mini-action__reveal, body .guide-mini-action__done, body .guide-mini-action__more { min-height:44px; padding:9px 16px; border:2px solid #d6547c; border-radius:999px; background:#d6547c; color:#fff; font:inherit; font-weight:800; line-height:1.3; text-align:center; cursor:pointer; }
body .guide-mini-action__task { max-width:680px; margin:18px auto 0; padding-top:18px; border-top:1px solid rgba(145,35,67,.22); text-align:left; }
body .guide-mini-action__list { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:mini-action; }
body .guide-mini-action__list li { position:relative; min-height:48px; padding:12px 14px 12px 48px; border:1px solid rgba(214,84,124,.3); border-radius:13px; background:rgba(255,255,255,.78); line-height:1.55 !important; counter-increment:mini-action; }
body .guide-mini-action__list li::before { content:counter(mini-action); position:absolute; top:11px; left:12px; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#f3d2df; color:#76213d; font-size:.82rem; font-weight:800; }
body .guide-mini-action__controls { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:16px; }
body .guide-mini-action__more { border-color:#912343; background:#fff; color:#76213d; }
body .guide-mini-action__done { border-color:#8a66cc; background:#8a66cc; }
body .guide-mini-action__done:disabled { cursor:default; opacity:.78; }
body .guide-mini-action__feedback { min-height:1.5em; margin:12px 0 0; color:#76213d; font-weight:800; text-align:center; }
@media (max-width:520px) { body .guide-mini-action__controls{display:grid} body .guide-mini-action__controls button{width:100%} }

/* Deeper guided activities on SOS Toolkit. */
body .deep-relief { padding:clamp(40px,5vw,62px) 5%; background:linear-gradient(180deg,#fffaf7,#f7eaf1); }
body .deep-relief__head { max-width:650px; margin:0 auto 28px; text-align:center; }
body .deep-relief__head > span { color:#912343; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
body .deep-relief__head h2 { margin:8px 0 12px; font-size:clamp(2rem,5vw,3.6rem); line-height:1.02; }
body .deep-relief__grid { width:min(900px,100%); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
body .deep-activity { position:relative; display:flex; flex-direction:column; height:100%; padding:clamp(19px,3vw,26px); border:2px solid #d6547c; border-radius:21px; background:#fffaf7; box-shadow:6px 6px 0 rgba(214,84,124,.14); text-align:center; }
body .deep-activity.tension-release, body .deep-activity.feeling-check { grid-column:1/-1; }
body .deep-activity__number { position:static; display:grid; place-items:center; width:34px; height:34px; margin:0 auto 9px; border-radius:50%; background:#f3d2df; color:#8d2748; font-size:.76rem; font-weight:800; letter-spacing:.06em; }
body .deep-activity h3 { max-width:620px; margin:0 auto 9px; font-size:clamp(1.3rem,3vw,1.65rem); line-height:1.3; text-align:center; }
body .deep-activity > p { max-width:650px; margin:0 auto 15px; color:var(--lux-muted); text-align:center; }
body .deep-activity button { min-height:44px; padding:9px 15px; border:2px solid #d6547c; border-radius:999px; background:#fff; color:var(--lux-ink); font:inherit; font-weight:800; cursor:pointer; }
body .deep-activity__start { align-self:center; margin-top:auto; }
body .deep-activity__start, body .deep-activity__nav button:last-child { background:#d6547c !important; color:#fff !important; }
body .deep-activity__workspace { width:100%; margin-top:15px; padding-top:14px; border-top:1px solid rgba(145,35,67,.2); text-align:left; }
body .deep-activity__meter { height:7px; overflow:hidden; border-radius:10px; background:#f0dce4; }
body .deep-activity__meter span { display:block; width:100%; height:100%; border-radius:inherit; background:#8a66cc; transform:scaleX(.2); transform-origin:left; transition:transform .25s ease; }
body .deep-activity__status { margin:10px 0 5px; color:#76213d; font-size:.85rem; font-weight:800; }
body .deep-activity__prompt { min-height:72px; padding:13px; border-radius:14px; background:#f7eef8; font-weight:700; }
body .deep-activity__nav { display:flex; justify-content:space-between; gap:10px; margin-top:13px; }
body .deep-activity button:disabled { cursor:default; opacity:.5; }
body .worry-sorter label, body .worry-sorter legend, body .feeling-check label, body .feeling-check legend { display:block; margin-bottom:7px; font-weight:800; text-align:center; }
body .worry-sorter textarea { width:100%; margin-bottom:15px; padding:12px; border:1px solid #b96b85; border-radius:12px; background:#fff; color:var(--lux-ink); font:inherit; resize:vertical; }
body .worry-sorter fieldset { margin:0; padding:0; border:0; }
body .worry-sorter__choices { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
body .worry-sorter__choices button[aria-pressed="true"] { background:#8a66cc; border-color:#8a66cc; color:#fff; }
body .worry-sorter__answer { min-height:58px; margin:15px 0; padding:13px; border-radius:12px; background:#f7eef8; font-weight:700; text-align:center; }
body .worry-sorter__clear, body .tension-release__clear, body .feeling-check__clear { border:0 !important; background:transparent !important; color:#76213d !important; text-decoration:underline; }
body .tension-release__items { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
body .tension-release__items button { display:grid; align-content:center; gap:5px; min-height:92px; border-radius:15px; text-align:center; }
body .tension-release__items button[aria-pressed="true"] { background:#f0e5f8; border-color:#8a66cc; }
body .tension-release__items button[aria-pressed="true"] strong::after { content:' done'; color:#76213d; font-size:.8rem; }
body .tension-release__items span { color:var(--lux-muted); font-weight:500; line-height:1.45; }
body .tension-release__progress { margin:15px 0 5px !important; color:#76213d !important; font-weight:800; text-align:center; }
body .feeling-check fieldset { margin:0 0 18px; padding:0; border:0; }
body .feeling-check__choices { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
body .feeling-check__choices button[aria-pressed="true"] { border-color:#8a66cc; background:#8a66cc; color:#fff; }
body .feeling-check label { margin-top:6px; }
body .feeling-check output { color:#76213d; }
body .feeling-check input[type="range"] { width:min(560px,100%); margin:5px 0 20px; accent-color:#d6547c; }
body .feeling-check__respond { display:block; margin:0 auto; border-color:#d6547c !important; background:#d6547c !important; color:#fff !important; }
body .feeling-check__answer { min-height:58px; margin:15px 0 4px; padding:13px; border-radius:12px; background:#f7eef8; font-weight:700; text-align:center; }
@media (max-width:820px) { body .deep-relief__grid{grid-template-columns:1fr} body .deep-activity.tension-release, body .deep-activity.feeling-check{grid-column:auto} body .tension-release__items{grid-template-columns:1fr 1fr} }
@media (max-width:480px) { body .tension-release__items{grid-template-columns:1fr} body .tension-release__items button{min-height:0} body .worry-sorter__choices{display:grid} }

@media (max-width: 600px) {
  body .guide-drop .guide-head-title { font-size: 1.28rem !important; }
  body .guide-drop .guide-teaser { font-size: 1rem !important; }
}

/* One card palette across the full site: pink, soft pink, cream and ink. */
body .resource-card,
body .topic-card,
body .truth-card,
body .rec-card,
body .ther-card,
body .sup-card,
body .relief-card,
body .strategy-card,
body .life-card,
body .bw-card,
body .invite-card,
body .path-card,
body .reg-card,
body .mission-card,
body .social-spotlight-card,
body .hub-card,
body .sos-card,
body .accordion-item,
body .guide-drop,
body .guide-full,
body .deep-activity,
body .feeling-check,
body .follow-panel-inner,
body .disclaimer-box,
body .research-note,
body .why-box,
body .try-this,
body .info-callout,
body .say-box {
  border-color: #d98f9d !important;
  background: linear-gradient(145deg, #faf5f1, #f3e9e2) !important;
  color: #1c1c1c !important;
  box-shadow: 7px 7px 0 rgba(217, 143, 157, .13) !important;
}

body .friendship-item,
body .relate-item,
body .res-item,
body .say-line,
body .research-example,
body .tool-item,
body .deep-activity__prompt,
body .deep-activity__workspace,
body .guided-meditation__now {
  border-color: rgba(217, 143, 157, .42) !important;
  background: #faf5f1 !important;
  color: #1c1c1c !important;
}

body .accordion-trigger,
body .guide-head {
  border-color: #d98f9d !important;
  background: #f2c6cf !important;
  color: #1c1c1c !important;
}

body .resource-card:hover,
body .topic-card:hover,
body .truth-card:hover,
body .rec-card:hover,
body .ther-card:hover,
body .sup-card:hover,
body .relief-card:hover,
body .strategy-card:hover,
body .life-card:hover,
body .bw-card:hover,
body .invite-card:hover,
body .path-card:hover,
body .hub-card:hover {
  border-color: #d98f9d !important;
  box-shadow: 9px 9px 0 rgba(217, 143, 157, .2) !important;
}

/* Keep every light follow-up panel readable after the site-wide colour lock. */
body .follow-panel-inner,
body .follow-panel-inner h2,
body .follow-panel-inner p,
body .follow-panel-inner .follow-panel-kicker {
  color: #1c1c1c !important;
}

body .follow-panel-inner .brand-mark,
body .follow-panel-inner .brand-mark * {
  color: #d98f9d !important;
  stroke: #d98f9d !important;
}

body .follow-panel-links a,
body .follow-panel-links a span,
body .follow-panel-links a svg {
  border-color: #d98f9d !important;
  background: #f2c6cf !important;
  color: #1c1c1c !important;
}

/* Stable centred layout for the shared Follow along panel on every page. */
body .follow-panel {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: clamp(38px, 5vw, 62px) max(16px, 5%) !important;
  border-top: 1px solid rgba(217, 143, 157, .28) !important;
  background: #f3e9e2 !important;
}

body .follow-panel-inner {
  box-sizing: border-box;
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 42px) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #d98f9d !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #faf5f1, #f2c6cf) !important;
  box-shadow: 7px 7px 0 rgba(217, 143, 157, .14) !important;
  text-align: center !important;
}

body .follow-panel .brand-mark {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 12px !important;
}

body .follow-panel-kicker { margin: 0 0 9px !important; color: #c9347e !important; }
body .follow-panel h2 { max-width: 620px; margin: 0 auto 10px !important; color: #1c1c1c !important; }
body .follow-panel p { max-width: 58ch; margin: 0 auto 22px !important; color: #1c1c1c !important; }
body .follow-panel-links { width: 100%; justify-content: center !important; align-items: center; gap: 9px !important; }

body .follow-panel-links a {
  min-height: 44px;
  justify-content: center;
  margin: 0 !important;
  padding: 9px 16px !important;
  border: 2px solid #d98f9d !important;
  background: #faf5f1 !important;
  color: #1c1c1c !important;
}

body .follow-panel-links a:hover,
body .follow-panel-links a:focus-visible {
  border-color: #d98f9d !important;
  background: #d98f9d !important;
  color: #1c1c1c !important;
}

@media (max-width: 560px) {
  body .follow-panel { padding: 28px 10px !important; }
  body .follow-panel-inner { padding: 24px 14px !important; border-radius: 19px !important; box-shadow: 5px 5px 0 rgba(217, 143, 157, .14) !important; }
  body .follow-panel h2 { font-size: clamp(1.7rem, 8vw, 2.15rem) !important; }
  body .follow-panel-links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .follow-panel-links a { width: 100%; padding: 9px 10px !important; }
}

@media (max-width: 360px) {
  body .follow-panel-links { grid-template-columns: 1fr; }
}

/* Higher-specificity lock keeps later legacy panel rules from shifting this layout. */
html body .follow-panel { padding: clamp(38px, 5vw, 62px) max(16px, 5%) !important; background: #f3e9e2 !important; border-top-color: rgba(217, 143, 157, .28) !important; }
html body .follow-panel .follow-panel-inner { width: min(760px, 100%) !important; margin: 0 auto !important; padding: clamp(28px, 4vw, 42px) !important; border: 2px solid #d98f9d !important; border-radius: 24px !important; background: linear-gradient(145deg, #faf5f1, #f2c6cf) !important; color: #1c1c1c !important; }
html body .follow-panel .follow-panel-kicker { color: #c9347e !important; }
html body .follow-panel h2,
html body .follow-panel p { color: #1c1c1c !important; }
html body .follow-panel h2 { margin: 0 auto 10px !important; }
html body .follow-panel p { margin: 0 auto 22px !important; }
html body .follow-panel .follow-panel-links a,
html body .follow-panel .follow-panel-links a span,
html body .follow-panel .follow-panel-links a svg { border-color: #d98f9d !important; background: #faf5f1 !important; color: #1c1c1c !important; }
html body .follow-panel .follow-panel-links a:hover,
html body .follow-panel .follow-panel-links a:focus-visible { background: #d98f9d !important; color: #1c1c1c !important; }

@media (max-width: 560px) {
  html body .follow-panel { padding: 28px 10px !important; }
  html body .follow-panel .follow-panel-inner { padding: 24px 14px !important; border-radius: 19px !important; }
}

/* Compact soft-pink quick check-in on the women and teenager guide pages. */
body .attention-reset {
  width: min(780px, calc(100% - 32px)) !important;
  margin: 24px auto 38px !important;
  padding: clamp(20px, 3.5vw, 30px) !important;
  border: 2px solid #d98f9d !important;
  border-radius: 22px !important;
  background: #f2c6cf !important;
  box-shadow: 7px 7px 0 rgba(217, 143, 157, .14) !important;
}

body .attention-reset__intro {
  max-width: 590px !important;
  margin-bottom: 17px !important;
}

body .attention-reset__eyebrow { color: #c9347e !important; }
body .attention-reset h2 { margin: 5px 0 6px !important; font-size: clamp(1.5rem, 3.2vw, 2rem) !important; }

body .attention-reset__choices { gap: 7px !important; }
body .attention-reset__choices button,
body .attention-reset__start,
body .attention-reset__stop,
body .attention-reset__sense-buttons button {
  border-color: #d98f9d !important;
  background: #faf5f1 !important;
  color: #1c1c1c !important;
}

body .attention-reset__choices button[aria-pressed="true"],
body .attention-reset__start,
body .attention-reset__sense-buttons button[aria-pressed="true"],
body .attention-reset__pick {
  border-color: #d98f9d !important;
  background: #d98f9d !important;
  color: #1c1c1c !important;
}

body .attention-reset__response,
body .attention-reset__senses,
body .attention-reset__explore {
  border-color: rgba(217, 143, 157, .45) !important;
  background: #faf5f1 !important;
}

body .attention-reset__response { margin-top: 17px !important; padding: 16px 18px !important; }
body .attention-reset__activity-grid { gap: 16px !important; margin-top: 18px !important; padding-top: 18px !important; border-color: rgba(217, 143, 157, .35) !important; }
body .attention-reset__senses { padding: 16px !important; }
body .attention-reset__explore { margin-top: 18px !important; padding: 16px 18px !important; }
body .attention-reset__breath { margin-top: 18px !important; padding-top: 18px !important; border-color: rgba(217, 143, 157, .35) !important; }
body .attention-reset__orb { background: radial-gradient(circle at 38% 32%, #faf5f1, #f2c6cf 50%, #d98f9d) !important; box-shadow: 0 10px 28px rgba(217, 143, 157, .2) !important; }

@media (max-width: 560px) {
  body .attention-reset { width: calc(100% - 20px) !important; margin: 18px auto 30px !important; padding: 18px 14px !important; }
}

/* Final brand palette: no red, lilac or purple surfaces remain visible. */
:root {
  --accent: #d98f9d !important;
  --accent-light: #f2c6cf !important;
  --jc1: #d98f9d !important;
  --jc2: #d98f9d !important;
  --jc3: #d98f9d !important;
  --jc4: #d98f9d !important;
  --jc5: #d98f9d !important;
  --jc6: #d98f9d !important;
  --jc1-l: #f2c6cf !important;
  --jc2-l: #f2c6cf !important;
  --jc3-l: #f2c6cf !important;
  --jc4-l: #f2c6cf !important;
  --jc5-l: #f2c6cf !important;
  --jc6-l: #f2c6cf !important;
}

html body .accordion-category,
html body .guide-mini-action,
html body .worry-sorter__answer,
html body .feeling-check__answer,
html body .deep-activity__prompt,
html body .attention-reset__response,
html body .attention-reset__senses,
html body .attention-reset__explore {
  border-color: #d98f9d !important;
  background: linear-gradient(145deg, #faf5f1, #f2c6cf) !important;
  color: #1c1c1c !important;
}

html body .guide-mini-action__label,
html body .guide-mini-action__feedback,
html body .deep-relief__head > span,
html body .deep-activity__status,
html body .tension-release__progress,
html body .feeling-check output {
  color: #1c1c1c !important;
}

html body .guide-mini-action__reveal,
html body .guide-mini-action__done,
html body .guide-mini-action__more,
html body .deep-activity__start,
html body .deep-activity__nav button:last-child,
html body .feeling-check__respond,
html body .attention-reset__pick {
  border-color: #d98f9d !important;
  background: #d98f9d !important;
  color: #1c1c1c !important;
}

html body .guide-mini-action__list li::before,
html body .deep-activity__number {
  background: #f2c6cf !important;
  color: #1c1c1c !important;
}

html body .reg-col.calm li::before { background: #d98f9d !important; }
html body [data-social] { --soc-l: #d98f9d !important; --soc-d: #f2c6cf !important; --soc-t: #f2c6cf !important; }

html body.resources-page .hub .hub-grid .hub-card,
html body.resources-page .hub .hub-grid .hub-card.therapist,
html body.resources-page .quick-route {
  border-color: #d98f9d !important;
  background: linear-gradient(145deg, #faf5f1, #f2c6cf) !important;
  color: #1c1c1c !important;
}

html body.resources-page .quick-route a,
html body.resources-page .quick-route a:hover,
html body.resources-page .quick-route a:focus-visible {
  border-color: #d98f9d !important;
  background: #d98f9d !important;
  color: #1c1c1c !important;
}

html body .topics .topic-grid .topic-card,
html body .topics .topic-grid .topic-card:nth-child(n),
html body .truths-inner .truth-card:nth-child(n) {
  border-color: #d98f9d !important;
  background: linear-gradient(145deg, #faf5f1, #f2c6cf) !important;
  color: #1c1c1c !important;
}

/* Final interaction colour check: remove older purple states. */
body .guide-mini-action__done,
body .worry-sorter__choices button[aria-pressed="true"],
body .feeling-check__choices button[aria-pressed="true"],
body .tension-release__items button[aria-pressed="true"] {
  border-color: #d98f9d !important;
  background: #f2c6cf !important;
  color: #1c1c1c !important;
}

body .deep-activity__meter span { background: #d98f9d !important; }

/* The site-wide keyboard focus ring. This used to be the decorative dusty
   rose #d98f9d, which is only 2.32:1 against the cream page and so failed
   WCAG 2.1 SC 1.4.11 for a non-text indicator; because it is !important it
   also silently overrode the higher-contrast ring in a11y-contrast.css. The
   ring is now --lux-pink (#b02e52), 5.77:1 on cream, which is the same colour
   that file already uses for rose-on-light text. The nav, footer and hero
   rules above keep their lighter --lux-bronze-lite ring, since those sit on
   dark panels and are more specific than this rule. */
body :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #b02e52 !important;
  outline-offset: 3px !important;
}

/* Readable copy and controls inside the light follow-up panels. */
body .follow-panel-inner,
body .follow-panel-inner h2,
body .follow-panel-inner p,
body .follow-panel-inner .follow-panel-kicker {
  color: #1c1c1c !important;
}

body .follow-panel-inner .brand-mark,
body .follow-panel-inner .brand-mark * {
  color: #d98f9d !important;
  stroke: #d98f9d !important;
}

body .follow-panel-links a,
body .follow-panel-links a span,
body .follow-panel-links a svg {
  border-color: #d98f9d !important;
  background: #f2c6cf !important;
  color: #1c1c1c !important;
}

body .guide-chevron,
body .accordion-icon {
  color: var(--lux-bronze) !important;
  opacity: .8;
  transition: transform .26s var(--lux-ease), opacity .26s var(--lux-ease) !important;
}

body .accordion-trigger:hover .accordion-icon,
body .guide-head:hover .guide-chevron { opacity: 1; }

/* ==========================================================================
   Dark feature blocks
   --------------------------------------------------------------------------
   These were authored as dark panels and dark primary buttons with cream
   text. An earlier pass gave them the paper-card background, which left
   cream text on near-white - the "No Safety Net is a live YouTube podcast"
   box on the homepage among them. They stay dark; the text colour is set
   here explicitly rather than left to inherit, so this cannot drift again.
   ========================================================================== */

body .name-story-podcast,
body .mission-story .mission-card,
body .quick-route {
  background: linear-gradient(168deg, var(--lux-ink-2), #171413) !important;
  border: 1px solid var(--lux-hair-dark) !important;
  border-radius: var(--lux-r-lg) !important;
  box-shadow: var(--lux-sh-lg) !important;
  color: rgba(242, 236, 229, .78) !important;
}

body .name-story-podcast > strong,
body .mission-story .mission-card h2,
body .quick-route h2,
body .quick-route h3 { color: var(--lux-paper) !important; }

body .name-story-podcast p,
body .mission-story .mission-card .mission-copy p,
body .quick-route p { color: rgba(242, 236, 229, .74) !important; }

body .mission-story .mission-card .mission-kicker {
  color: var(--lux-bronze-lite) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

/* the promise line already carries its own dark chip - keep it readable */
body .mission-story .mission-promise {
  background: rgba(252, 249, 246, .07) !important;
  border: 1px solid var(--lux-hair-dark) !important;
  border-radius: 100px !important;
  color: var(--lux-paper) !important;
  box-shadow: none !important;
}

/* --- dark primary buttons ------------------------------------------------ */

body .hub-link,
body .quick-route a,
body .nsn-podcast-link,
body .name-story-podcast a {
  border: 1px solid transparent !important;
  border-radius: 100px !important;
  background: var(--lux-ink) !important;
  color: var(--lux-paper) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  box-shadow: var(--lux-sh) !important;
  transition: transform .24s var(--lux-ease), box-shadow .24s var(--lux-ease),
              background .24s var(--lux-ease) !important;
}

/* inside a dark panel the solid ink button would disappear, so invert it */
body .quick-route a,
body .name-story-podcast a {
  background: var(--lux-paper) !important;
  color: var(--lux-ink) !important;
  box-shadow: none !important;
}

body .hub-link:hover,
body .hub-link:focus-visible,
body .nsn-podcast-link:hover,
body .nsn-podcast-link:focus-visible {
  transform: translateY(-2px) !important;
  background: var(--lux-ink-2) !important;
  box-shadow: var(--lux-sh-lg) !important;
}

body .quick-route a:hover,
body .quick-route a:focus-visible,
body .name-story-podcast a:hover,
body .name-story-podcast a:focus-visible {
  transform: translateY(-2px) !important;
  background: var(--lux-rose) !important;
  color: var(--lux-ink) !important;
}

body .quick-route a:focus-visible,
body .name-story-podcast a:focus-visible,
body .name-story-podcast:focus-within a { outline-color: var(--lux-bronze-lite) !important; }

@media (prefers-reduced-motion: reduce) {
  body .hub-link:hover,
  body .quick-route a:hover,
  body .nsn-podcast-link:hover,
  body .name-story-podcast a:hover { transform: none !important; }
}

/* ============================================================
   FOLLOW COMPONENTS
   A full-width panel above every footer, plus slim inline rails
   dropped between long content runs. Both are premium.css-only
   classes, so nothing else in the cascade touches them.
   ============================================================ */

/* ---- the panel ---- */
body .follow-panel {
  margin: 0 !important;
  padding: clamp(54px, 6vw, 86px) 5% !important;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(201, 143, 152, .13), transparent 58%),
    linear-gradient(168deg, var(--lux-ink-2), #171413) !important;
  border-top: 1px solid var(--lux-hair-dark) !important;
  color: rgba(242, 236, 229, .78) !important;
}

body .follow-panel-inner {
  width: min(880px, 100%);
  margin: 0 auto;
  text-align: center;
}

body .follow-panel-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--lux-bronze-lite) !important;
  font-family: var(--lux-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

body .follow-panel h2 {
  margin: 0 0 14px !important;
  font-family: var(--lux-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.95rem, 3.9vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em !important;
  color: var(--lux-paper) !important;
  text-transform: none !important;
}

body .follow-panel p {
  margin: 0 auto 30px !important;
  max-width: 54ch;
  font-family: var(--lux-body) !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
  color: rgba(242, 236, 229, .72) !important;
}

body .follow-panel-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

body .follow-panel-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 19px !important;
  border: 1px solid var(--lux-hair-dark-2) !important;
  border-radius: 100px !important;
  background: rgba(252, 249, 246, .05) !important;
  color: var(--lux-paper) !important;
  font-family: var(--lux-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform .24s var(--lux-ease), background .24s var(--lux-ease),
              border-color .24s var(--lux-ease) !important;
}

body .follow-panel-links a svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--lux-rose-soft);
  transition: color .24s var(--lux-ease);
}

body .follow-panel-links a:hover,
body .follow-panel-links a:focus-visible {
  transform: translateY(-2px) !important;
  background: rgba(252, 249, 246, .12) !important;
  border-color: var(--lux-bronze-lite) !important;
}

body .follow-panel-links a:hover svg,
body .follow-panel-links a:focus-visible svg { color: var(--lux-paper); }

body .follow-panel-links a:focus-visible {
  outline: 2px solid var(--lux-bronze-lite) !important;
  outline-offset: 3px !important;
}

/* ---- the inline rail ---- */
body .follow-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 22px;
  box-sizing: border-box;
  width: min(820px, 92%);
  margin: 34px auto 40px !important;
  padding: 16px 22px !important;
  /* border, radius, fill and copy colour are set in the bubbly pass below */
}

body .follow-rail-copy {
  margin: 0 !important;
  flex: 1 1 260px;
  font-family: var(--lux-body) !important;
}

body .follow-rail-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

body .follow-rail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid var(--lux-hair) !important;
  border-radius: 50% !important;
  background: var(--lux-bone) !important;
  color: var(--lux-ink) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform .24s var(--lux-ease), background .24s var(--lux-ease),
              border-color .24s var(--lux-ease), color .24s var(--lux-ease) !important;
}

body .follow-rail-link svg { width: 16px; height: 16px; }

body .follow-rail-link:hover,
body .follow-rail-link:focus-visible {
  transform: translateY(-2px) !important;
  background: var(--lux-ink) !important;
  border-color: var(--lux-ink) !important;
  color: var(--lux-paper) !important;
}

body .follow-rail-link:focus-visible {
  outline: 2px solid var(--lux-bronze) !important;
  outline-offset: 3px !important;
}

@media (max-width: 620px) {
  body .follow-rail { justify-content: center; text-align: center; }
  body .follow-panel-links a { padding: 10px 15px !important; font-size: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body .follow-panel-links a:hover,
  body .follow-rail-link:hover { transform: none !important; }
}

/* ============================================================
   SOCIAL SPOTLIGHT — refine the homepage grid so it holds five
   cards without the third-card-orphan of a rigid 3-up grid.
   ============================================================ */
body .social-spotlight-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  gap: 10px !important;
}

body .social-spotlight-card {
  --soc-l: var(--lux-pink);
  --soc-t: var(--lux-bone);
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 12px 11px 13px !important;
  min-height: 0 !important;
  border: 1px solid var(--lux-hair) !important;
  border-radius: 10px !important;
  background: var(--lux-paper) !important;
  box-shadow: var(--lux-sh-sm) !important;
  text-decoration: none !important;
  transition: transform .26s var(--lux-ease), box-shadow .26s var(--lux-ease),
              border-color .26s var(--lux-ease), background .26s var(--lux-ease) !important;
}

body .social-spotlight-card .social-platform,
body .social-spotlight-card strong,
body .social-spotlight-card .social-action {
  transition: color .26s var(--lux-ease), background .26s var(--lux-ease) !important;
}

body .social-spotlight-card:hover,
body .social-spotlight-card:focus-visible {
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-sh-lg) !important;
}

body .social-spotlight-card:focus-visible {
  outline: 2px solid var(--lux-ink) !important;
  outline-offset: 3px !important;
}

body .social-platform {
  font-family: var(--lux-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--soc-l) !important;
}

body .social-spotlight-card strong {
  font-family: var(--lux-body) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
  color: var(--lux-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body .social-action {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--lux-body) !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: var(--lux-muted) !important;
}

body .social-action b {
  display: inline-block;
  font-weight: 600;
  color: inherit;
  transition: transform .26s var(--lux-ease);
}

body .social-spotlight-card:hover .social-action b { transform: translateX(4px); }

body .social-spotlight-copy h2 {
  font-family: var(--lux-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
}

body .social-spotlight-photo img {
  border-radius: var(--lux-r-lg) !important;
  box-shadow: var(--lux-sh-lg) !important;
}

@media (prefers-reduced-motion: reduce) {
  body .social-spotlight-card:hover { transform: none !important; }
  body .social-spotlight-card:hover .social-action b { transform: none; }
}

/* ============================================================
   BRAND MARKS
   A stroke-only derivative of assets/mic-mark.svg that inherits
   currentColor, so the same glyph works on paper and on ink
   without shipping two files.
   ============================================================ */
body .brand-mark {
  display: block;
  flex: none;
  color: var(--lux-ink);
}

body .brand-mark .bm-mic { stroke: currentColor; }
body .brand-mark .bm-wave { stroke: var(--lux-rose); }

body .follow-panel .brand-mark {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  color: var(--lux-paper);
  opacity: .9;
}
body .follow-panel .brand-mark .bm-wave { stroke: var(--lux-rose-soft); }

/* nav lockup: the supplied logo.png has a baked-in cream background and no
   alpha channel, so it needs a matching chip rather than sitting bare. */
body > nav .nav-logo {
  background: var(--lux-bone) !important;
  border: 1px solid var(--lux-hair) !important;
  border-radius: var(--lux-r) !important;
  padding: 4px 8px !important;
  box-shadow: var(--lux-sh-sm) !important;
  transition: transform .24s var(--lux-ease), box-shadow .24s var(--lux-ease),
              border-color .24s var(--lux-ease) !important;
}

body > nav .nav-logo:hover,
body > nav .nav-logo:focus-visible {
  transform: translateY(-1px) !important;
  border-color: var(--lux-bronze-line) !important;
  box-shadow: var(--lux-sh) !important;
}

/* ---- co-brand lockup: No Safety Net alongside Verella ----
   Verella's brand rose (#d98f9d) is only 2.1:1 on bone but 6.9:1 on ink,
   so the plaque is dark. The supplied PNGs are trimmed and transparent,
   which is why they can sit straight on the gradient. */
body .brand-lockup {
  /* 1fr | rule | 1fr keeps both sides equal so the divider sits dead centre */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 28px;
  margin: 34px auto 20px;
  padding: 20px 32px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--lux-hair-dark);
  border-radius: 100px;
  background: linear-gradient(168deg, var(--lux-ink-2), #171413);
  box-shadow: var(--lux-sh-lg);
}

body .brand-lockup-item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none !important;
  color: var(--lux-paper) !important;
  transition: opacity .24s var(--lux-ease);
}
body .brand-lockup-item:first-child { justify-self: end; }
body .brand-lockup-verella { justify-self: start; }

body .brand-lockup-item .brand-mark {
  width: 34px;
  height: 34px;
  color: var(--lux-paper);
}
body .brand-lockup-item .brand-mark .bm-wave { stroke: var(--lux-rose-soft); }

body .brand-lockup-name {
  font-family: var(--lux-display) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--lux-paper) !important;
  white-space: nowrap;
}

body .brand-lockup-verella img { display: block; width: auto; }
body .brand-lockup-verella .v-mark { height: 30px; }
body .brand-lockup-verella .v-type { height: 15px; }

body .brand-lockup-rule {
  width: 1px;
  align-self: stretch;
  min-height: 30px;
  background: var(--lux-hair-dark-2);
}

body a.brand-lockup-item:hover,
body a.brand-lockup-item:focus-visible { opacity: .78; }

body a.brand-lockup-item:focus-visible {
  outline: 2px solid var(--lux-bronze-lite) !important;
  outline-offset: 5px !important;
  border-radius: 4px;
}

@media (max-width: 520px) {
  body .brand-lockup {
    grid-template-columns: auto;
    justify-items: center;
    padding: 22px 36px;
    border-radius: var(--lux-r-lg);
  }
  body .brand-lockup-item:first-child,
  body .brand-lockup-verella { justify-self: center; }
  body .brand-lockup-rule { display: none; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
body .contact-hero { text-align: center; }

body .contact-hero .brand-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 20px;
  color: var(--lux-paper);
}
body .contact-hero .brand-mark .bm-wave { stroke: var(--lux-rose-soft); }

/* ---- the three invitations ---- */
body .invite-wrap {
  width: min(1080px, 92%);
  margin: 0 auto;
  padding: clamp(54px, 6.2vw, 92px) 0 0;
}

body .invite-intro { text-align: center; margin-bottom: 38px; }

body .invite-intro h2 {
  margin: 10px 0 0 !important;
  font-size: clamp(1.95rem, 4.1vw, 3rem) !important;
  line-height: 1.06 !important;
  color: var(--lux-ink) !important;
}

body .cform-wrap .invite-intro { margin-bottom: 30px; }

body .invite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}

body .invite-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px 30px;
  border: 1px solid var(--lux-hair);
  border-radius: var(--lux-r-lg);
  background: var(--lux-paper);
  box-shadow: var(--lux-sh);
  transition: transform .26s var(--lux-ease), box-shadow .26s var(--lux-ease),
              border-color .26s var(--lux-ease);
}

body .invite-card:hover {
  transform: translateY(-3px);
  border-color: var(--lux-bronze-line);
  box-shadow: var(--lux-sh-lg);
}

body .invite-num {
  font-family: var(--lux-display) !important;
  font-weight: 400 !important;
  font-size: 1.7rem !important;
  line-height: 1 !important;
  color: var(--lux-bronze) !important;
}

body .invite-card h3 {
  margin: 0 !important;
  font-family: var(--lux-body) !important;
  font-size: 1.22rem !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  color: var(--lux-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body .invite-card p {
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.68 !important;
  color: var(--lux-muted) !important;
}

body .invite-for {
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--lux-hair);
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--lux-bronze) !important;
}

/* ---- the email contact block ---- */
body .cform-wrap {
  width: min(760px, 92%);
  margin: 0 auto;
  padding: clamp(54px, 6.2vw, 92px) 0;
}

/* ---- crisis routing: an inbox is never an emergency route ---- */
body .contact-crisis {
  width: min(760px, 92%);
  margin: clamp(34px, 4.4vw, 58px) auto 0;
  padding: 22px 26px;
  border: 1px solid var(--lux-hair-dark) !important;
  border-left: 3px solid var(--lux-rose) !important;
  border-radius: var(--lux-r-lg);
  background: linear-gradient(168deg, var(--lux-ink-2), #171413);
  color: rgba(242, 236, 229, .8) !important;
}

body .contact-crisis strong { color: var(--lux-paper) !important; }
body .contact-crisis p { margin: 0 !important; font-size: .95rem !important; line-height: 1.68 !important; color: inherit !important; }
body .contact-crisis a { color: var(--lux-rose-soft) !important; text-decoration: underline !important; text-underline-offset: 3px; }
body .contact-crisis a:hover { color: var(--lux-paper) !important; }

/* ---- thank-you page ---- */
body .thanks-wrap {
  width: min(680px, 92%);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) 0;
  text-align: center;
}

body .thanks-wrap .brand-mark { width: 52px; height: 52px; margin: 0 auto 24px; }

body .thanks-wrap h1 {
  font-family: var(--lux-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.3rem, 5vw, 3.6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.014em !important;
  color: var(--lux-ink) !important;
  text-transform: none !important;
  margin-bottom: 16px !important;
}

body .thanks-wrap p {
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
  color: var(--lux-muted) !important;
  margin: 0 auto 14px !important;
  max-width: 48ch;
}

body .thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

body .thanks-actions a {
  padding: 13px 26px !important;
  border: 1px solid var(--lux-hair-2) !important;
  border-radius: 100px !important;
  background: var(--lux-paper) !important;
  color: var(--lux-ink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: var(--lux-sh-sm) !important;
  transition: transform .24s var(--lux-ease), background .24s var(--lux-ease) !important;
}

body .thanks-actions a.is-primary {
  background: var(--lux-ink) !important;
  color: var(--lux-paper) !important;
  border-color: transparent !important;
}

body .thanks-actions a:hover { transform: translateY(-2px) !important; }

@media (prefers-reduced-motion: reduce) {
  body .invite-card:hover,
  
  body .thanks-actions a:hover,
  body > nav .nav-logo:hover { transform: none !important; }
}

/* ---- transparent logo: strip the framing the opaque logo.png required ----
   logo.png used to ship a baked-in cream background, so the nav wrapped it in
   a bone chip and the footer/podcast copies wore cream borders. The artwork is
   now transparent cream-on-nothing and every surface it sits on is dark, so
   all of that framing would read as empty boxes floating around the mark. */
body > nav .nav-logo {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body > nav .nav-logo:hover,
body > nav .nav-logo:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body .footer-logo img {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body .nsn-podcast-logo {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---- direct email route under the contact form ----
   Netlify sets the submission recipient in the project's notification
   settings, never from markup, so this is purely a second route for people
   who would rather use their own mail client. The address is printed as
   plain text next to the button because a mailto: does nothing useful for
   anyone on webmail, and they need to be able to copy it. */
body .cform-email {
  width: min(760px, 92%);
  margin: 30px auto 0;
  padding: 28px 26px 0;
  text-align: center;
  border-top: 1px solid var(--lux-hair);
}
body .cform-email-icon {
  display: block; width: 26px; height: 26px;
  margin: 0 auto 13px;
  color: var(--lux-bronze);
}
body .cform-email p {
  margin: 0 0 18px !important;
  font-size: .95rem !important;
  line-height: 1.65 !important;
  color: var(--lux-muted) !important;
}
body a.cform-email-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 30px;
  border: 1px solid var(--lux-hair-2) !important;
  border-radius: 100px !important;
  background: var(--lux-bone) !important;
  color: var(--lux-ink) !important;
  font-family: var(--lux-body) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--lux-sh-sm) !important;
  transition: transform .24s var(--lux-ease), background .24s var(--lux-ease),
              color .24s var(--lux-ease), box-shadow .24s var(--lux-ease),
              border-color .24s var(--lux-ease);
}
body a.cform-email-btn:hover,
body a.cform-email-btn:focus-visible {
  transform: translateY(-2px);
  background: var(--lux-ink) !important;
  border-color: var(--lux-ink) !important;
  color: var(--lux-paper) !important;
  box-shadow: var(--lux-sh-lg) !important;
}
body a.cform-email-btn:focus-visible {
  outline: 2px solid var(--lux-bronze) !important;
  outline-offset: 4px !important;
}
body .cform-email-addr {
  display: block;
  margin-top: 14px;
  font-family: var(--lux-body) !important;
  font-size: .86rem !important;
  letter-spacing: .01em;
  color: var(--lux-muted) !important;
  user-select: all;
  word-break: break-word;
}
@media (prefers-reduced-motion: reduce) {
  body a.cform-email-btn { transition: none; }
  body a.cform-email-btn:hover,
  body a.cform-email-btn:focus-visible { transform: none; }
}

/* ==========================================================================
   SOCIAL BRAND COLOURS
   Each link carries data-social, which sets two custom properties: --soc-l
   for use on the light surfaces (bubbles, rails, Verella block) and --soc-d
   for the dark ones (follow panel, footer). Two values per platform rather
   than one because a colour that reads on cream rarely reads on near-black:
   TikTok cyan is 12.2:1 on ink but under 2:1 on paper, so the light surfaces
   take its magenta instead. Every value below was measured - the light set
   clears 4.5:1 on both paper and bone, the dark set clears 6:1 on the panel
   and footer, and white-on-fill clears 5:1 for the hover states.
   ========================================================================== */
body [data-social="youtube"]   { --soc-l: #d90000; --soc-d: #ff6b6b; }
body [data-social="tiktok"]    { --soc-l: #d1004a; --soc-d: #25f4ee; }
body [data-social="instagram"] { --soc-l: #b82a6e; --soc-d: #f58fb5; }
body [data-social="clips"]     { --soc-l: #a30f0f; --soc-d: #ff9e9e; }
body [data-social="spotify"]   { --soc-l: #096e32; --soc-d: #1ed760; }
body [data-social="web"]       { --soc-l: #a8415a; --soc-d: #e9a9b4; }

/* ---- light pills: cream pill, brand icon, fills with the brand on hover ---- */
body .social-bubble[data-social] svg,
body .brand-links a[data-social] svg {
  color: var(--soc-l) !important;
  width: 17px; height: 17px; flex: none;
}
body .social-bubble[data-social]:hover,
body .social-bubble[data-social]:focus-visible,
body .brand-links a[data-social]:hover,
body .brand-links a[data-social]:focus-visible {
  background: var(--soc-l) !important;
  border-color: var(--soc-l) !important;
  color: #fff !important;
}
body .social-bubble[data-social]:hover svg,
body .social-bubble[data-social]:focus-visible svg,
body .brand-links a[data-social]:hover svg,
body .brand-links a[data-social]:focus-visible svg { color: #fff !important; }
body .social-bubble[data-social]:focus-visible,
body .brand-links a[data-social]:focus-visible {
  outline: 2px solid var(--lux-ink) !important;
  outline-offset: 3px !important;
}
body .brand-links a[data-social] {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}

/* ---- rail circles: icon only, so the brand colour carries it ---- */
body .follow-rail-link[data-social] { color: var(--soc-l) !important; }
body .follow-rail-link[data-social] svg { width: 16px; height: 16px; }
body .follow-rail-link[data-social]:hover,
body .follow-rail-link[data-social]:focus-visible {
  background: var(--soc-l) !important;
  border-color: var(--soc-l) !important;
  color: #fff !important;
}

/* ---- dark surfaces: bright icon at rest, brand fill with near-black on hover ---- */
body .follow-panel-links a[data-social] svg,
body .footer-social a[data-social] svg {
  color: var(--soc-d) !important;
  width: 16px; height: 16px; flex: none;
}
body .footer-social a[data-social] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
body .follow-panel-links a[data-social]:hover,
body .follow-panel-links a[data-social]:focus-visible,
body .footer-social a[data-social]:hover,
body .footer-social a[data-social]:focus-visible {
  background: var(--soc-d) !important;
  border-color: var(--soc-d) !important;
  color: #12100f !important;
}
body .follow-panel-links a[data-social]:hover svg,
body .follow-panel-links a[data-social]:focus-visible svg,
body .footer-social a[data-social]:hover svg,
body .footer-social a[data-social]:focus-visible svg { color: #12100f !important; }

/* ---- home page spotlight cards already carry a per-platform class ----
   Each card gets two values: the brand colour and a tint of it. The tint
   fills the card, the brand colour draws the border and the platform chip,
   and on hover the whole card floods with the brand colour. The tints are
   deep enough to read as distinct boxes against the section's pink wash
   (1.11-1.16:1 on lightness alone, plus a full-strength border) while
   leaving ink on the tint at 12.6-13.3:1, so the handles stay crisp at
   the smaller size. White on each brand colour is 5.3-8.0:1, which is
   what makes the hover flood and the chip safe. */
body .social-spotlight-card.social-youtube   { --soc-l: #d90000; --soc-t: #ffd7d7; }
body .social-spotlight-card.social-tiktok    { --soc-l: #d1004a; --soc-t: #ffd0e1; }
body .social-spotlight-card.social-instagram { --soc-l: #b82a6e; --soc-t: #fcd5e6; }
body .social-spotlight-card.social-clips     { --soc-l: #a30f0f; --soc-t: #ffd6ce; }
body .social-spotlight-card.social-spotify   { --soc-l: #096e32; --soc-t: #c6ead4; }

body .social-spotlight-card[class*="social-"] {
  border: 1px solid var(--soc-l) !important;
  background: var(--soc-t) !important;
}

/* the platform name becomes a solid chip - the loudest colour on the card */
body .social-spotlight-card[class*="social-"] .social-platform {
  padding: 3px 8px 3.5px !important;
  border-radius: 100px !important;
  background: var(--soc-l) !important;
  color: #fff !important;
  font-size: 9px !important;
  letter-spacing: .13em !important;
  line-height: 1.35 !important;
}

body .social-spotlight-card[class*="social-"] .social-action { color: var(--soc-l) !important; }
body .social-spotlight-card[class*="social-"] .social-action b { color: inherit !important; }

/* hover floods the card with its own brand colour */
body .social-spotlight-card[class*="social-"]:hover,
body .social-spotlight-card[class*="social-"]:focus-visible {
  background: var(--soc-l) !important;
  border-color: var(--soc-l) !important;
  box-shadow: var(--lux-sh-lg) !important;
}
body .social-spotlight-card[class*="social-"]:hover strong,
body .social-spotlight-card[class*="social-"]:focus-visible strong,
body .social-spotlight-card[class*="social-"]:hover .social-action,
body .social-spotlight-card[class*="social-"]:focus-visible .social-action {
  color: #fff !important;
}
body .social-spotlight-card[class*="social-"]:hover .social-platform,
body .social-spotlight-card[class*="social-"]:focus-visible .social-platform {
  background: #fff !important;
  color: var(--soc-l) !important;
}
body .social-spotlight-card[class*="social-"]:focus-visible {
  outline: 2px solid var(--lux-ink) !important;
  outline-offset: 3px !important;
}

/* Keep every social link in one consistent black, pink, white and cream
   treatment instead of assigning a different colour to each platform. */
body [data-social="tiktok"],
body [data-social="instagram"],
body [data-social="youtube"],
body [data-social="clips"],
body [data-social="spotify"],
body [data-social="web"] {
  --soc-l: #9d244d;
  --soc-d: #f2a0b0;
}

body .social-spotlight-card.social-tiktok,
body .social-spotlight-card.social-instagram,
body .social-spotlight-card.social-youtube,
body .social-spotlight-card.social-clips,
body .social-spotlight-card.social-spotify {
  --soc-l: #9d244d;
  --soc-t: #f8dce6;
}

/* ==========================================================================
   TITLE LABELS IN PINK
   The small-caps pills and eyebrows above headings were bronze, which reads
   as mustard next to the rose in the rest of the palette. Two pinks are
   needed, not one: the brand rose #c98f98 is only 2.55:1 on paper, so at
   10.5px it would fail badly on the light surfaces. Light surfaces take a
   deeper pink (5.96:1 paper / 5.33:1 bone) and the dark heroes and panels
   take a bright one (8.32:1 panel / 8.59:1 ink).
   ========================================================================== */
:root {
  --lux-pink:        #b02e52;
  --lux-pink-lite:   #f2a0b0;
  --lux-pink-line:   rgba(176, 46, 82, .32);
  --lux-pink-line-d: rgba(242, 160, 176, .38);
}
body .nsn-podcast-kicker,
body .name-story-kicker,
body .podcast-topics-label,
body .fashion-mission-kicker,
body .social-bubbles-label,
body .founder-inner .label,
body .guide-kicker,
body .latest-podcast-meta > span { color: var(--lux-pink) !important; }

body .nsn-podcast-kicker { border-color: var(--lux-pink-line) !important; }

body .hero:not(.home-hero) .hero-eyebrow,
body .relief-hero .hero-eyebrow,
body .sup-hero .sup-hero-eyebrow,
body .sup-hero .hero-eyebrow,
body .policy-hero .hero-eyebrow {
  color: var(--lux-pink-lite) !important;
  border-color: var(--lux-pink-line-d) !important;
}
body .home-hero .hero-eyebrow,
body .home-hero .brand-slogan,
body .mission-story .mission-card .mission-kicker,
body .follow-panel-kicker,
body .sos-card .sos-name { color: var(--lux-pink-lite) !important; }

/* the card foot-tags sit next to these kickers on the same pages, so they
   move across too - left bronze they were the only mustard still showing */
body .invite-for { color: var(--lux-pink) !important; }

/* ---- the email block is now the contact route, not a footnote to a form ---- */
body .cform-email {
  width: min(620px, 92%);
  margin: 4px auto 0;
  padding: 34px 30px 36px;
  border: 1px solid var(--lux-hair) !important;
  border-top: 3px solid var(--lux-pink) !important;
  border-radius: var(--lux-r-lg);
  background: var(--lux-paper);
  box-shadow: var(--lux-sh);
}
body .cform-email-icon { color: var(--lux-pink) !important; width: 30px; height: 30px; margin-bottom: 15px; }
body .cform-email p { max-width: 46ch; margin: 0 auto 22px !important; }
body .cform-email-addr { margin-top: 16px; font-size: .9rem !important; }

/* ==========================================================================
   BUBBLY / BRIGHT PASSES
   Four separate asks, grouped because they all trade the quiet editorial
   treatment for something louder. Every colour here was measured first;
   the numbers in each comment are the actual contrast ratios.
   ========================================================================== */

/* ---- 1. the follow rail, on every page it appears ----
   Was a hairline paper strip with muted grey copy. Now a bright three-stop
   gradient in a rounded pill with a chunky pink edge and a dropped colour
   shadow. The copy carries the loudness: bigger, bold, deep pink at
   6.9-8.0:1 across all three gradient stops. Icon circles go white so the
   platform colours stay at 5.3-8.0:1 on top of the gradient. */
body .follow-rail {
  border: 2px solid #e4577f !important;
  border-left: 2px solid #e4577f !important;
  border-radius: 28px !important;
  background: linear-gradient(104deg, #ffd9e6 0%, #ffe6d2 54%, #fff3d6 100%) !important;
  box-shadow: 0 9px 0 -3px rgba(228, 87, 127, .26), var(--lux-sh) !important;
  padding: 18px 24px !important;
}

body .follow-rail-copy {
  font-size: 1.04rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -.005em !important;
  color: #8e1b3f !important;
}

/* a little bubble before the line, so it reads as a shout not a caption */
body .follow-rail-copy::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: #e4577f;
  vertical-align: .04em;
}

body .follow-rail-link {
  width: 38px !important;
  height: 38px !important;
  border: 2px solid #fff !important;
  background: #fff !important;
  box-shadow: 0 3px 8px -3px rgba(142, 27, 63, .45) !important;
}

/* ---- 2. teenager guides: "A few things that are true" ----
   These were meant to be pink circles, but the rule that drew them sat at
   specificity (0,1,0) and lost to the generic card rule at (0,1,1), so they
   had flattened into plain paper rectangles. Restored as circles at (0,2,1)
   and given a colour each. Text is #4a1230 on every gradient stop, worst
   case 6.98:1 on the deepest lilac. */
body .truths h2 {
  margin-bottom: 44px !important;
  font-family: var(--lux-body) !important;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.022em !important;
  color: #b02e52 !important;
}

body .truths-inner .truth-grid {
  gap: 30px 26px !important;
}

body .truths-inner .truth-card {
  border: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  min-height: 300px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 58px 46px !important;
  box-shadow: 0 16px 30px -18px rgba(110, 40, 80, .42) !important;
}

body .truths-inner .truth-card:nth-child(1) { background: linear-gradient(158deg, #ffd3e7, #f9a8cd) !important; }
body .truths-inner .truth-card:nth-child(2) { background: linear-gradient(158deg, #ffe0c4, #ffbe86) !important; }
body .truths-inner .truth-card:nth-child(3) { background: linear-gradient(158deg, #e6dbff, #bba6f7) !important; }

body .truths-inner .truth-card h3 {
  margin-bottom: 10px !important;
  max-width: 225px;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  color: #4a1230 !important;
}

body .truths-inner .truth-card p {
  max-width: 245px;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #4a1230 !important;
}

body .truths-inner .truth-card:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 22px 38px -18px rgba(110, 40, 80, .5) !important;
}

/* Between 801px and 1060px a 3-up grid puts the columns under 300px, and a
   300px min-height on a 250px column gives an ellipse rather than a circle.
   Two columns keeps every circle at 347px or wider. */
@media (max-width: 1060px) and (min-width: 801px) {
  body .truths-inner .truth-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 800px) {
  body .truths-inner .truth-card {
    width: min(100%, 360px);
    margin: 0 auto;
    padding: 56px 44px !important;
  }
}

/* Centre complete support groups, including incomplete final card rows. */
body .sup-wrap,
body .sup-group {
  margin-right: auto !important;
  margin-left: auto !important;
}
body .sup-group-head {
  flex-direction: column;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}
body .sup-group-head > div:last-child,
body .sup-group-head h2,
body .sup-group-head p {
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}
body .sup-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: stretch;
  gap: 18px;
}
body .sup-grid > .sup-card {
  flex: 0 1 calc((100% - 36px) / 3);
  width: calc((100% - 36px) / 3);
  min-width: 260px;
}
body .sup-note {
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

/* Centre cards within every other shared grid track. */
body .resource-grid,
body .topic-grid,
body .truth-grid,
body .relief-grid,
body .strategy-grid,
body .life-grid,
body .bw-grid,
body .ther-grid,
body .invite-grid {
  justify-content: center !important;
  justify-items: center !important;
}
body .resource-grid > *,
body .topic-grid > *,
body .truth-grid > *,
body .relief-grid > *,
body .strategy-grid > *,
body .life-grid > *,
body .bw-grid > *,
body .ther-grid > *,
body .invite-grid > * {
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (max-width: 900px) {
  body .sup-grid > .sup-card {
    flex-basis: calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
  }
}

@media (max-width: 600px) {
  body .sup-grid > .sup-card {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }
}

/* ---- 3. topic cards: all six get the pink outline ----
   Only two of the six had one. rebrand.css draws it via
   .topic-card:nth-child(3n) at specificity (0,2,0), which outranks the
   generic body .topic-card at (0,1,1) - so cards 3 and 6 kept their pink
   border while the other four were overridden to a grey hairline, and
   .topic-card:nth-child(3n+2) tinted two more. This lands at (0,2,1) so all
   six match. #d6547c is the lightest pink that still clears 3:1 as an edge
   on both the paper card and the bone page (3.69:1 / 3.30:1). */
body .topic-grid .topic-card {
  border: 2px solid #d6547c !important;
  border-radius: 14px !important;
  background: var(--lux-paper) !important;
}

body .topic-grid .topic-card:hover {
  border-color: #b02e52 !important;
  box-shadow: var(--lux-sh-lg) !important;
}

/* ---- 4. "Making friends as an adult" becomes the panel's main title ----
   It was a 1rem kicker above the real h2. It is now the h2 itself, with the
   old heading demoted to a lead line underneath. Bold means Cabin, not the
   display serif, which ships at 400 only. #d1004a is 5.09:1 on the panel. */
body .friendship-panel h2.friendship-title {
  margin-bottom: 10px !important;
  font-family: var(--lux-body) !important;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -.028em !important;
  color: #d1004a !important;
  text-transform: none !important;
}

body .friendship-inner p.friendship-sub {
  margin-bottom: 22px !important;
  max-width: 600px;
  font-size: clamp(1.1rem, 2vw, 1.45rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--lux-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  body .truths-inner .truth-card:hover { transform: none !important; }
}

/* ============================================================
   SECTION RHYTHM - EVERY PAGE EXCEPT HOME
   The stacked section padding had compounded: premium.css put
   clamp(54px, 6.2vw, 92px) on top and bottom of most content
   sections, so two adjacent sections opened a 178px void at
   desktop with nothing in it. podcast-wow's 58px group left
   uneven 147px seams where the two systems met.

   Everything below is scoped with body:not(.home) - (0,2,1),
   which clears both the (0,1,1) premium rules and the (0,1,0)
   rebrand/wow ones - so the home page keeps its own looser,
   more magazine-like spacing untouched.
   ============================================================ */

body:not(.home) .paths,
body:not(.home) .mission,
body:not(.home) .resources,
body:not(.home) .video-section,
body:not(.home) .strategies,
body:not(.home) .breathwork,
body:not(.home) .lifestyle,
body:not(.home) .relief-section,
body:not(.home) .empower,
body:not(.home) .friendship-panel,
body:not(.home) .guides-intro,
body:not(.home) .hub,
body:not(.home) .topics,
body:not(.home) .truths,
body:not(.home) .accordion-section {
  padding-top: clamp(32px, 3.4vw, 50px) !important;
  padding-bottom: clamp(32px, 3.4vw, 50px) !important;
}

/* .strategies, .breathwork and .lifestyle each wrap a .relief-section.
   .strategies was in the padding rule too, so it paid twice - 178px of
   empty space before its heading. .breathwork and .lifestyle had no
   padding of their own and leaned entirely on the inner div, so they are
   added to the group above before the inner one is zeroed here. Either
   way the outer band now owns the spacing and the inner div owns none. */
body:not(.home) .strategies > .relief-section,
body:not(.home) .breathwork > .relief-section,
body:not(.home) .lifestyle > .relief-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The guide index closes the women's and teen pages. Its own bottom
   padding, the nav's 72px bottom margin and a 50px bottom padding on
   the nav stacked to ~210px between the last pill and the first guide. */
body:not(.home) .guides-intro { padding-bottom: clamp(20px, 2.2vw, 32px) !important; }
body:not(.home) .guides-intro nav { margin-bottom: clamp(18px, 2vw, 28px) !important; }
body:not(.home) .guides-intro nav.guide-chooser {
  box-sizing: border-box;
  padding: 18px 20px 22px !important;
  border: 2px solid #d98f9d !important;
  border-radius: 24px !important;
  background: #f2c6cf !important;
}

body .guide-category-nav {
  box-sizing: border-box;
  padding: 15px 5% 19px !important;
  row-gap: 10px !important;
  border-color: #d98f9d !important;
  background: #f2c6cf !important;
}

@media (max-width: 700px) {
  body:not(.home) .guides-intro nav.guide-chooser { padding: 14px 14px 18px !important; }
  body .guide-category-nav { padding-bottom: 17px !important; }
}

/* Section headings carried a 50px rule below them, which read as part
   of the same gap once the section padding came down. */
body:not(.home) .topics h2,
body:not(.home) .truths h2 { margin-bottom: 32px !important; }

@media (max-width: 800px) {
  body:not(.home) .topics h2,
  body:not(.home) .truths h2 { margin-bottom: 26px !important; }
}

/* ============================================================
   "ENTER THIS SPACE" AS A BUBBLE BUTTON (home page only)
   .path-arrow was a bare uppercase label with a -> after it, so
   the two path cards had no visible affordance. It becomes a
   raised pill instead.

   Scoped body .path-card .path-arrow - (0,2,1) - to clear
   rebrand.css's .path-card .path-arrow at (0,2,0) !important,
   which owns the colour, weight and tracking.

   #8E1B3F is the one pink-family fill that clears 3:1 against
   BOTH cards: the teen card is cream #F3E9E2 (7.38:1) and the
   women card is dusty pink #D98F9D (3.52:1). White on it is
   8.83:1, comfortable at this size.
   ============================================================ */

body .path-card .path-arrow {
  /* the card is a flex column with the default align-items:stretch,
     so without this the pill would span the full card width */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 13px 24px 13px 26px !important;
  border: 0 !important;
  border-radius: 100px !important;
  background: #8e1b3f !important;
  color: #fff !important;
  font-family: var(--lux-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 4px 0 -1px rgba(74, 18, 48, .3),
              0 10px 18px -9px rgba(74, 18, 48, .55) !important;
  transition: transform .26s var(--lux-ease), box-shadow .26s var(--lux-ease),
              background .26s var(--lux-ease) !important;
}

/* the arrow already slides on card hover; the pill now rises with it.
   The fill is deliberately unchanged so contrast never drops on hover. */
body .path-card:hover .path-arrow,
body .path-card:focus-visible .path-arrow {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 -1px rgba(74, 18, 48, .32),
              0 16px 24px -10px rgba(74, 18, 48, .6) !important;
}

body .path-card .path-arrow::after {
  content: "\2192";
  font-weight: 700;
  transition: transform .26s var(--lux-ease);
}

@media (prefers-reduced-motion: reduce) {
  body .path-card:hover .path-arrow,
  body .path-card:focus-visible .path-arrow { transform: none !important; }
}

/* Match the adult friendship heading to the other editorial page titles. */
body .friendship-panel h2.friendship-title {
  color: var(--lux-ink) !important;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* Keep every part of the guide activity visually centred, including its
   revealed prompts and their numbered markers. */
body .guide-mini-action__task { text-align: center; }
body .guide-mini-action__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  text-align: center;
}
body .guide-mini-action__list li::before {
  position: static;
  flex: 0 0 27px;
}

/* Match the Resources quick-help route to the page's refreshed brand system. */
body.resources-page .quick-route {
  width: min(1000px, calc(100% - 40px));
  padding: clamp(30px, 5vw, 48px) !important;
  border: 2px solid #d6547c !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, #fffaf7, #fbe7f1 72%, #f3eaf8) !important;
  color: var(--lux-ink) !important;
  box-shadow: 7px 7px 0 rgba(214, 84, 124, .16) !important;
}
body.resources-page .quick-route h2 {
  margin-bottom: 10px;
  color: var(--lux-ink) !important;
  font-family: var(--lux-display) !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
body.resources-page .quick-route p {
  max-width: 650px;
  color: var(--lux-muted) !important;
  font-family: var(--lux-body) !important;
  font-size: 1rem;
  line-height: 1.7;
}
body.resources-page .quick-route a {
  padding: 13px 20px !important;
  border: 2px solid #9d244d !important;
  border-radius: 999px !important;
  background: #9d244d !important;
  color: #fff !important;
  font-family: var(--lux-body) !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.resources-page .quick-route a:hover,
body.resources-page .quick-route a:focus-visible {
  background: #6e4aa0 !important;
  border-color: #6e4aa0 !important;
  color: #fff !important;
}

/* Keep the SOS Toolkit opening message in the current black, pink, cream
   and white brand palette, without the older bronze accent. */
body .relief-hero {
  background:
    radial-gradient(110% 90% at 82% 4%, rgba(214, 84, 124, .24), transparent 58%),
    radial-gradient(80% 65% at 8% 104%, rgba(201, 143, 152, .16), transparent 62%),
    linear-gradient(168deg, var(--lux-ink-2), #161312) !important;
  border-bottom-color: rgba(214, 84, 124, .42) !important;
}
body .relief-hero .hero-eyebrow {
  border-color: rgba(242, 160, 176, .42) !important;
  color: #f2a0b0 !important;
}
body .relief-hero h1 { color: var(--lux-paper) !important; }
body .relief-hero h1 em { color: #f2a0b0 !important; }

/* Centre the Support page's urgent-help introduction above its helplines. */
body .sup-emergency > h2,
body .sup-emergency > .lead {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body .sup-emergency > .lead { max-width: 680px; }

/* Shared narrow-screen safeguards for every fully styled public page. */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
body img, body video, body iframe, body svg { max-width: 100%; }
body input, body textarea, body select, body button { max-width: 100%; }
body p, body li, body a, body h1, body h2, body h3, body h4 {
  overflow-wrap: break-word;
}
body .footer-fine {
  font-size: clamp(.78rem, .74rem + .15vw, .84rem) !important;
  line-height: 1.65 !important;
}

@media (max-width: 800px) {
  html { background: var(--lux-bone) !important; }

  body > nav .nav-links {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body > nav .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* Page names in the phone menu, large enough to read at a glance. */
    font-size: 20px !important;
    letter-spacing: .02em !important;
  }
  body > nav .nav-links .nav-cta {
    font-size: 14px !important;
    padding: 12px 24px !important;
  }
  body button,
  body [role="button"],
  body summary {
    min-height: 44px;
  }
  body .hero h1,
  body .relief-hero h1,
  body .sup-hero h1,
  body .policy-hero h1 {
    overflow-wrap: anywhere;
  }

  /* Keep the home-page interview topics in an intentional mobile grid. */
  body.home .podcast-topics {
    width: 100%;
    padding: 24px 16px !important;
  }
  body.home .podcast-topic-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }
  body.home .podcast-topic-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 9px 8px !important;
    line-height: 1.3;
    text-align: center;
  }

  /* Make every footer fit cleanly inside narrow phone viewports. */
  body footer {
    box-sizing: border-box;
    width: 100%;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  body .footer-logo,
  body .footer-logo img {
    max-width: 100%;
  }
  body .footer-logo img {
    width: min(280px, calc(100% - 18px)) !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  body .footer-links,
  body .footer-social {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100%;
    max-width: 100%;
  }
  body .footer-links {
    gap: 10px 18px !important;
  }
  body .footer-social {
    gap: 9px !important;
  }
  body .footer-social a {
    max-width: 100%;
    min-height: 40px;
    padding: 9px 12px !important;
  }
}

@media (max-width: 360px) {
  body.home .podcast-topic-list { grid-template-columns: 1fr; }
}

/* Consistent pink frames on the therapist route and direct email card. */
body.therapist-page .ther-card,
body.therapist-page .sup-card {
  border: 2px solid #d6547c !important;
}
body.therapist-page .ther-card:hover,
body.therapist-page .sup-card:hover {
  border-color: #9d244d !important;
}
body .cform-email {
  border: 2px solid #d6547c !important;
  border-top: 3px solid #9d244d !important;
}

/* Centre the copyright note consistently and keep it inside phone screens. */
body footer .footer-fine {
  box-sizing: border-box;
  display: block;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0;
  padding-left: 0;
  text-align: center !important;
  overflow-wrap: break-word;
}

@media (max-width: 600px) {
  body footer .footer-fine {
    width: 100% !important;
    max-width: 34rem !important;
    padding-right: 4px;
    padding-left: 4px;
    font-size: .8rem !important;
    line-height: 1.65 !important;
  }
}

/* Remove the dark root edge that can show above the page during overscroll. */
html {
  background: var(--lux-bone) !important;
  border-top: 0 !important;
}
body {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* Bring every episode follow rail into the same cream and pink palette. */
body .follow-rail {
  border: 2px solid #d6547c !important;
  border-left: 2px solid #d6547c !important;
  background: var(--lux-paper) !important;
  box-shadow: 0 8px 0 -4px rgba(157, 36, 77, .18), var(--lux-sh) !important;
}
body .follow-rail-copy {
  color: var(--lux-ink) !important;
}
body .follow-rail-copy::before {
  background: #9d244d !important;
}
body .follow-rail-link,
body .follow-rail-link[data-social] {
  border: 2px solid #d6547c !important;
  background: #fffaf7 !important;
  color: #9d244d !important;
  box-shadow: none !important;
}
body .follow-rail-link[data-social] svg {
  color: #9d244d !important;
}
body .follow-rail-link:hover,
body .follow-rail-link:focus-visible,
body .follow-rail-link[data-social]:hover,
body .follow-rail-link[data-social]:focus-visible {
  border-color: #9d244d !important;
  background: #9d244d !important;
  color: #fff !important;
}
body .follow-rail-link:hover svg,
body .follow-rail-link:focus-visible svg,
body .follow-rail-link[data-social]:hover svg,
body .follow-rail-link[data-social]:focus-visible svg {
  color: #fff !important;
}
body .social-bubble[data-social],
body .brand-links a[data-social] {
  border-color: #d6547c !important;
  background: #fffaf7 !important;
  color: var(--lux-ink) !important;
}
body .social-bubble[data-social] svg,
body .brand-links a[data-social] svg {
  color: #9d244d !important;
}

/* Spoken meditation with locally generated ambient tones. */
body .guided-meditation {
  box-sizing: border-box;
  width: min(860px, calc(100% - 36px));
  margin: 30px auto 44px;
  padding: clamp(22px, 3.5vw, 34px);
  display: grid;
  grid-template-columns: minmax(140px, .48fr) minmax(0, 1.52fr);
  align-items: center;
  gap: clamp(20px, 3.5vw, 34px);
  border: 2px solid #d98f9d;
  border-radius: 28px;
  background: linear-gradient(145deg, #faf5f1, #f3e9e2);
  box-shadow: 8px 8px 0 rgba(217, 143, 157, .14);
}
body .guided-meditation__visual {
  position: relative;
  width: min(190px, 100%);
  aspect-ratio: 1;
  margin: auto;
  display: grid;
  place-items: center;
}
body .guided-meditation__visual span {
  position: absolute;
  border: 1px solid rgba(217, 143, 157, .32);
  border-radius: 50%;
}
body .guided-meditation__visual span:nth-child(1) { inset: 0; background: rgba(250, 245, 241, .72); }
body .guided-meditation__visual span:nth-child(2) { inset: 19%; background: rgba(217, 143, 157, .16); }
body .guided-meditation__visual span:nth-child(3) { inset: 38%; background: #d98f9d; box-shadow: 0 12px 30px rgba(217, 143, 157, .22); }
body .guided-meditation.is-playing .guided-meditation__visual span:nth-child(2) { animation: meditation-pulse 8s ease-in-out infinite; }
body .guided-meditation__content { min-width: 0; text-align: center; }
body .guided-meditation__eyebrow { color: #d98f9d; font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
body .guided-meditation h2 { margin: 6px 0 9px; font-family: var(--lux-display) !important; font-size: clamp(1.75rem, 3.2vw, 2.55rem); font-weight: 400; line-height: 1.05; }
body .guided-meditation__content > p { max-width: 560px; margin: 0 auto 16px; color: var(--lux-muted); line-height: 1.6; }
body .guided-meditation__lengths { margin: 0; padding: 0; border: 0; text-align: center; }
body .guided-meditation__lengths legend { width: 100%; margin-bottom: 9px; font-weight: 800; }
body .guided-meditation button { min-height: 44px; padding: 9px 16px; border: 2px solid #d98f9d; border-radius: 999px; background: #faf5f1; color: #1c1c1c; font: inherit; font-weight: 800; cursor: pointer; }
body .guided-meditation__lengths button { margin: 3px; }
body .guided-meditation__lengths button[aria-pressed="true"], body .guided-meditation__play { background: #d98f9d !important; border-color: #d98f9d !important; color: #1c1c1c !important; }
body .guided-meditation__now { margin: 16px auto 13px; padding: 13px 16px; border-radius: 17px; background: rgba(255,255,255,.76); }
body .guided-meditation__time { color: #c9347e; font-size: .82rem; font-weight: 800; }
body .guided-meditation__prompt { min-height: 3em; margin: 5px auto 9px; max-width: 540px; font-size: 1rem; font-weight: 700; line-height: 1.5; }
body .guided-meditation__progress { height: 6px; overflow: hidden; border-radius: 10px; background: #f2c6cf; }
body .guided-meditation__progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: #d98f9d; transform: scaleX(0); transform-origin: left; }
body .guided-meditation__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body .guided-meditation button:disabled { cursor: default; opacity: .48; }
body .guided-meditation__sound[aria-pressed="false"] { border-color: var(--lux-hair-2); background: transparent; color: var(--lux-muted); }
body .guided-meditation__support { margin: 15px auto 0 !important; color: #7a2450 !important; font-weight: 700; }
body .guided-meditation__transcript { max-width: 600px; margin: 14px auto 0; padding-top: 11px; border-top: 1px solid rgba(217, 143, 157,.22); }
body .guided-meditation__transcript summary { min-height: 44px; display: inline-flex; align-items: center; color: #7a2450; font-weight: 800; cursor: pointer; }
body .guided-meditation__transcript ol { margin: 12px auto 0; padding-left: 1.4rem; text-align: left; }
body .guided-meditation__transcript li { margin-bottom: 8px; line-height: 1.6; }
@keyframes meditation-pulse { 0%,100% { transform: scale(.88); opacity: .72; } 50% { transform: scale(1.12); opacity: 1; } }
@media (max-width: 720px) { body .guided-meditation { grid-template-columns: 1fr; width: min(620px, calc(100% - 24px)); padding: 22px 18px; gap: 16px; } body .guided-meditation__visual { width: 112px; } }
@media (max-width: 600px) { body .marquee-bar { padding: 8px 10px !important; } body .marquee-inner { gap: 32px; } body .marquee-inner span { font-size: .61rem !important; letter-spacing: .07em !important; } }
@media (max-width: 480px) { body .guided-meditation__controls { display: grid; } body .guided-meditation__controls button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { body .guided-meditation.is-playing .guided-meditation__visual span:nth-child(2) { animation: none; } }

/* Consistent centred alignment for support cards and matching site boxes. */
body .sos-card,
body .sup-card,
body .ther-card,
body .ther-badge,
body .resource-card,
body .topic-card,
body .truth-card,
body .relief-card,
body .strategy-card,
body .life-card,
body .bw-card,
body .rec-card,
body .invite-card,
body .path-card,
body .research-note,
body .why-box,
body .try-this,
body .info-callout,
body .say-box {
  text-align: center !important;
}

body .sos-card p,
body .sup-card p,
body .ther-card p,
body .resource-card p,
body .topic-card p,
body .relief-card p,
body .strategy-card p,
body .life-card p,
body .bw-card p,
body .rec-card p,
body .invite-card p,
body .path-card p,
body .research-note p {
  margin-right: auto !important;
  margin-left: auto !important;
}

body .sup-card .sup-contact,
body .resource-card .resource-link,
body .relief-card .go,
body .rec-card .rec-link,
body .invite-card .invite-for {
  justify-content: center !important;
  align-self: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.resources-page .hub .hub-grid .hub-card {
  text-align: center !important;
}
body.resources-page .hub .hub-grid .hub-link {
  justify-self: center !important;
  align-self: end;
}

/* Lists keep a natural reading edge inside their otherwise centred boxes. */
body .research-note ul,
body .research-note ol,
body .why-box ul,
body .try-this ul,
body .info-callout ul,
body .ther-check ul {
  display: inline-block;
  max-width: 100%;
  text-align: left !important;
}

@media (max-width: 600px) {
  body .sos-card,
  body .sup-card,
  body .ther-card,
  body .resource-card,
  body .topic-card,
  body .relief-card,
  body .strategy-card,
  body .life-card,
  body .bw-card,
  body .rec-card,
  body .invite-card,
  body .research-note {
    width: 100%;
    max-width: 100%;
  }
}

/* Final site-wide colour lock so every card and guide uses the same brand palette. */
body .resource-card,
body .topic-card,
body .truth-card,
body .rec-card,
body .ther-card,
body .sup-card,
body .relief-card,
body .strategy-card,
body .life-card,
body .bw-card,
body .invite-card,
body .path-card,
body .reg-card,
body .mission-card,
body .social-spotlight-card,
body .hub-card,
body .sos-card,
body .accordion-item,
body .guide-drop,
body .guide-full,
body .deep-activity,
body .feeling-check,
body .follow-panel-inner,
body .disclaimer-box,
body .research-note,
body .why-box,
body .try-this,
body .info-callout,
body .say-box {
  border: 2px solid #d98f9d !important;
  background: linear-gradient(145deg, #faf5f1, #f3e9e2) !important;
  color: #1c1c1c !important;
  box-shadow: 7px 7px 0 rgba(217, 143, 157, .13) !important;
}

body .friendship-item,
body .relate-item,
body .res-item,
body .say-line,
body .research-example,
body .tool-item,
body .deep-activity__prompt,
body .guided-meditation__now {
  border-color: rgba(217, 143, 157, .42) !important;
  background: #faf5f1 !important;
  color: #1c1c1c !important;
}

body .accordion-trigger,
body .guide-head,
body .accordion-item.open > .accordion-trigger {
  border-color: #d98f9d !important;
  background: #f2c6cf !important;
  color: #1c1c1c !important;
}

body .sos-card *,
body .accordion-trigger *,
body .guide-head * {
  color: #1c1c1c !important;
}

body .hub-card-image,
body .guide-image,
body .resource-card img,
body .social-spotlight-card img {
  border-color: #d98f9d !important;
}

body .resource-card:hover,
body .topic-card:hover,
body .truth-card:hover,
body .rec-card:hover,
body .ther-card:hover,
body .sup-card:hover,
body .relief-card:hover,
body .strategy-card:hover,
body .life-card:hover,
body .bw-card:hover,
body .invite-card:hover,
body .path-card:hover,
body .hub-card:hover {
  border-color: #d98f9d !important;
  box-shadow: 9px 9px 0 rgba(217, 143, 157, .2) !important;
}

body .follow-panel-inner,
body .follow-panel-inner h2,
body .follow-panel-inner p,
body .follow-panel-inner .follow-panel-kicker {
  color: #1c1c1c !important;
}

body .follow-panel-inner .brand-mark,
body .follow-panel-inner .brand-mark * {
  color: #d98f9d !important;
  stroke: #d98f9d !important;
}

body .follow-panel-links a,
body .follow-panel-links a span,
body .follow-panel-links a svg {
  border-color: #d98f9d !important;
  background: #f2c6cf !important;
  color: #1c1c1c !important;
}

/* Mobile: the round menu button was pinned to a fixed viewport offset, left
   over from when the nav bar was invisible on small screens. The bar is a
   solid one again, so put the button back in the bar's flex row and let
   align-items centre it, instead of floating slightly above and inside it. */
@media (max-width: 820px) {
  body > nav .nav-toggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
    z-index: 1001 !important;
  }
}

/* --------------------------------------------------------------------------
   Home hero: the masthead now says plainly what the site is, then offers the
   two things people arrive wanting (the podcast, or support) and a short list
   of what is here. Styled for the dark hero panel: a paper-on-ink primary
   button, a hairline ghost button beside it, and a two-column point list.
   -------------------------------------------------------------------------- */

body .home-hero .hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: clamp(30px, 3.6vw, 46px) 0 38px;
  animation: lux-rise .5s var(--lux-ease) both;
  animation-delay: .18s;
}

body .home-hero .hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 17px 38px;
  border: 2px solid transparent;
  border-radius: 100px;
  font-family: var(--lux-body) !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .24s var(--lux-ease), background .24s var(--lux-ease),
              color .24s var(--lux-ease), border-color .24s var(--lux-ease),
              box-shadow .24s var(--lux-ease);
}

/* Warm rose fill with ink lettering: the loudest thing on the dark hero,
   and dark text keeps it readable where white on rose would not be. */
body .home-hero .hero-action-primary {
  background: linear-gradient(135deg, #eda4ba, #d98f9d 55%, #c97c8a);
  border-color: rgba(252, 249, 246, .78);
  color: var(--lux-ink) !important;
  box-shadow: 0 16px 34px -14px rgba(217, 143, 157, .8),
              0 2px 6px rgba(29, 26, 25, .22);
}

body .home-hero .hero-action-ghost {
  border-color: rgba(243, 233, 226, .7);
  background: rgba(243, 233, 226, .08);
  color: var(--lux-paper) !important;
  box-shadow: 0 12px 26px -18px rgba(29, 26, 25, .8);
}

body .home-hero .hero-action-primary:hover,
body .home-hero .hero-action-primary:focus-visible {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #f3b6c7, #eda4ba 55%, #d98f9d);
  box-shadow: 0 20px 40px -14px rgba(217, 143, 157, .92),
              0 2px 6px rgba(29, 26, 25, .22);
}

body .home-hero .hero-action-ghost:hover,
body .home-hero .hero-action-ghost:focus-visible {
  transform: translateY(-3px);
  border-color: var(--lux-paper);
  background: var(--lux-paper);
  color: var(--lux-ink) !important;
}

body .home-hero .hero-points {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0 0;
  border-top: 1px solid var(--lux-hair-dark);
  list-style: none;
  text-align: center;
  animation: lux-rise .5s var(--lux-ease) both;
  animation-delay: .24s;
}

body .home-hero .hero-points li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(242, 236, 229, .78);
  font-family: var(--lux-body) !important;
  font-size: .95rem;
  line-height: 1.5;
}

body .home-hero .hero-point-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1.45;
}

@media (max-width: 700px) {
  body .home-hero .hero-points {
    flex-direction: column;
    align-items: center;
  }
  body .home-hero .hero-actions .hero-action {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .home-hero .hero-actions,
  body .home-hero .hero-points {
    animation: none !important;
  }
  body .home-hero .hero-action:hover,
  body .home-hero .hero-action:focus-visible {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Guide index sections. The women's and teen guide lists were one long run
   of accordions, so nothing told a reader where the wellbeing guides ended
   and the reflective practices began. Each band now opens with a heading
   and a line on what it covers, and the "Jump to a guide" chooser groups
   its pills under the same three labels.
   -------------------------------------------------------------------------- */

body .guide-band {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(38px, 4.4vw, 62px) 5% clamp(20px, 2.2vw, 28px);
  text-align: center;
}

body .guide-band + .guide-band,
body .guide-band:first-of-type {
  padding-top: clamp(20px, 2.4vw, 32px);
}

body .guide-band-kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--lux-bronze) !important;
  font-family: var(--lux-body) !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body .guide-band-title {
  margin: 0 auto 12px !important;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem) !important;
  line-height: 1.12 !important;
}

body .guide-band-sub {
  max-width: 620px;
  margin: 0 auto !important;
  color: var(--lux-muted) !important;
  font-family: var(--lux-body) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

/* the nav is sticky, so anchored jumps need room to clear it */
body .guide-band,
body .guide-drop {
  scroll-margin-top: 96px;
}

body .guide-band::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 22px auto 0;
  background: var(--lux-bronze-line);
}

/* the chooser: pills grouped under their section label */
body .guide-chooser-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

body .guide-chooser-label {
  color: #7a3f52 !important;
  font-family: var(--lux-body) !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

/* the section labels double as jump links to that run of guides */
body a.guide-chooser-label:hover,
body a.guide-chooser-label:focus-visible {
  color: var(--lux-bronze) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .guide-chooser-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 700px) {
  body .guide-chooser-group {
    align-items: stretch;
    gap: 8px;
  }
  body .guide-chooser-label { text-align: left; }
  body .guide-chooser-pills {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
  }
  body .guide-band { padding-top: clamp(26px, 6vw, 38px); }
}

/* ============================================================
   CLICK CUES
   Every interactive tool carries a small pointing badge so it
   is obvious which parts of it are waiting to be pressed.
   ============================================================ */
body .click-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 11px;
  padding: 7px 15px;
  border: 2px solid #9d244d;
  border-radius: 999px;
  background: #fff;
  color: #9d244d !important;
  font-family: var(--lux-body) !important;
  font-size: .73rem !important;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.35 !important;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(157, 36, 77, .15);
}

body .click-cue[hidden] { display: none !important; }

body .click-cue::before {
  content: "👇";
  font-size: 1rem;
  letter-spacing: 0;
  animation: click-cue-nudge 1.9s ease-in-out infinite;
}

/* Keep the guide picker badge stacked over its own button. */
body .attention-reset__pick-wrap { display: grid; justify-items: center; }

/* Tools that read left to right keep the badge above their own button. */
body .click-cue--start { margin-left: 0; }

/* The grounding journey pins its button to the foot of the card,
   so the badge needs to travel down with it. */
body .grounding-journey .click-cue { margin-top: auto; }
body .grounding-journey .click-cue + .deep-activity__start { margin-top: 0; }

/* Guide and topic lists get one badge above their first card. */
body .guide-band .click-cue { margin: 18px auto 0; }
body .accordion-section > .click-cue { margin: 0 auto 18px; }

@keyframes click-cue-nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

@media (max-width: 560px) {
  body .click-cue--start { margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body .click-cue::before { animation: none; }
}

/* ==========================================================================
   Guide tiles: make the open/close affordance and the hierarchy legible
   --------------------------------------------------------------------------
   Scoped to .guide-drop, so only the women's and teenagers' guide collections
   are affected. Three problems are fixed here:

   1. The chevron button was painted var(--accent-light) (#f2c6cf), the exact
      colour this stylesheet forces onto .guide-head, so the circle vanished
      into the header and only gained contrast on :hover, which never fires
      on a touch screen. It is now a permanently visible outlined button.
   2. A tile that was open looked identical, header-side, to one that was
      shut. The open state now reads as pressed: deeper tint, filled chevron,
      rose bar down the left edge.
   3. .guide-head * forced every line in the header to one ink, flattening
      the subject hook, the title and the teaser into a single block of text.
      The hook is now a tag, and the teaser steps back from the title.
   ========================================================================== */

body details.guide-drop { margin-bottom: 24px !important; }

body details.guide-drop:hover {
  border-color: #cf7d8d !important;
  box-shadow: 7px 7px 0 rgba(217, 143, 157, .22) !important;
}

body summary.guide-head:focus-visible {
  outline: 3px solid #7e5f3b !important;
  outline-offset: -3px !important;
}

/* 1. The chevron reads as a button you can press. */
body .guide-drop .guide-chevron {
  width: 38px !important;
  height: 38px !important;
  background: #fffdfb !important;
  border: 2px solid #cf7d8d !important;
  color: #8f3f52 !important;
  font-size: 15px !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(29, 26, 25, .12) !important;
}

body .guide-drop .guide-head:hover .guide-chevron {
  background: #f7e4e8 !important;
  opacity: 1 !important;
}

/* 2. An open tile looks pressed, from the header alone. */
body .guide-drop[open] > .guide-head {
  background: #ecb0be !important;
  border-left: 3px solid #a94f62 !important;
}

body .guide-drop[open] .guide-chevron {
  background: #a94f62 !important;
  border-color: #a94f62 !important;
  color: #fffdfb !important;
}

/* The emoji disc sits on pink, so give it a paper ring to lift it off. */
body .guide-drop .guide-emoji {
  border: 3px solid #fffdfb !important;
  box-shadow: 0 2px 6px rgba(29, 26, 25, .14) !important;
}

/* The title leads; the teaser steps back from it. */
body .guide-drop .guide-teaser { color: #4a4340 !important; }

@media (max-width: 600px) {
  body .guide-drop .guide-chevron { width: 34px !important; height: 34px !important; font-size: 14px !important; }
  body .guide-drop .guide-emoji { border-width: 2px !important; }
}

/* --------------------------------------------------------------------------
   Skip link. Every page already carried <main id="main-content"> with nothing
   pointing at it, so keyboard and screen-reader users had to tab the whole
   nine-item nav on every page before reaching the content. Hidden until it
   takes focus.
   -------------------------------------------------------------------------- */
body .skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--lux-ink, #1d1a19) !important;
  color: #fcf9f6 !important;
  font: 600 15px/1.2 system-ui, sans-serif;
  text-decoration: none !important;
  border-radius: 0 0 6px 0;
}

body .skip-link:focus,
body .skip-link:focus-visible {
  left: 0;
  outline: 3px solid #cdad83 !important;
  outline-offset: -3px !important;
}

/* ==========================================================================
   The guide chooser: the grouped list of every guide title at the top of the
   women's and teenagers' pages. Each pill carried an inline font-size of
   11.5px on a pink panel, which is smaller than the site's fine print and,
   on the teenagers' page, pink-on-pink. The pills are now white, with ink
   text at a readable size, so the list of titles is the scannable index of
   the page it was meant to be. Inline styles mean these need !important.
   ========================================================================== */

body .guide-chooser-pills a {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .005em !important;
  color: #1d1a19 !important;
  padding: 11px 20px !important;
  border: 1.5px solid #b96e7e !important;
  border-radius: 100px !important;
  background: #ffffff !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}

body .guide-chooser-pills a:hover,
body .guide-chooser-pills a:focus-visible {
  color: #8f3f52 !important;
  border-color: #8f3f52 !important;
  background: #fdf3f5 !important;
}

/* The section label above each run of pills has to hold its own against them. */
body .guide-chooser-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  color: #6b2f40 !important;
}

body .guide-chooser-pills { gap: 12px !important; }
body .guide-chooser-group { gap: 13px !important; }

@media (max-width: 700px) {
  body .guide-chooser-pills a { font-size: 15.5px !important; padding: 13px 20px !important; }
}

/* ==========================================================================
   The chooser is a <nav>, so it also picked up the bare `nav` rules meant
   for the top bar: sticky at the top of the screen and, below 820px,
   pointer-events: none. On phones that meant touches fell straight through
   the open "Jump to a guide" list, so it could not be scrolled or tapped.
   It also sat in a 62vh box of its own, a scroll inside a scroll holding
   several screens of guides. Now it opens in the page flow and the page
   scrolls as normal.

   On phones the open list shows only the section names, not every guide
   title. It is one short list that fits on screen, and each name is a
   link that closes the list and takes the reader down to that run of
   guides, where the guides themselves are listed.
   ========================================================================== */

body .guides-intro nav.guide-chooser {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  pointer-events: auto !important;
}

@media (max-width: 700px) {
  body .guides-intro nav.guide-chooser {
    max-height: none !important;
    overflow: visible !important;
    touch-action: auto;
    gap: 8px !important;
  }
  body .guides-intro .guide-chooser-group { gap: 0 !important; }
  body .guides-intro .guide-chooser-pills { display: none !important; }
  body .guides-intro a.guide-chooser-label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 12px 16px !important;
    border: 1.5px solid #b96e7e !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #1d1a19 !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1.3;
    text-transform: none;
    text-align: left;
    text-decoration: none !important;
  }
  body .guides-intro a.guide-chooser-label::after {
    content: "\2193";
    flex: none;
    color: #8f3f52;
    font-size: 15px;
  }
  body .guides-intro a.guide-chooser-label:hover,
  body .guides-intro a.guide-chooser-label:focus-visible {
    color: #8f3f52 !important;
    border-color: #8f3f52 !important;
    background: #fdf3f5 !important;
  }
}

/* ==========================================================================
   Seven cards in a three-across grid leaves the seventh alone on the bottom
   row, hard against the left edge. Put it in the middle column instead:
   "Loneliness" in the women's topic grid, and "Tidy one small thing" in the
   SOS Toolkit's small-things grid.
   ========================================================================== */

@media (min-width: 801px) {
  body .topics .topic-grid > .topic-card:nth-child(7):last-child {
    grid-column: 2 !important;
  }
}

/* The small-things grid was auto-fit, so its column count drifted with the
   viewport. Pin it to three, then centre the lone seventh card. */
@media (min-width: 780px) {
  body .lifestyle .lifestyle-grid { grid-template-columns: repeat(3, 1fr) !important; }
  body .lifestyle .lifestyle-grid > .life-card:nth-child(7):last-child {
    grid-column: 2 !important;
  }
}

@media (min-width: 520px) and (max-width: 779px) {
  body .lifestyle .lifestyle-grid { grid-template-columns: repeat(2, 1fr) !important; }
  body .lifestyle .lifestyle-grid > .life-card:nth-child(7):last-child {
    grid-column: 1 / -1 !important;
    width: calc((100% - 18px) / 2) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* ============================================================
   The "quick, honest note" is a footnote, not a feature card.
   It sits at the foot of 97 pages, and the rules above gave it the same
   2px border, paper gradient and 7px offset shadow as the real content
   cards - so it read as a big box competing with the footer right under
   it. Wide, low and quiet instead: hairline rule, no lift, small type.
   Declared last so it wins over those earlier !important card rules.
   ============================================================ */
body .disclaimer-box {
  border: 1px solid rgba(217, 143, 157, .40) !important;
  border-radius: 12px !important;
  background: rgba(250, 245, 241, .70) !important;
  box-shadow: none !important;
  color: #5a5a5a !important;
  padding: 14px 20px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-wrap: pretty;
}

body .disclaimer-box strong { color: #1c1c1c !important; }

@media (max-width: 700px) {
  /* narrow screens cannot be landscape, so give the type back a little size
     rather than leaving a wall of 12px text */
  body .disclaimer-box { padding: 15px 17px !important; font-size: 12.5px !important; }
}