/* ==========================================================================
   Sérénity — design tokens, global chrome, and page sections (Stream A).

   Direction: calm and trustworthy for seniors and families in crisis.
   Warm linen ground, deep "harbor" teal, one restrained warm accent (apricot),
   generous whitespace, a humanist serif for headings, the system sans for text.
   The single bold element is the crisis bar — the site's lifeline.

   Rules for everything in this file and widgets.css (docs/contracts.md §5):
   - Colours only via the --sn-* tokens, so high-contrast mode works everywhere.
   - Sizes in rem/em: the A−/A+ buttons scale the root font size.
   - Logical properties only (inline/block), so RTL needs no extra stylesheet.
   - tests/js/contrast.test.js checks every text/background pair ≥ 4.5:1.
   ========================================================================== */

/* ---- Tokens: light (default) -------------------------------------------- */
:root {
  --sn-bg: #FAF7F1;             /* linen: warm off-white page ground */
  --sn-surface: #FFFFFF;        /* paper: cards, toolbar, dialogs */
  --sn-surface-2: #F1EBE0;      /* oat: alternating sections, notes */
  --sn-text: #17262F;           /* ink: navy-slate body text */
  --sn-muted: #4A5760;          /* slate: secondary text, form borders */
  --sn-border: #857B6E;         /* control edges, ≥ 3:1 on every surface */
  --sn-primary: #0B5560;        /* harbor teal: links, buttons */
  --sn-primary-strong: #083B43; /* deep harbor: headings, hover, crisis bar */
  --sn-on-primary: #FFFFFF;
  --sn-accent: #F4C592;         /* apricot: used as a background only */
  --sn-on-accent: #17262F;
  --sn-danger: #A3261C;
  --sn-success: #1D6A44;
  --sn-focus: #1F5ED6;

  --sn-radius: 0.5rem;
  --sn-radius-lg: 1rem;
  --sn-shadow: 0 1px 2px rgb(23 38 47 / 0.06), 0 0.5rem 1.5rem rgb(23 38 47 / 0.08);

  --sn-space-1: 0.25rem;
  --sn-space-2: 0.5rem;
  --sn-space-3: 1rem;
  --sn-space-4: 1.5rem;
  --sn-space-5: 2.5rem;
  --sn-space-6: 4rem;

  /* System fonts only (no web fonts), with fallbacks for every script we
     publish: Arabic/Urdu/Persian, Devanagari, Bengali, Gurmukhi, and CJK. */
  --sn-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
    "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic",
    "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari",
    "Kohinoor Bangla", "Noto Sans Bengali", "Gurmukhi MN", "Noto Sans Gurmukhi",
    "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo",
    "Microsoft YaHei", "Microsoft JhengHei", "Yu Gothic", "Malgun Gothic",
    "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans CJK JP", "Noto Sans CJK KR",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --sn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", "Book Antiqua", Georgia,
    "Geeza Pro", "Noto Naskh Arabic", "Kohinoor Devanagari", "Nirmala UI", "Noto Serif Devanagari",
    "Kohinoor Bangla", "Noto Serif Bengali", "Gurmukhi MN", "Noto Sans Gurmukhi",
    "Songti SC", "Songti TC", "Hiragino Mincho ProN", "AppleMyungjo",
    "SimSun", "MingLiU", "Yu Mincho", "Batang", "Noto Serif CJK SC", serif;
  --sn-measure: 68ch;
}

/* ---- Tokens: high contrast (toggle in the accessibility toolbar) -------- */
html.serenity-hc {
  --sn-bg: #000000;
  --sn-surface: #0A0A0A;
  --sn-surface-2: #1A1A1A;
  --sn-text: #FFFFFF;
  --sn-muted: #E2E2E2;
  --sn-border: #FFFFFF;
  --sn-primary: #FFE14D;
  --sn-primary-strong: #FFF09A;
  --sn-on-primary: #000000;
  --sn-accent: #7FDBFF;
  --sn-on-accent: #000000;
  --sn-danger: #FF9C8F;
  --sn-success: #8CF0A8;
  --sn-focus: #00E0FF;
  --sn-shadow: none;
}

/* Script-appropriate faces first where Han unification or Nastaliq matter. */
:root:lang(zh-TW) { --sn-font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", system-ui, sans-serif; }
:root:lang(ja) { --sn-font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", system-ui, sans-serif; }
:root:lang(ko) { --sn-font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif; }
:root:lang(ur) { --sn-font-body: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif; }

/* ---- Base ---------------------------------------------------------------- */
html {
  font-size: 100%; /* the A−/A+ toolbar scales this (100%–150%) */
  scroll-padding-block-start: calc(var(--serenity-crisis-h, 0px) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--sn-bg);
  color: var(--sn-text);
  font-family: var(--sn-font-body);
  font-size: 1.125rem; /* 18px body */
  line-height: 1.6;
}

/* Taller lines for Arabic-script text. Set on body only (and inherited), since
   :lang() matches every element and would override heading line-heights. */
body:lang(ar), body:lang(fa) { line-height: 1.8; }
body:lang(ur) { line-height: 2.1; }

h1, h2, h3, h4 {
  font-family: var(--sn-font-heading);
  color: var(--sn-primary-strong);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

a {
  color: var(--sn-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover,
a:active {
  color: var(--sn-primary-strong);
  text-decoration-thickness: 2px;
}

/* Visible focus everywhere: 3px ring, offset so it sits on the page colour.
   The selector list mirrors Hello Elementor's reset.css (2px black ring) so
   equal specificity + later loading lets ours win. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--sn-focus);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Our chrome never un-hides what the markup hides. */
.serenity-crisis [hidden],
.serenity-toolbar [hidden],
.serenity-dialog [hidden],
.serenity-langpref[hidden] {
  display: none !important;
}

/* widgets.css gives every widget root vertical margins; the chrome roots sit flush. */
.serenity-widget.serenity-widget--crisis-bar,
.serenity-widget.serenity-widget--a11y-toolbar,
.serenity-widget.serenity-widget--lang-switcher {
  margin-block: 0;
}

/* ---- Skip link ----------------------------------------------------------- */
.serenity-skip-link {
  position: absolute;
  inset-inline-start: var(--sn-space-3);
  inset-block-start: -10rem;
  z-index: 100001;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  border-radius: var(--sn-radius);
  background: var(--sn-primary-strong);
  color: var(--sn-on-primary);
  font-weight: 700;
}

.serenity-skip-link:focus {
  inset-block-start: var(--sn-space-3);
  color: var(--sn-on-primary);
}

/* ---- Buttons ------------------------------------------------------------- */
.serenity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-block-size: 2.75rem; /* 44px at 100% */
  min-inline-size: 2.75rem;
  padding-block: 0.65em;
  padding-inline: 1.4em;
  border: 2px solid var(--sn-primary);
  border-radius: var(--sn-radius);
  background: var(--sn-primary);
  color: var(--sn-on-primary);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal; /* long translations wrap instead of overflowing */
  cursor: pointer;
}

/* Hello underlines `.page-content a` (0,1,1); buttons that are links must not. */
a.serenity-button,
a.serenity-button:hover {
  text-decoration: none;
}

.serenity-button:hover {
  border-color: var(--sn-primary-strong);
  background: var(--sn-primary-strong);
  color: var(--sn-on-primary);
}

/* Specificity note: widgets.css styles `.serenity-widget .serenity-button`,
   so variants also list a `.serenity-widget …` selector to win inside widgets. */
.serenity-button.serenity-button--secondary,
.serenity-widget .serenity-button.serenity-button--secondary {
  border-color: var(--sn-primary);
  background: var(--sn-surface);
  color: var(--sn-primary);
}

.serenity-button.serenity-button--secondary:hover,
.serenity-widget .serenity-button.serenity-button--secondary:hover {
  background: var(--sn-surface-2);
  color: var(--sn-primary-strong);
}

.serenity-button.serenity-button--accent {
  border-color: var(--sn-accent);
  background: var(--sn-accent);
  color: var(--sn-on-accent);
}

.serenity-button.serenity-button--accent:hover {
  border-color: var(--sn-primary-strong);
  background: var(--sn-primary-strong);
  color: var(--sn-on-primary);
}

/* ---- Crisis bar (the signature element) ---------------------------------- */
.serenity-widget.serenity-widget--crisis-bar {
  position: sticky;
  inset-block-start: var(--wp-admin--admin-bar--height, 0px);
  z-index: 1000;
}

.serenity-crisis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sn-space-2) var(--sn-space-4);
  padding-block: var(--sn-space-2);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  background: var(--sn-primary-strong);
  color: var(--sn-on-primary);
  /* Focus rings on the dark bar: --w-focus is widgets.css's alias. */
  --sn-focus: var(--sn-on-primary);
  --w-focus: var(--sn-on-primary);
}

.serenity-crisis__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.serenity-crisis__text strong {
  font-weight: 800;
}

.serenity-crisis__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sn-space-2) var(--sn-space-3);
}

/* Breathing "on call" dot: a person is staffing this line right now. */
.serenity-crisis__live {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 50%;
  background: var(--sn-accent);
  box-shadow: 0 0 0 0.25rem rgb(244 197 146 / 0.25);
  animation: serenity-breathe 2.8s ease-in-out infinite;
}

@keyframes serenity-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}

.serenity-crisis__call,
.serenity-crisis__callback {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding-block: 0.35em;
  padding-inline: 1.1em;
  border: 2px solid var(--sn-accent);
  border-radius: 999px;
  background: var(--sn-accent);
  color: var(--sn-on-accent);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.serenity-crisis__call:hover,
.serenity-crisis__callback:hover {
  border-color: var(--sn-surface);
  background: var(--sn-surface);
  color: var(--sn-text);
}

.serenity-crisis__number {
  font-weight: 800;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  direction: ltr;      /* phone numbers read left-to-right in every language */
  unicode-bidi: isolate;
}

.serenity-crisis__call span {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ---- Callback dialog ----------------------------------------------------- */
.serenity-dialog {
  inline-size: min(34rem, 100% - 2rem);
  max-block-size: calc(100% - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--sn-radius-lg);
  background: var(--sn-surface);
  color: var(--sn-text);
  box-shadow: var(--sn-shadow);
}

html.serenity-hc .serenity-dialog {
  border: 2px solid var(--sn-border);
}

.serenity-dialog::backdrop {
  background: rgb(10 20 26 / 0.6);
}

.serenity-dialog__form {
  display: grid;
  gap: var(--sn-space-3);
  padding: var(--sn-space-5) clamp(1.25rem, 4vw, 2.5rem);
}

.serenity-dialog__form > p {
  margin: 0;
}

.serenity-dialog__title {
  margin: 0;
  font-size: 1.6rem;
}

.serenity-dialog .serenity-field {
  display: grid;
  gap: 0.35rem;
}

.serenity-dialog label {
  font-weight: 700;
}

.serenity-dialog input {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-block: 0.5em;
  padding-inline: 0.75em;
  border: 2px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-surface);
  color: var(--sn-text);
  font: inherit;
}

.serenity-dialog__status {
  min-block-size: 1.6em;
  font-weight: 700;
}

.serenity-dialog__status:empty {
  display: none;
}

.serenity-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2) var(--sn-space-3);
}

/* Honeypot: off-screen for people, still present for bots. */
.serenity-hp {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ---- Accessibility + language toolbar ------------------------------------ */
.serenity-toolbar {
  border-block-end: 1px solid var(--sn-border);
  background: var(--sn-surface);
  color: var(--sn-text);
}

.serenity-toolbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sn-space-2) var(--sn-space-3);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-block: var(--sn-space-2);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.serenity-toolbar__group {
  display: flex;
  gap: var(--sn-space-2);
}

.serenity-toolbar .serenity-toolbar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding-block: 0.3em;
  padding-inline: 0.8em;
  border: 2px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-surface);
  color: var(--sn-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  cursor: pointer;
}

.serenity-toolbar .serenity-toolbar__button:hover {
  border-color: var(--sn-primary);
  background: var(--sn-surface-2);
  color: var(--sn-text);
}

.serenity-toolbar .serenity-toolbar__button--large {
  font-size: 1.2rem;
}

/* "A−" / "A+" are Latin labels: keep their order on right-to-left pages. */
.serenity-toolbar__group .serenity-toolbar__button > span {
  direction: ltr;
  unicode-bidi: isolate;
}

.serenity-toolbar .serenity-toolbar__button[aria-pressed="true"] {
  border-color: var(--sn-primary);
  background: var(--sn-primary);
  color: var(--sn-on-primary);
}

.serenity-toolbar .serenity-toolbar__button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Language switcher: pushed to the inline end of the toolbar. */
.serenity-widget.serenity-widget--lang-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sn-space-2);
  margin-inline-start: auto;
}

.serenity-lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sn-space-2);
  margin: 0;
}

.serenity-lang__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 1rem;
  font-weight: 700;
}

/* Three classes: beats widgets.css's `.serenity-widget :is(select, …)` (full width). */
.serenity-toolbar .serenity-lang .serenity-lang__select {
  inline-size: auto;
  max-inline-size: 13rem;
  min-block-size: 2.75rem;
  padding-block: 0.3em;
  padding-inline: 0.6em;
  border: 2px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-surface);
  color: var(--sn-text);
  font: inherit;
  font-size: 1rem;
}

.serenity-langpref {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sn-space-2) var(--sn-space-3);
  padding: var(--sn-space-2) var(--sn-space-3);
  border-radius: var(--sn-radius);
  background: var(--sn-surface-2);
  color: var(--sn-text);
}

.serenity-langpref__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sn-space-2);
  margin: 0;
  font-weight: 700;
}

/* ---- Sections: layout ---------------------------------------------------- */
.serenity-section {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--sn-bg);
  color: var(--sn-text);
}

.serenity-section--alt,
.serenity-gate {
  background: var(--sn-surface-2);
  color: var(--sn-text);
}

.serenity-section__inner {
  box-sizing: border-box;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Narrow sections keep the shared start edge; only their content is capped. */
.serenity-section__inner--narrow > * {
  max-inline-size: 52rem;
}

.serenity-section h1 {
  margin-block: 0 var(--sn-space-3);
  font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.4rem);
  letter-spacing: -0.01em;
}

.serenity-section h2 {
  margin-block: 0 var(--sn-space-3);
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.3rem);
}

.serenity-section h3 {
  margin-block: var(--sn-space-5) var(--sn-space-2);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
}

.serenity-section p,
.serenity-section li {
  max-inline-size: var(--sn-measure);
}

.serenity-section p {
  margin-block: 0 var(--sn-space-3);
}

.serenity-eyebrow {
  margin-block: 0 var(--sn-space-2);
  color: var(--sn-primary);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Letter-spacing breaks joined scripts, and these have no capitals anyway. */
:lang(ar) .serenity-eyebrow,
:lang(fa) .serenity-eyebrow,
:lang(ur) .serenity-eyebrow,
:lang(hi) .serenity-eyebrow,
:lang(bn) .serenity-eyebrow,
:lang(pa) .serenity-eyebrow {
  letter-spacing: normal;
}

.serenity-section .serenity-lead {
  margin-block-end: var(--sn-space-4);
  font-size: 1.25rem;
  line-height: 1.55;
}

.serenity-section .serenity-fineprint {
  color: var(--sn-muted);
  font-size: 1rem;
}

.serenity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-3);
  margin-block-start: var(--sn-space-4);
}

.serenity-embed {
  margin-block-start: var(--sn-space-4);
}

.serenity-embed:empty {
  display: none;
}

.serenity-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0 var(--sn-space-5);
}

/* ---- Hero ---------------------------------------------------------------- */
/* Soft "morning light" from above: calm, not clinical. */
.serenity-section--hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  border-block-end: 1px solid color-mix(in srgb, var(--sn-border) 30%, transparent);
  background:
    radial-gradient(ellipse 90% 70% at 50% -20%, color-mix(in srgb, var(--sn-accent) 45%, transparent), transparent 70%),
    var(--sn-bg);
}

html.serenity-hc .serenity-section--hero {
  background: var(--sn-bg);
}

.serenity-section--hero .serenity-lead {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  max-inline-size: 40em;
}

/* ---- Cards --------------------------------------------------------------- */
.serenity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sn-space-4);
  margin-block: var(--sn-space-4);
}

.serenity-cards--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.serenity-card {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-2);
  padding: var(--sn-space-4);
  border: 1px solid color-mix(in srgb, var(--sn-border) 35%, transparent);
  border-radius: var(--sn-radius-lg);
  background: var(--sn-surface);
  color: var(--sn-text);
  box-shadow: var(--sn-shadow);
}

html.serenity-hc .serenity-card {
  border-color: var(--sn-border);
}

.serenity-card p {
  margin: 0;
}

.serenity-section .serenity-card__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
}

.serenity-card__meta {
  color: var(--sn-muted);
  font-size: 1rem;
  font-weight: 700;
}

.serenity-card__fit {
  margin-block-start: auto;
  padding-block-start: var(--sn-space-2);
}

.serenity-card--action .serenity-button {
  align-self: flex-start;
  margin-block-start: auto;
}

/* ---- Banners (service guarantees) ---------------------------------------- */
.serenity-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sn-space-3);
  margin-block: var(--sn-space-4);
}

.serenity-banner {
  padding: var(--sn-space-4);
  border-inline-start: 0.4rem solid var(--sn-primary);
  border-radius: var(--sn-radius);
  background: var(--sn-surface);
  color: var(--sn-text);
}

.serenity-banner p {
  margin: 0;
}

.serenity-section .serenity-banner__title {
  margin-block-end: var(--sn-space-1);
  color: var(--sn-primary-strong);
  font-family: var(--sn-font-heading);
  font-size: 1.4rem;
  font-weight: 600;
}

/* ---- Disclosures (legal notices) ----------------------------------------- */
.serenity-disclosure {
  margin-block: var(--sn-space-4);
  padding: var(--sn-space-3) var(--sn-space-4);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-surface);
  color: var(--sn-text);
}

.serenity-disclosure p {
  margin: 0;
}

.serenity-section .serenity-disclosure__title {
  margin-block-end: var(--sn-space-1);
  font-weight: 700;
}

.serenity-disclosure__title::before {
  content: "§\00a0";
  content: "§\00a0" / "";
  color: var(--sn-primary);
  font-family: var(--sn-font-heading);
}

/* ---- Callout (the free-placement mandate) -------------------------------- */
.serenity-callout {
  margin-block: var(--sn-space-4) var(--sn-space-5);
  padding: var(--sn-space-4) clamp(1.25rem, 3vw, 2.5rem);
  border-inline-start: 0.4rem solid var(--sn-accent);
  border-radius: var(--sn-radius-lg);
  background: var(--sn-surface-2);
  color: var(--sn-text);
}

.serenity-section .serenity-callout__title {
  color: var(--sn-primary-strong);
  font-family: var(--sn-font-heading);
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  font-weight: 600;
  line-height: 1.3;
}

/* ---- Badges, checklists, steps ------------------------------------------- */
.serenity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2);
  margin-block: var(--sn-space-3);
  padding: 0;
  list-style: none;
}

.serenity-section .serenity-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-block: 0.4em;
  padding-inline: 0.9em;
  border: 1px solid color-mix(in srgb, var(--sn-border) 45%, transparent);
  border-radius: 999px;
  background: var(--sn-surface);
  color: var(--sn-text);
  font-size: 1rem;
}

.serenity-badges li::before,
.serenity-checklist li::before {
  content: "✓";
  content: "✓" / "";
  color: var(--sn-success);
  font-weight: 800;
}

.serenity-checklist {
  margin-block: var(--sn-space-2) var(--sn-space-3);
  padding: 0;
  list-style: none;
}

.serenity-checklist li {
  position: relative;
  margin-block-end: var(--sn-space-2);
  padding-inline-start: 1.75em;
}

.serenity-checklist li::before {
  position: absolute;
  inset-inline-start: 0.2em;
}

/* Real sequences only (onboarding, turnkey admissions, the free track). */
.serenity-steps {
  display: grid;
  gap: var(--sn-space-4);
  margin-block: var(--sn-space-4);
  padding: 0;
  list-style: none;
  counter-reset: serenity-step;
}

.serenity-steps > li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  column-gap: var(--sn-space-3);
  counter-increment: serenity-step;
}

.serenity-steps > li::before {
  content: counter(serenity-step);
  display: grid;
  place-items: center;
  grid-row: span 3;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--sn-primary);
  color: var(--sn-on-primary);
  font-family: var(--sn-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.serenity-steps > li > * {
  grid-column: 2;
}

.serenity-section .serenity-steps__title {
  margin-block: 0.45rem var(--sn-space-1);
  color: var(--sn-primary-strong);
  font-weight: 700;
}

/* ---- Library links ------------------------------------------------------- */
.serenity-links {
  display: grid;
  gap: var(--sn-space-3);
  margin-block: var(--sn-space-4);
  padding: 0;
  list-style: none;
}

.serenity-links__item {
  padding: var(--sn-space-4);
  border: 1px solid color-mix(in srgb, var(--sn-border) 35%, transparent);
  border-radius: var(--sn-radius-lg);
  background: var(--sn-surface);
  color: var(--sn-text);
}

.serenity-links__item a {
  font-family: var(--sn-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.serenity-links__source {
  display: block;
  margin-block: var(--sn-space-1) var(--sn-space-2);
  color: var(--sn-muted);
  font-size: 1rem;
}

.serenity-links__item p {
  margin: 0;
}

/* ---- Accordion (FAQ) ----------------------------------------------------- */
.serenity-accordion {
  margin-block: var(--sn-space-4);
  border-block-start: 1px solid var(--sn-border);
}

.serenity-accordion__item {
  border-block-end: 1px solid var(--sn-border);
}

.serenity-accordion__item summary {
  display: flex;
  align-items: center;
  gap: var(--sn-space-3);
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding-block: var(--sn-space-3);
  color: var(--sn-primary-strong);
  font-family: var(--sn-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.serenity-accordion__item summary::-webkit-details-marker {
  display: none;
}

.serenity-accordion__item summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-inline-start: auto;
  border: 2px solid var(--sn-primary);
  border-radius: 50%;
  color: var(--sn-primary);
  font-family: var(--sn-font-body);
  font-size: 1.25rem;
  line-height: 1;
}

.serenity-accordion__item[open] summary::after {
  content: "−";
  content: "−" / "";
}

.serenity-accordion__body {
  padding-block-end: var(--sn-space-4);
}

/* ---- Quote --------------------------------------------------------------- */
.serenity-quote {
  margin-block: var(--sn-space-3);
  margin-inline: 0;
  padding-block: var(--sn-space-1);
  padding-inline: var(--sn-space-4) 0;
  border-inline-start: 0.25rem solid var(--sn-primary);
  font-family: var(--sn-font-heading);
  font-size: 1.3rem;
  font-style: italic;
}

.serenity-quote p {
  margin: 0;
}

/* ---- About page: the Managing Director's sign-off ------------------------ */
.serenity-about__signature {
  margin-block-start: var(--sn-space-4);
  color: var(--sn-primary-strong);
  font-family: var(--sn-font-heading);
  font-weight: 600;
}

/* ---- Partner gate prompt ------------------------------------------------- */
.serenity-gate .serenity-button {
  margin-block-start: var(--sn-space-2);
}

/* ---- Legal disclosures footer -------------------------------------------- */
.serenity-legal {
  border-block-start: 1px solid var(--sn-border);
  background: var(--sn-surface-2);
  color: var(--sn-text);
  font-size: 1rem;
}

.serenity-legal__inner {
  box-sizing: border-box;
  display: grid;
  gap: var(--sn-space-3);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-block: var(--sn-space-5);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.serenity-legal p {
  margin: 0;
  max-inline-size: var(--sn-measure);
}

.serenity-legal__free {
  color: var(--sn-primary-strong);
  font-family: var(--sn-font-heading);
  font-size: 1.2rem;
  font-weight: 600;
}

.serenity-legal__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.serenity-legal__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-weight: 700;
}

/* Social profile icons: a small row of plain links (44px targets). */
.serenity-legal__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.serenity-legal__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border-radius: var(--sn-radius);
}

.serenity-legal__social svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.serenity-legal__entity {
  color: var(--sn-muted);
}

/* ---- Admin-only notices (missing client content) ------------------------- */
.serenity-admin-notice {
  margin-block: var(--sn-space-3);
  padding: var(--sn-space-2) var(--sn-space-3);
  border: 2px dashed var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-surface-2);
  color: var(--sn-text);
  font-size: 1rem;
}

.serenity-admin-notice::before {
  content: "Admin only · ";
  font-weight: 700;
}

.serenity-widget--crisis-bar + .serenity-admin-notice {
  margin: 0;
  border-radius: 0;
}

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

/* ---- Print --------------------------------------------------------------- */
@media print {
  .serenity-skip-link,
  .serenity-widget--a11y-toolbar,
  .serenity-dialog,
  .serenity-langpref,
  .serenity-admin-notice,
  .serenity-embed,
  .serenity-crisis__live,
  .serenity-crisis__callback {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .serenity-widget.serenity-widget--crisis-bar {
    position: static;
  }

  /* Keep the on-call number on paper, in plain black and white. */
  .serenity-crisis {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .serenity-crisis__call {
    border: 0;
    background: none;
    color: #000;
  }

  .serenity-section,
  .serenity-section--alt,
  .serenity-section--hero,
  .serenity-legal {
    padding-block: 1rem;
    background: none;
  }

  /* Icons alone tell a reader nothing on paper. */
  .serenity-legal__social {
    display: none;
  }

  .serenity-card,
  .serenity-banner,
  .serenity-disclosure,
  .serenity-links__item,
  .serenity-accordion__item {
    box-shadow: none;
    break-inside: avoid;
  }

  .serenity-links__item a::after {
    content: " (" attr(href) ")";
    font-family: var(--sn-font-body);
    font-size: 0.85em;
    font-weight: 400;
    word-break: break-all;
  }

  /* Print every FAQ answer, even collapsed ones (supporting browsers). */
  .serenity-accordion__item::details-content {
    content-visibility: visible;
    display: block;
  }
}