/* =====================================================================
   The Circl — Marketing Website
   Single shared stylesheet
   ---------------------------------------------------------------------
   Fonts:  New Farm — the primary Latin typeface, licensed through Adobe
           Fonts web project evk2vqt (loaded from a <link> in the layout
           head; the CSS family Adobe exposes is "new-farm"). The project
           serves weights 100/300/400/500/700, normal style only: there is
           no SemiBold and no italic, so a font-weight:600 rule resolves to
           the real 700 face by standard CSS font matching, and italics are
           browser-synthesised.
           SN Pro ("SNPro") — the controlled LOCAL fallback, bundled as two
           variable TTFs (wght 200-900, upright + italic) under
           /assets/fonts/fallbackFont/SNPro. If Adobe Fonts is unreachable,
           Latin text falls back to SNPro, never to a system default.
           Playpen Sans Arabic (Arabic) — bundled TTF (exact). Neither New
           Farm nor SN Pro carries Arabic glyphs, so Arabic keeps this face.
   ===================================================================== */

/* The Adobe Fonts stylesheet loads from a <link> in the layout head
   (PERF-01): an @import here would chain style.css -> fonts CSS -> font
   files and block rendering. */

@font-face {
  font-family: "Playpen Sans Arabic";
  src:
    url("../fonts/fallbackFont/PlaypenSansArabic/PlaypenSansArabic.woff") format("woff"),
    url("../fonts/fallbackFont/PlaypenSansArabic/PlaypenSansArabic.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

/* SN Pro variable fonts — the whole 200-900 range in one file per style, so
   no static weight is fabricated and none is missing. TTF is the only format
   shipped with the family; the files are served as-is, unconverted. */
@font-face {
  font-family: "SNPro";
  src: url("../fonts/fallbackFont/SNPro/SNPro-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SNPro";
  src: url("../fonts/fallbackFont/SNPro/SNPro-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------- Variables ------------------------------- */
:root {
  /* Brand colours */
  --purple: #6a48e5;
  --purple-deep: #5128cc;
  --purple-logo: #635aa7;
  --violet: #5e0fe0;
  --ink: #221237;
  --near-black: #1c1b1a;
  --body: #484555;
  --muted: #51575c;
  --yellow: #f5c952;
  --yellow-light: #ffd25a;
  --green: #46ce99;
  --cream: #f9f4f2;
  --card: #fdf8f6;
  --border: #cac4d7;
  --white: #ffffff;

  /* Type. One controlled Latin stack — Adobe's "new-farm" first, the local
     SNPro variable font as the guaranteed fallback, then generic sans-serif.
     The three Latin tokens are kept separate on purpose: they mark distinct
     typographic ROLES (display / UI / eyebrows) even while one family now
     serves all of them, so a future split costs one line each. Arabic keeps
     its own face — neither New Farm nor SN Pro has Arabic glyphs. */
  /* Playpen closes the Latin stacks so Arabic glyphs on an English page —
     the "العربية" locale pill above all — resolve to OUR Arabic face per
     character instead of an uncontrolled system font of unpredictable width. */
  --font-display: "new-farm", "SNPro", "Playpen Sans Arabic", sans-serif;
  --font-ui: "new-farm", "SNPro", "Playpen Sans Arabic", sans-serif;
  --font-alt: "new-farm", "SNPro", "Playpen Sans Arabic", sans-serif;
  --font-ar: "Playpen Sans Arabic", "SNPro", sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: 100px;

  /* Radius */
  --r-pill: 9999px;
  --r-lg: 50px;
  --r-md: 25px;
  --r-sm: 16px;

  /* Effects */
  /* Shared by both dashboards (member .dash and therapist .tdash). */
  --dash-card-shadow: 0 2px 14px rgba(28, 27, 26, 0.06), 0 1px 3px rgba(28, 27, 26, 0.04);
  --ring: inset 0 0 0 1px var(--border);
  --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* --------------------------------- Reset --------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Shared page-level background doodles, rendered behind every page. */
.page-doodles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("../images/bg-scribbles-1.svg"),
    url("../images/bg-loop-yellow.svg"),
    url("../images/bg-bolt-yellow.svg"),
    url("../images/bg-swoosh-purple.svg"),
    url("../images/bg-scribbles-2.svg"),
    url("../images/bg-bolt-yellow.svg");
  background-repeat: no-repeat;
  background-position:
    right 0 top 140px,
    left 0 top 720px,
    left 0 top 1560px,
    right 0 top 1280px,
    right 0 top 2050px,
    right 0 top 2900px;
}

@media (max-width: 767px) {
  .page-doodles { display: none; }
}

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

a { color: var(--purple-deep); text-decoration: none; }
a:hover { color: var(--purple); }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.96px;
  text-wrap: balance;
}

p { margin: 0; }

/* ------------------------------- Utilities ------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--near-black);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow-light);
}

.section-title {
  font-size: 65px;
  line-height: 60px;
  letter-spacing: -0.96px;
}

.arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}

/* -------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 20px;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(106, 72, 229, 0.4); outline-offset: 2px; }

.btn--primary { background: var(--purple-deep); color: var(--white); }
.btn--primary:hover { background: #451fb0; }

.btn--purple { background: var(--purple); color: var(--white); }
.btn--purple:hover { background: var(--purple-deep); }

.btn--yellow { background: var(--yellow); color: var(--near-black); }
.btn--yellow:hover { background: var(--yellow-light); }

.btn--yellow-outline { background: transparent; color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); }
.btn--yellow-outline:hover { background: var(--yellow); color: var(--near-black); }

.btn--outline {
  background: transparent;
  color: var(--near-black);
  box-shadow: inset 0 0 0 2px var(--near-black);
}
.btn--outline:hover { background: var(--near-black); color: var(--white); }

/* ================================ HEADER ================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 36px; width: auto; }

.nav-wrap { display: contents; }
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 8px 32px;
  /* Safety valve: a whole link may move to a second row, but a label never
     breaks mid-word (see white-space below). */
  flex-wrap: wrap;
}
.main-nav a {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  padding-bottom: 6px;
  /* "How It Works" must never stack into three lines when space is tight. */
  white-space: nowrap;
}
.main-nav a:hover { color: var(--purple); }
.main-nav a.is-active { color: var(--purple); font-weight: 700; }
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 9px;
  background: url("../images/nav-underline.svg") no-repeat center / 100% 100%;
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .btn--outline { box-shadow: inset 0 0 0 2px var(--near-black); }

/* Signed-in participant identity (QA-FIX-01): profile link + POST sign-out. */
.header-account { display: flex; align-items: center; gap: 6px; min-width: 0; }
.header-account__profile { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; text-decoration: none; color: var(--near-black); min-width: 0; }
/* QA: the dashboard-header avatar — image or initials, always a circle. */
.dash-user__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
span.dash-user__avatar { display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--purple-deep); font-family: var(--font-ui); font-weight: 700; font-size: 15px; }
/* QA: rejected-payment recovery card + the green WhatsApp action. */
.dash-rejected__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.btn--whatsapp { background: #23B33A; color: var(--white); gap: 10px; }
.btn--whatsapp:hover { background: #1e9c33; color: var(--white); }
.btn--whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; }
.billing__more { margin: 0; padding: 14px 18px 16px; text-align: end; font-family: var(--font-ui); font-size: 14px; border-top: 1px solid var(--border); }
/* QA: the navbar avatar — image or initials, always a neat circle. */
.header-account__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
span.header-account__avatar { display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--purple-deep); font-family: var(--font-ui); font-weight: 700; font-size: 13px; }
.header-account__profile:hover, .header-account__profile:focus-visible { background: rgba(106,72,229,0.08); outline: none; }
.header-account__profile:focus-visible { box-shadow: inset 0 0 0 2px var(--purple); }
.header-account__profile > svg { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--purple-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.header-account__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-align: start; }
.header-account__meta b { font-family: var(--font-ui); font-size: 14px; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-account__meta small { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }
.header-account__signout { display: flex; }
.header-account__signout button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.header-account__signout button:hover { background: rgba(28,27,26,0.07); }
.header-account__signout button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--purple); }
.header-account__signout svg { width: 19px; height: 19px; fill: none; stroke: var(--near-black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .header-account__signout svg { transform: scaleX(-1); }

.nav-checkbox { display: none; }
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ================================= HERO ================================== */
.hero { padding: 80px 0 40px; }
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 505px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.96px;
  color: var(--near-black);
  white-space: nowrap;
}
.hero h1 {
  margin-top: 28px;
  font-size: 65px;
  line-height: 60px;
  color: var(--near-black);
}
.hero__lead {
  margin-top: 24px;
  max-width: 504px;
  font-size: 18px;
  line-height: 28px;
  color: var(--muted);
}
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px; }

.hero__media { position: relative; }
.hero__media img { width: 100%; height: auto; }

/* ================================ STATS ================================== */
.stats { padding: 40px 0 80px; }
.stats .container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 83px;
}
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -0.96px;
  color: var(--near-black);
}
.stat__label {
  margin-top: 8px;
  font-family: var(--font-alt);
  font-size: 16px;
  color: var(--muted);
}

/* ============================ STEPS (purple) ============================= */
.steps {
  position: relative;
  margin: 0 22px;
  padding: 86px 78px;
  background: var(--purple) url("../images/steps-doodles.svg") no-repeat center / cover;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.steps__title {
  text-align: center;
  color: var(--white);
  font-size: 65px;
  line-height: 60px;
  text-transform: capitalize;
  margin-bottom: 56px;
}
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step-card {
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--ring);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-card__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--near-black);
}
.step-card h3 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  padding: 16px 0;
  color: var(--near-black);
}
.step-card p { font-size: 16px; line-height: 24px; color: var(--body); }

/* =============================== BENEFITS ================================ */
.benefits { padding: 120px 0; }
.benefits .container {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.benefits__intro .section-title { color: var(--ink); font-size: 56px; line-height: 60px; margin: 12px 0 24px; }
.benefits__media { position: relative; }
.benefits__media img { width: 100%; height: auto; }

.benefit-list { display: flex; flex-direction: column; }
.benefit {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 16px;
}
.benefit:not(:last-child) .benefit__body { padding-bottom: 28px; }
.benefit__marker { display: flex; flex-direction: column; align-items: center; }
.benefit__node { flex-shrink: 0; margin-top: 2px; }
.benefit__node rect {
  fill: none;
  stroke: #cdd0d2;
  stroke-dasharray: 2 2;
  transition: stroke 0.35s ease;
}
.benefit__node circle { fill: #cdd0d2; transition: fill 0.35s ease; }
.benefit__line {
  flex: 1;
  width: 0;
  margin: 4px 0;
  border-left: 1px dashed #cdd0d2;
  transition: border-color 0.35s ease;
}
.benefit:last-child .benefit__line { display: none; }
.benefit.is-done .benefit__node rect { stroke: var(--purple); stroke-dasharray: none; }
.benefit.is-done .benefit__node circle { fill: var(--purple); }
.benefit.is-done .benefit__line { border-left-style: solid; border-color: var(--purple); }
.benefit h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.benefit p { margin-top: 6px; font-size: 16px; color: var(--muted); }
.benefits__cta { margin-top: 16px; }

/* ============================ PROGRAMS (cream) =========================== */
.programs {
  position: relative;
  margin: 0 22px;
  padding: 69px 78px;
  background: var(--cream);
  border-radius: var(--r-lg);
}
.programs::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("../images/choose-your-circl-shape.webp") no-repeat center / cover;
  pointer-events: none;
}
.programs__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.programs__head h2 {
  font-size: 65px;
  line-height: 60px;
  text-transform: capitalize;
  color: var(--near-black);
  border-bottom: 3px solid var(--purple);
  padding-bottom: 10px;
}
.carousel-nav { display: flex; gap: 12px; }
.carousel-nav button {
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--near-black);
  color: var(--near-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.carousel-nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.carousel-nav button:hover,
.carousel-nav button[aria-current="true"] { background: var(--near-black); color: var(--white); }
/* Slider at either end: drop back to the outline arrow and fade it, so the
   filled/hover treatments never read as clickable. */
.carousel-nav button:disabled,
.carousel-nav button:disabled:hover {
  background: transparent;
  color: var(--near-black);
  opacity: 0.35;
  cursor: not-allowed;
}

.programs__track {
  position: relative;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.programs__track::-webkit-scrollbar { display: none; }
/* End spacer: gives the track enough scroll room for the last cards to
   reach the snap start, so every card can become the active one. */
.programs__track::after {
  content: "";
  flex: 0 0 calc(100% - 630px);
}

.program-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 610px;
  max-width: 610px;
  height: 423px;
  border-radius: var(--r-lg);
  background: var(--purple);
  overflow: hidden;
  scroll-snap-align: start;
  color: var(--white);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.programs__track .program-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    url("../images/program-face-spark.svg"),
    url("../images/program-face-happy.svg"),
    url("../images/program-face-sad.svg");
  background-repeat: no-repeat;
  background-position:
    right 12px top 16px,
    right -30px top 128px,
    left -24px bottom 10px;
  background-size: 47px 69px, 95px 95px, 95px 87px;
  opacity: 0.12;
  pointer-events: none;
}
.program-card:not(.is-active) {
  opacity: 0.4;
  transform: scale(0.94);
}
/* Logical inset: the photo sits on the side the copy reads AWAY from, so it
   moves to the left in Arabic instead of ending up underneath the text. */
.program-card__img {
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  z-index: 1;
  width: 50%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 44%);
}
.program-card__body {
  position: relative;
  z-index: 2;
  padding: 39px 43px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.program-card h3 { color: var(--white); font-size: 30px; line-height: 1.1; letter-spacing: -0.96px; }
.program-card__role { margin-top: 6px; font-family: var(--font-alt); font-weight: 500; font-size: 14px; color: var(--yellow-light); }
.program-card__desc { margin-top: 12px; font-size: 14px; line-height: 1.5; max-width: 300px; color: rgba(255, 255, 255, 0.9); }
.program-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; margin-bottom: 16px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(248, 243, 241, 0.6);
  font-family: var(--font-alt);
  font-size: 12px;
  color: var(--white);
}
/* The card body is a full-height column, and the tag row that used to carry
   `margin-top: auto` is no longer rendered — so the CTA claims the free space
   itself and sits on the card floor instead of floating under the copy. */
.program-card .btn { align-self: flex-start; margin-top: auto; }

/* ============================ ASSESSMENT (dark) ========================== */
.assessment {
  margin: 120px 22px;
  padding: 90px 80px;
  background: var(--ink) url("../images/assessment-doodles.svg") no-repeat center / cover;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}
.assessment__body h2 { color: var(--white); font-size: 48px; line-height: 1.1; letter-spacing: 0; }
.assessment__body p { margin: 15px 0 15px; font-family: var(--font-alt); font-size: 16px; color: rgba(255, 255, 255, 0.85); max-width: 636px; }
.assessment__subhead { font-weight: 700; color: var(--yellow); }
.assessment__receive { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.assessment__receive li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 14px; color: var(--white); }
.check { width: 16px; height: 16px; flex-shrink: 0; }
.check path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assessment__receive .check circle { fill: var(--white); }
.assessment__receive .check path { stroke: var(--ink); }

.assessment .assess-card { padding: 36px; gap: 24px; box-shadow: none; }
.assessment .assess-card[hidden] { display: none; }
.assessment .assess-card fieldset { margin: 0; padding: 0; border: 0; }
.assessment .assess-card h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.5px; color: var(--near-black); margin-bottom: 24px; }
.assessment .assess-progress-label { font-size: 13px; }
.assessment .assess-option { min-height: 54px; padding: 14px 18px; font-size: 15px; gap: 12px; }
.assessment .assess-option .radio { width: 20px; height: 20px; }
.assessment .assess-option:has(input:checked) .radio { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--purple-deep); }
.assessment .assess-footer { padding-top: 8px; }
.assessment .assess-footer .btn { height: 46px; padding: 0 26px; }

.quiz-result {
  background: var(--white);
  border-radius: 24px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiz-result[hidden] { display: none; }
.quiz-result h3 { font-size: 24px; letter-spacing: -0.5px; color: var(--near-black); }
.quiz-result__intro { font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.quiz-result h4 { font-size: 18px; color: var(--purple-deep); margin-top: 8px; }
.quiz-result__desc { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--body); }
.quiz-result__facts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.quiz-fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: #f2f0f5;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
}
.quiz-fact b { font-weight: 700; color: var(--near-black); }
.quiz-fact span { color: var(--muted); }
.quiz-result__for { font-weight: 700; font-size: 16px; color: var(--near-black); margin-top: 10px; }
.quiz-result__tags { display: flex; flex-direction: column; gap: 8px; }
.quiz-result__tags li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.quiz-result__tags .check circle { fill: var(--purple); }
.quiz-result__tags .check path { stroke: var(--white); }
.quiz-result .btn { width: 100%; margin-top: 14px; }

/* ================================= FAQ =================================== */
.faq {
  padding: 40px 0 120px;
  background-image:
    url("../images/bg-swoosh-purple.svg"),
    url("../images/bg-bolt-yellow.svg"),
    url("../images/bg-scribbles-2.svg");
  background-repeat: no-repeat;
  background-position:
    right -70px top -90px,
    left -80px bottom 30px,
    right -170px bottom -390px;
}
.faq h2 { text-align: center; font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); margin-bottom: 48px; }
.faq__list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.faq-item[open] { background: var(--ink); border-color: var(--ink); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: var(--ink);
  text-transform: capitalize;
}
.faq-item[open] summary { color: var(--white); padding-bottom: 8px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  font-size: 20px;
  font-weight: 500;
  color: var(--near-black);
}
.faq-item[open] summary .plus { transform: rotate(45deg); color: var(--white); }
.faq-item p { padding-block: 0 20px; padding-inline: 24px 48px; font-family: var(--font-alt); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }

/* ================================ FOOTER ================================= */
.closing { padding: 0 22px; }
.closing__cta {
  position: relative;
  margin-bottom: -223px;
  z-index: 2;
  padding: 86px 100px;
  background: var(--yellow) url("../images/closing-doodles.svg") no-repeat center / cover;
  border-radius: var(--r-lg);
  text-align: center;
  overflow: hidden;
}
.closing__cta h2 { font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); }
.closing__cta p { margin: 25px auto; max-width: 650px; font-size: 18px; color: var(--near-black); }

.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 320px 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer__brand img { height: 44px; margin-bottom: 20px; }
.footer__brand p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 272px; margin-bottom: 24px; }
.social { display: flex; gap: 12px; }
.social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.social a:hover { background: var(--white); color: var(--ink); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

.footer__col h4 { color: var(--yellow); font-size: 18px; margin-bottom: 16px; letter-spacing: -0.96px; }
.footer__col li { margin-bottom: 16px; }
.footer__col a { color: var(--white); font-size: 16px; }
.footer__col a:hover { color: var(--yellow); }

.footer__news h4 { color: var(--yellow); font-size: 18px; margin-bottom: 12px; }
.footer__news p { color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; }
.news-form { display: flex; gap: 8px; }
.news-form input {
  flex: 1;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.news-form input::placeholder { color: #6b7280; }
.news-form button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--purple-logo);
  box-shadow: var(--shadow-soft);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.news-form button:hover { background: var(--purple); }
.news-form svg { width: 20px; height: 20px; fill: currentColor; }

.footer__bottom {
  border-top: 1px solid rgba(253, 248, 246, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { color: var(--yellow-light); }
/* QA-FIX-01: the facilitator entry reads as a labelled action, not prose. */
.footer__bottom a.footer__facilitators { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 700; }
.footer__bottom a.footer__facilitators:hover, .footer__bottom a.footer__facilitators:focus-visible { color: var(--yellow-light); }
.footer__facilitators svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* =============================== RESPONSIVE ============================== */
@media (max-width: 1200px) {
  :root { --gutter: 56px; }
  .steps__grid { grid-template-columns: repeat(2, 1fr); }
  .assessment { margin: 100px 56px; padding: 64px 56px; gap: 48px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 40px; }
  .section-title,
  .hero h1,
  .steps__title,
  .programs__head h2,
  .faq h2,
  .closing__cta h2 { font-size: 48px; line-height: 1.05; }
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { max-width: 560px; }
  .benefits .container { grid-template-columns: 1fr; gap: 48px; }
  .benefits__media { max-width: 460px; }
  .assessment { grid-template-columns: 1fr; }
  .assessment__body { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav-wrap { display: none; }
  .nav-toggle { display: flex; }
  .nav-checkbox:checked ~ .nav-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
    padding: 24px var(--gutter) 32px;
  }
  .nav-checkbox:checked ~ .nav-wrap .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav-checkbox:checked ~ .nav-wrap .main-nav a { display: block; width: 100%; padding: 14px 0; }
  .nav-checkbox:checked ~ .nav-wrap .header-actions { display: flex; gap: 12px; }
  .nav-checkbox:checked ~ .nav-wrap .header-actions .btn { flex: 1; }
  .nav-checkbox:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-checkbox:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-checkbox:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .steps,
  .programs { margin: 0 12px; padding: 48px 24px; }
  .steps__grid { grid-template-columns: 1fr; }
  .steps__title { margin-bottom: 32px; }
  .stats .container { gap: 32px; }
  .stat { flex: 1 0 40%; }
  .benefits { padding: 72px 0; }
  .assessment { margin: 72px 12px; padding: 48px 20px; }
  .assessment .assess-card { padding: 24px; }
  .quiz-result { padding: 26px 20px; }
  .programs__head { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .section-title,
  .hero h1,
  .steps__title,
  .programs__head h2,
  .faq h2,
  .benefits__intro .section-title,
  .assessment__body h2,
  .closing__cta h2 { font-size: 38px; letter-spacing: -0.5px; }
  .hero h1 { font-size: 40px; line-height: 1.05; }
  .faq-item summary { font-size: 16px; }
  .faq { background-image: none; }
}

/* Keep each mobile slide within the track and separate its content from its
   image. At this size a full-width card needs no desktop end spacer. */
@media (max-width: 768px) {
  .programs__track {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .programs__track::after { content: none; }
  .program-card {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
  }
  .program-card:not(.is-active) { transform: none; }
  .programs__track .program-card::before {
    background-position:
      right 12px bottom calc(clamp(190px, 55vw, 300px) - 80px),
      right -30px bottom calc(clamp(95px, 27.5vw, 150px) - 47.5px),
      left -24px bottom 10px;
  }
  .program-card__body {
    order: 1;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 28px 24px;
  }
  .program-card__body > * { min-width: 0; }
  .program-card__desc {
    width: 100%;
    max-width: none;
  }
  .program-card__tags { min-width: 0; }
  .program-card__tags .tag {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .program-card .btn { max-width: 100%; }
  .program-card__img {
    position: static;
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: clamp(190px, 55vw, 300px);
    opacity: 1;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ================================ AUTH =================================== */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px;
  background: var(--white);
}
.auth__aside {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 66px 72px;
  background-size: cover;
  background-position: center;
  min-height: 640px;
}
.auth__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(81,40,204,0) 0%, var(--purple-deep) 108%);
}
.auth__aside.is-signup::after { background: linear-gradient(180deg, rgba(106,72,229,0) 0%, var(--purple) 112%); }
.auth__aside > * { position: relative; z-index: 2; }
.auth__eyebrow {
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 16px;
  white-space: nowrap;
}
.auth__aside h2 { color: var(--white); font-size: 46px; line-height: 1; letter-spacing: -0.96px; margin-bottom: 16px; }
.auth__aside p { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: #e6deff; margin-bottom: 16px; max-width: 520px; }
.auth__list { display: flex; flex-direction: column; gap: 16px; }
.auth__list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 16px; color: var(--white); }
.auth__list svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--yellow); }

.auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth__form { width: 100%; max-width: 485px; display: flex; flex-direction: column; gap: 24px; }
.auth__head { text-align: center; }
.auth__head h1 { font-size: 36px; line-height: 1; color: var(--near-black); }
.auth__head p { margin-top: 8px; font-size: 16px; color: var(--body); }
.auth__fields { display: flex; flex-direction: column; gap: 12px; }
.auth__row { display: flex; gap: 12px; }
/* Sign-up gender choice (QA-FIX-02): a plain radio group, no custom JS. */
.auth__choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.auth__choice legend { padding: 0; margin-bottom: 4px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.auth__choice-opts { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.auth__row .field { flex: 1; }

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 20px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(28,27,26,0.6);
  background: var(--white);
}
.field:focus-within { box-shadow: inset 0 0 0 2px var(--purple); }
.field svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: #b3b3b3; stroke-width: 1.6; }
.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--near-black);
}
.field input::placeholder { color: #b3b3b3; }

/* Show/hide password control (QA-FIX-01). One wrapper for every password
   input on the site: the input keeps its surrounding form styling, the eye
   sits at the inline end, and only input.type ever changes. */
.pwfield { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.pwfield input { width: 100%; padding-inline-end: 44px; }
.pwfield__toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; padding: 0; }
.pwfield__toggle:hover { background: rgba(28,27,26,0.07); }
.pwfield__toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--purple); }
.pwfield__toggle svg { width: 19px; height: 19px; fill: none; stroke: #8a8a8a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pwfield__toggle:hover svg { stroke: var(--near-black); }
.pwfield__toggle .pwfield__eye-off { display: none; }
.pwfield__toggle.is-visible .pwfield__eye { display: none; }
.pwfield__toggle.is-visible .pwfield__eye-off { display: block; }

.auth__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkbox { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--body); cursor: pointer; }
.checkbox input { width: 20px; height: 20px; accent-color: var(--purple-deep); }
.link-strong { font-weight: 500; color: var(--purple-deep); }
.link-strong:hover { color: var(--purple); }

.divider { display: flex; align-items: center; gap: 16px; color: rgba(72,69,85,0.6); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--near-black);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.social-btn:hover { background: var(--cream); }
.social-btn svg { width: 20px; height: 20px; }
.auth__switch { text-align: center; font-weight: 500; font-size: 16px; color: var(--body); }

@media (max-width: 1023px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { min-height: 320px; padding: 40px; order: -1; }
  .auth__aside h2 { font-size: 34px; }
}
@media (max-width: 767px) {
  .auth { padding: 12px; }
  .auth__panel { padding: 28px 4px; }
  .auth__head h1 { font-size: 30px; }
  .auth__row { flex-direction: column; }
}

/* ============================ FLOW PAGES ================================= */
.flow { min-height: 100vh; padding: 80px 40px; display: flex; flex-direction: column; align-items: center; gap: 40px; background: var(--white); }
.flow__title { font-size: 56px; line-height: 60px; text-align: center; max-width: 715px; color: var(--near-black); }

/* Plan cards (Choose Your Support Path) */
.pricing-grid { display: flex; gap: 20px; width: 100%; max-width: 1240px; justify-content: center; flex-wrap: wrap; align-items: stretch; }
.plan-card { flex: 1 1 340px; max-width: 400px; border-radius: 24px; padding: 40px 25px 25px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.plan-card__icon { display: flex; align-items: center; justify-content: center; height: 46px; }
.plan-card--single .plan-card__icon svg { width: 46px; height: 46px; }
.plan-card--featured .plan-card__icon svg { width: 58px; height: 43px; }
.plan-card--membership .plan-card__icon svg { width: 51px; height: 46px; }
.plan-card h3 { font-size: 24px; line-height: 1.2; margin-top: 22px; }
.plan-card__tagline { font-family: var(--font-ui); font-size: 15px; line-height: 1.3; margin-top: 10px; }
.plan-card .btn { margin-top: auto; width: 100%; height: 48px; }

/* Feature tiles shared by all three plans */
.plan-tiles { display: flex; gap: 12px; width: 100%; margin-top: 36px; margin-bottom: 28px; align-items: stretch; }
.plan-tile { flex: 1; border-radius: 12px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.plan-tile svg { width: auto; height: 19px; flex-shrink: 0; }
.plan-tile span { font-family: var(--font-ui); font-size: 12px; line-height: 1.35; }

/* Single session — cream */
.plan-card--single { background: var(--card); box-shadow: inset 0 0 0 1px rgba(245,201,82,0.65); }
.plan-card--single h3 { color: var(--near-black); }
.plan-card--single .plan-card__tagline { color: var(--muted); }
.plan-card--single .plan-tile { background: #f4ede7; }
.plan-card--single .plan-tile span { color: var(--muted); }

/* 8-week circle — featured, raised above the other two */
.plan-card--featured { background: #f4f1ff; box-shadow: inset 0 0 0 1px rgba(106,72,229,0.45); margin-block: -32px; }
.plan-card--featured h3 { color: var(--near-black); }
.plan-card--featured .plan-card__tagline { color: var(--muted); }
.plan-card--featured .plan-tiles { margin-top: 20px; }
.plan-card--featured .plan-tile { background: #eae3ff; }
.plan-card--featured .plan-tile span { color: var(--body); }

.plan-consistency { width: 100%; margin-top: 28px; padding: 20px 18px; border-radius: 12px; background: #eee8ff; display: flex; flex-direction: column; gap: 14px; }
.plan-consistency__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple-deep); }
.plan-consistency__head strong { font-weight: 700; }
.plan-track { position: relative; display: flex; align-items: center; justify-content: space-between; height: 12px; }
.plan-track::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: #d5c9fa; }
.plan-track__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #b3a1ef; }
.plan-track__dot.is-end { width: 11px; height: 11px; background: var(--purple-deep); }
.plan-group { display: flex; align-items: center; gap: 10px; }
.plan-group span { font-family: var(--font-ui); font-size: 13px; color: var(--body); }
.plan-avatars { display: flex; align-items: center; flex-shrink: 0; }
.plan-avatars:empty { display: none; }
.plan-avatars img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #eee8ff; }
.plan-avatars img + img { margin-left: -9px; }

/* Ongoing membership — solid purple */
.plan-card--membership { background: var(--purple); }
.plan-card--membership h3 { color: var(--white); }
.plan-card--membership .plan-card__tagline { color: #e6deff; }
.plan-card--membership .plan-tile { background: rgba(255,255,255,0.14); }
.plan-card--membership .plan-tile span { color: #cbbeff; }

/* Once the three plans stop sitting on one row, the featured card stops being raised. */
@media (max-width: 1139px) {
  .plan-card--featured { margin-block: 0; }
}

@media (max-width: 480px) {
  .plan-tiles { flex-direction: column; }
  .plan-tile { flex-direction: row; align-items: center; text-align: start; padding: 12px 14px; gap: 12px; }
}

/* Program cards (Select Group Program) */
.circl-grid { display: flex; gap: 20px; width: 100%; max-width: 1240px; justify-content: center; flex-wrap: wrap; align-items: stretch; }
.circl-card { flex: 1 1 340px; max-width: 400px; background: var(--white); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(106,72,229,0.5), 0 4px 25px rgba(0,0,0,0.15); padding: 15px; display: flex; flex-direction: column; }
.circl-card__img { border-radius: 35px; height: 224px; width: 100%; object-fit: cover; }
.circl-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.circl-card h3 { font-size: 24px; color: var(--near-black); }
.circl-card__role { font-family: var(--font-alt); font-weight: 500; font-size: 15px; color: var(--purple); }
.circl-card__desc { font-size: 15px; line-height: 1.5; color: var(--body); }
.circl-card__price { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-end; }
.circl-card__price small { font-size: 14px; color: var(--body); }
.circl-card__price b { font-size: 24px; color: var(--purple-deep); }
.circl-card .btn { margin: 16px 24px 8px; }

/* Assessment */
.assess { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 29px; padding: 65px 40px; background: var(--white); }
.assess-card { position: relative; width: 100%; max-width: 819px; background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,0.05); padding: 48px; display: flex; flex-direction: column; gap: 32px; overflow: hidden; }
.assess-progress-label { font-family: var(--font-ui); font-size: 16px; color: var(--body); }
.assess-progress { display: flex; gap: 6px; width: 192px; margin-top: 8px; }
.assess-progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.assess-progress span.done { background: var(--purple-deep); }
.assess-card h1 { font-size: 36px; line-height: 1.1; color: var(--near-black); }
/* Breathing room between the question and its first answer option. */
.assess-card fieldset h1 { margin-bottom: 20px; }
.assess-options { display: flex; flex-direction: column; gap: 16px; }
.assess-option { display: flex; align-items: center; gap: 16px; min-height: 70px; padding: 20px; border-radius: 50px; box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 18px; color: var(--near-black); cursor: pointer; background: var(--white); }
.assess-option input { position: absolute; opacity: 0; }
.assess-option .radio { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px #797586; flex-shrink: 0; }
.assess-option:has(input:checked) { background: #e9e1ff; box-shadow: inset 0 0 0 1px var(--purple-deep); }
.assess-option:has(input:checked) .radio { background: var(--purple-deep); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px var(--purple-deep); }
.assess-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; }
.assess-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 16px; color: var(--body); background: none; border: 0; }
.assess-back svg { width: 16px; height: 16px; fill: currentColor; }
.assess-quote { font-family: var(--font-ui); font-style: italic; font-size: 16px; color: var(--body); text-align: center; max-width: 389px; }
/* ASSESSMENT-01 additions: the truthful non-medical note on the intro card,
   the outcome page's small quote reuse, and the explicit continue-anyway
   control rendered as a quiet link-style button. */
.preassess__note { margin-top: 18px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); max-width: 460px; }
.result-card .assess-quote { margin-top: 8px; font-size: 13px; max-width: 460px; }
.result-card form { margin: 0; }
.result-card .alink { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: 15px; color: var(--purple-deep); text-decoration: underline; }
.result-card .alink:hover { color: var(--purple); }

@media (max-width: 767px) {
  .flow { padding: 56px 20px; }
  .flow__title, .assess-card h1 { font-size: 32px; line-height: 1.1; }
  .plan-card { padding: 32px 18px 18px; }
  .plan-card .btn { padding: 0 12px; }
  .plan-consistency { padding: 16px 14px; }
  .assess { padding: 40px 16px; }
  .assess-card { padding: 28px; }
  .assess-option { font-size: 16px; }
}

/* ============================== BOOKING ================================= */
.book { max-width: 1030px; margin-inline: auto; padding: 80px 20px 100px; display: flex; flex-direction: column; gap: 24px; }
.book__intro { text-align: center; margin-bottom: 16px; }
.book__intro h1 { font-size: 56px; line-height: 60px; color: var(--near-black); }
.book__intro p { margin: 12px auto 0; max-width: 585px; font-size: 16px; color: var(--body); }
/* QA-FIX-04: the selection state form on the rebuilt Choose-your-Session
   page. Logical properties only, so RTL needs no counterpart. */
.book-picker { display: flex; flex-direction: column; gap: 16px; }
.book-picker__facilitator { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.book-picker__facilitator > label { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--near-black); }
.book-picker__facilitator .book-select { min-width: 260px; }
.session-card__spots .offering__code { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: .4px; }
/* No avatar field exists on a facilitator profile: a neutral initial circle
   stands in — never a stock photograph presented as a real person. */
.facilitator__initial { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: 16px; border-radius: 50%; background: #eef2ff; color: var(--purple-deep); font-family: var(--font-display); font-weight: 700; font-size: 34px; }
.book-summary { display: flex; gap: 24px; align-items: center; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 16px; }
.book-summary img { width: 267px; height: 197px; border-radius: 35px; object-fit: cover; flex-shrink: 0; }
.book-summary h2 { font-size: 24px; color: var(--near-black); margin-bottom: 8px; }
.book-summary p { font-size: 16px; color: var(--body); }
.book-section-title { font-size: 22px; color: var(--near-black); margin-top: 8px; }
.session-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.session-card { position: relative; background: var(--white); border-radius: 30px; box-shadow: inset 0 0 0 1px #e2e8f0; padding: 20px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.session-card input { position: absolute; opacity: 0; }
.session-card__mark { width: 40px; height: 40px; border-radius: 50%; background: #eef2ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.session-card__mark svg { width: 17px; height: 17px; }
/* inset-inline-end, not right: the tick mirrors correctly in Arabic. */
.session-card__radio { position: absolute; top: 20px; inset-inline-end: 20px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px #e2e8f0; display: flex; align-items: center; justify-content: center; }
.session-card__radio svg { width: 13px; height: 13px; fill: var(--white); opacity: 0; }
.session-card__row { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.session-card__row svg { width: 15px; height: 15px; flex-shrink: 0; }
.session-card__spots svg { width: 17px; height: 13px; }
.session-card__date { font-weight: 500; color: #0f172a; }
.session-card__time { color: var(--body); }
.session-card__spots { font-weight: 500; font-size: 14px; color: var(--purple-deep); }
.session-card:has(input:checked) { box-shadow: inset 0 0 0 2px #6366f1, 0 0 0 4px #eef2ff; }
.session-card:has(input:checked) .session-card__radio { background: var(--purple-deep); box-shadow: none; }
.session-card:has(input:checked) .session-card__radio svg { opacity: 1; }
.book-cols { display: grid; grid-template-columns: 505px 1fr; gap: 20px; align-items: start; }
.book-col { display: flex; flex-direction: column; gap: 12px; }
.facilitator { background: var(--white); border-radius: 40px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 24px; }
.facilitator__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.facilitator h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; color: #0f172a; }
.facilitator__verified { width: 16px; height: 16px; flex-shrink: 0; }
.facilitator__role { font-size: 16px; color: var(--body); }
.facilitator__exp { font-weight: 500; font-size: 16px; color: var(--purple-deep); margin: 4px 0 16px; }
.facilitator h4 { font-size: 16px; color: #0f172a; margin-bottom: 10px; }
.spec-list { display: flex; flex-direction: column; gap: 9px; }
.spec-list li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 15px; color: var(--body); }
.spec-list svg { width: 15px; height: 15px; flex-shrink: 0; fill: var(--purple-deep); }
.facilitator__about { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.facilitator__about h4 { margin-bottom: 8px; }
.facilitator__about p { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--body); }
.chip-list { display: flex; flex-direction: column; gap: 10px; }
.chip { display: inline-flex; align-self: flex-start; padding: 6px 14px; border-radius: var(--r-pill); background: #eef2ff; color: var(--purple-deep); font-size: 14px; font-family: var(--font-ui); }
.included { background: var(--white); border-radius: 40px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 12px 24px; display: flex; flex-direction: column; }
.included__item { display: flex; align-items: center; gap: 16px; padding: 18px 4px; }
.included__item + .included__item { border-top: 1px solid var(--border); }
.included__item .ic { width: 48px; height: 48px; border-radius: 12px; background: #eef2ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* No fill/colour here: the supplied glyphs carry their own, and the Zoom icon
   is stroke-only — inheriting a fill would turn it into a solid block. */
.included__item .ic svg { width: auto; height: 18px; max-width: 22px; }
.included__item b { font-family: var(--font-ui); font-size: 16px; color: #0f172a; }
.included__item span { display: block; font-family: var(--font-ui); font-size: 14px; color: #64748b; }
.book-note { display: flex; align-items: center; gap: 16px; background: #eef2ff; box-shadow: inset 0 0 0 1px #e0e7ff; border-radius: 16px; padding: 16px; }
/* The supplied shield artwork includes its own purple rounded plate. */
.book-note .ic { width: 48px; height: 48px; flex-shrink: 0; display: flex; }
.book-note .ic svg { width: 48px; height: 48px; }
.book-note p { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--purple-deep); }
.book-note p span { display: block; font-weight: 400; color: #64748b; }
.book__cta { display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
  .book__intro h1 { font-size: 40px; line-height: 1.05; }
  .session-grid { grid-template-columns: 1fr; }
  .book-cols { grid-template-columns: 1fr; }
  .book-summary { flex-direction: column; align-items: stretch; }
  .book-summary img { width: 100%; }
  .book__cta { justify-content: stretch; }
  .book__cta .btn { width: 100%; }
}

/* ============================ RESULT / CONFIRM ========================== */
.result { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 80px 20px; background: var(--white); }
.result-card { position: relative; width: 100%; max-width: 819px; background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,0.05); padding: 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; overflow: hidden; }
.result-card h1 { font-size: 36px; line-height: 1.1; color: var(--near-black); max-width: 620px; }
.result-card p { font-size: 16px; line-height: 1.5; color: var(--body); max-width: 600px; }
.result-card--glow { background: radial-gradient(120% 90% at 0% 100%, rgba(70,206,153,0.12) 0%, rgba(255,255,255,0) 55%), var(--white); }
.mood-face { width: 93px; height: 93px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 3px #232333; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mood-face svg { width: 58px; height: 58px; }
/* Supplied face artwork carries its own disc, outline and sparks, so the
   CSS-drawn circle is cleared and the box just matches the artwork's viewBox. */
.mood-face--art { background: none; box-shadow: none; }
.mood-face--art svg { width: 100%; height: 100%; }
.mood-face--sad { width: 126px; height: 106px; }
.mood-face--happy { width: 148px; height: 112px; }
.rec-panel { width: 100%; max-width: 819px; }
.rec-panel h2 { display: flex; align-items: center; gap: 12px; font-size: 24px; color: var(--near-black); margin-bottom: 16px; }
.rec-panel h2 img { width: 22px; height: 23px; flex-shrink: 0; }
.rec-card { background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border); padding: 30px; display: grid; grid-template-columns: minmax(0, 1fr) 222px; gap: 36px; align-items: center; }
.rec-card__photo { width: 100%; height: 230px; border-radius: 12px; object-fit: cover; }
.rec-card h3 { font-size: 20px; color: #0f172a; }
.rec-card p { font-size: 16px; color: var(--body); text-align: start; margin-top: 8px; }
.rec-card__features { display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 32px; margin-top: 22px; }
.rec-card__features li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 15px; color: var(--near-black); }
.rec-card__features svg { justify-self: center; }
.rec-note { margin-top: 16px; padding: 16px; border-radius: 12px; background: rgba(81,40,204,0.05); text-align: center; font-weight: 500; color: var(--near-black); }

/* Receipt submitted (transfer methods awaiting review) */
.receipt-check { width: 84px; height: 84px; border-radius: 50%; background: #eee8ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.receipt-check svg { width: 40px; height: 40px; fill: var(--purple-deep); }
/* Decision 12A: what was actually submitted, on the receipt-received page. */
.receipt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; width: 100%; max-width: 620px; margin: 4px 0 0; padding: 20px 24px; border-radius: 14px; background: var(--card); text-align: start; }
.receipt-facts dt { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.receipt-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--near-black); word-break: break-word; }
.receipt-pending { padding: 14px 20px; border-radius: 10px; background: rgba(81,40,204,0.06); font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--purple-deep); }

@media (max-width: 767px) {
  .result-card { padding: 32px 24px; }
  .result-card h1 { font-size: 28px; }
  .rec-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .rec-card__photo { height: 200px; }
}

@media (max-width: 559px) {
  .rec-panel h2 { font-size: 20px; }
  .rec-card__features { grid-template-columns: minmax(0, 1fr); }
}

/* ====================== PAYMENT UNSUCCESSFUL ============================= */
/*
   Richer variant of .result-card: the intro stays centred, then two detail
   panels, a hold notice, the actions row and a support link. Panels are
   left-aligned, so they opt out of the card's centred text.
*/
/*
   Card decoration mapped from the supplied 819x854 artboard, which matches the
   card box 1:1. Two 256px circles sit mostly outside the card and are cropped
   by its overflow:hidden — lavender centred 33px in from the top-right, mint
   centred 33px from the left and 31px below the bottom edge. Both are 10%
   opacity as drawn, so they read as a tint rather than a visible blob. Their
   blur radii were in the truncated <defs>, so the falloff is approximated.
   .result-card--glow is deliberately not used here: this replaces it.
*/
.payfail {
  gap: 0;
  background:
    radial-gradient(circle 150px at calc(100% - 33px) 33px, rgba(230,222,255,0.10) 0%, rgba(230,222,255,0.10) 38%, rgba(230,222,255,0) 100%),
    radial-gradient(circle 150px at 33px calc(100% + 31px), rgba(119,250,194,0.10) 0%, rgba(119,250,194,0.10) 38%, rgba(119,250,194,0) 100%),
    var(--white);
}

/* Flat 91px disc behind the icon — no blur on this one in the source. The 47%
   offset lands its centre on the artboard's cy=99.5 rather than the box centre. */
.payfail__icon {
  width: 148px;
  height: 109px;
  flex-shrink: 0;
  background: radial-gradient(circle 45.5px at 50% 47%, rgba(81,40,204,0.05) 99%, transparent 100%);
}
.payfail h1 { margin-top: 10px; font-size: 30px; line-height: 1.2; max-width: 660px; }
.payfail > p { margin-top: 10px; font-size: 16px; line-height: 1.5; max-width: 665px; }

.payfail__grid { width: 100%; margin-top: 28px; display: grid; grid-template-columns: 1.44fr 1fr; gap: 18px; align-items: start; text-align: start; }

.payfail__panel { background: var(--white); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(28,27,26,0.10); padding: 24px; }
.payfail__panel h2 { font-size: 19px; letter-spacing: -0.2px; }
.payfail__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payfail__pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: var(--r-pill); background: #fdecec; font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: #ef4444; white-space: nowrap; }
.payfail__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* letter-spacing reset: the global h1-h4 rule sets -0.96px, far too tight for
   a 14px UI-font label. */
.payfail__panel h3 { margin-top: 22px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: 0; color: var(--near-black); }
.payfail__reasons { margin-top: 14px; display: grid; gap: 11px; }
.payfail__reasons li { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.payfail__reasons svg { justify-self: center; }

.payfail__saved { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: rgba(81,40,204,0.06); font-family: var(--font-ui); font-size: 13px; line-height: 1.55; color: var(--body); }
.payfail__saved svg { margin-top: 1px; }
.payfail__saved b { color: var(--purple-deep); }

.payfail__who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.payfail__who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.payfail__who div { min-width: 0; display: flex; flex-direction: column; }
.payfail__who span { font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--purple-deep); }
.payfail__who b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--near-black); }

.payfail__meta { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(28,27,26,0.10); display: grid; gap: 12px; }
.payfail__meta li { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 14px; color: var(--near-black); }
.payfail__meta svg { width: 16px; height: 16px; justify-self: center; }

.payfail__total { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(28,27,26,0.10); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.payfail__total b { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--purple-deep); }

/* max-width reset: .result-card p caps paragraphs at 600px, but this notice
   is a full-width bar. */
.payfail__hold { display: flex; align-items: center; gap: 12px; width: 100%; max-width: none; margin-top: 18px; padding: 18px 20px; border-radius: 12px; background: var(--card); font-family: var(--font-ui); font-size: 14px; color: var(--near-black); text-align: start; }
.payfail__hold svg { flex-shrink: 0; }

.payfail__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.payfail__actions .btn { height: 52px; padding: 0 28px; }
.payfail__actions .btn--outline { box-shadow: inset 0 0 0 1px rgba(28,27,26,0.18); }
.payfail__actions .btn svg { flex-shrink: 0; }

.payfail__help { margin-top: 18px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--purple-deep); }
.payfail__help:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .payfail h1 { font-size: 24px; }
  .payfail__grid { grid-template-columns: minmax(0, 1fr); }
  .payfail__panel { padding: 20px; }
  .payfail__hold { align-items: flex-start; }
  /* .btn is nowrap, so give each action its own row rather than overflow. */
  .payfail__actions { flex-direction: column; align-items: stretch; }
}

/* ===================== ASSESSMENT RESULT — NON-SUITABLE ================== */
/* Two panels side by side; the other three .result pages stay single-column. */
.result--split { justify-content: center; }
.nonfit { width: 100%; max-width: 1250px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }

.nonfit__verdict { max-width: none; border-radius: 16px; padding: 56px 48px; justify-content: center; background: radial-gradient(120% 90% at 0% 100%, rgba(70,206,153,0.12) 0%, rgba(255,255,255,0) 55%), var(--white); }
.nonfit__verdict h1 { font-size: 30px; line-height: 1.25; max-width: 520px; }
.nonfit__verdict p { font-size: 15px; max-width: 440px; }

.nonfit__rec { background: var(--card); border-radius: 16px; padding: 48px; display: flex; flex-direction: column; gap: 18px; }
.nonfit__rec h2 { font-size: 20px; color: var(--near-black); }
.nonfit__therapist { display: flex; align-items: center; gap: 28px; margin: 12px 0 6px; }
.nonfit__avatar { width: 150px; height: 150px; flex-shrink: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #b5b3b3; }
.nonfit__who { min-width: 0; }
.nonfit__who h3 { font-size: 22px; letter-spacing: 0; color: var(--near-black); }
.nonfit__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nonfit__tags li { padding: 5px 12px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 11px; color: var(--muted); white-space: nowrap; }
.nonfit__rating { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--font-ui); font-size: 13px; color: var(--near-black); }
.nonfit__stars { display: inline-flex; align-items: center; gap: 2px; }
.nonfit__stars svg { width: 13px; height: 13px; fill: var(--purple-deep); }
.nonfit__note { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 10px; background: rgba(81,40,204,0.06); font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--near-black); }
.nonfit__contact a { font-weight: 700; color: var(--purple-deep); text-decoration: underline; }
.nonfit__whatsapp { display: inline-flex; flex-shrink: 0; }
.nonfit__whatsapp svg { width: 22px; height: 22px; }
.nonfit__rec .btn { margin-top: auto; width: 100%; height: 52px; }
/* QA-FIX-04: the recommendation is a CIRCL, not a therapist — its real
   catalogue cover replaces the prototype's fake avatar/rating block. */
.nonfit__cover { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; }
.nonfit__desc { margin-top: 12px; font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--body); }
.nonfit__continue { margin-top: 14px; text-align: center; }
.nonfit__continue .alink { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: 14px; color: var(--purple-deep); text-decoration: underline; }
.nonfit__continue .alink:hover { color: var(--purple); }

@media (max-width: 1023px) {
  .nonfit { grid-template-columns: 1fr; }
  .nonfit__verdict { padding: 40px 32px; }
  .nonfit__rec { padding: 32px; }
}

@media (max-width: 767px) {
  .nonfit__verdict h1 { font-size: 24px; }
  .nonfit__rec { padding: 24px 20px; }
  .nonfit__therapist { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nonfit__avatar { width: 110px; height: 110px; }
}

/* ============================== PAYMENT ================================= */
.pay { max-width: 1288px; margin-inline: auto; padding: 60px 24px 100px; }
.pay-card { background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border), 0 8px 40px rgba(0,0,0,0.06); padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 40px; align-items: start; }
.pay h2 { font-size: 22px; color: var(--near-black); margin-bottom: 24px; }

.pay-order,
.pay-form { min-width: 0; }
.pay-order__img { width: 100%; height: 320px; object-fit: cover; border-radius: 12px; }
.pay-order h2 { margin: 26px 0 22px; }
.pay-order__rows { display: flex; flex-direction: column; }
.pay-order__rows > div { padding: 14px 0; border-top: 1px solid var(--border); }
.pay-order__rows > div:first-child { border-top: 0; padding-top: 0; }
.pay-order__rows dt { font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.pay-order__rows dd { margin: 5px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--near-black); }
.pay-total { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 22px 24px; border-radius: 10px; background: var(--card); }
.pay-total span { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--near-black); }
.pay-total b { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--purple-deep); }

.pay-form { background: var(--card); border-radius: 16px; padding: 32px; }
.pay-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.pay-method { min-width: 0; min-height: 92px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; cursor: pointer; text-align: center; }
.pay-method input { position: absolute; opacity: 0; }
.pay-method__logo { display: flex; align-items: center; justify-content: center; height: 30px; }
.pay-method__logo svg { width: auto; height: 20px; }
.pay-method__logo img { width: auto; height: 100%; max-width: 48px; object-fit: contain; }
.pay-method__name { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--near-black); }
.pay-method:has(input:checked) { box-shadow: inset 0 0 0 2px var(--purple); }

/* Card and MyFawry are on the roadmap, not in the flow: they render muted and
   carry no radio at all, so there is nothing for the server to accept. The
   same treatment covers a real method left unconfigured in Site Settings. */
.pay-method.is-disabled { cursor: default; opacity: 0.55; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.pay-method.is-disabled .pay-method__logo img { filter: grayscale(1); }
.pay-method__soon { font-family: var(--font-ui); font-weight: 700; font-size: 10px; line-height: 1.2; color: var(--muted); }

/* Method-specific field sets: only the checked one is shown. */
.pay-body { min-height: 260px; }
.pay-fields { display: none; }
.pay-form:has(#pm-instapay:checked) .pay-fields--instapay,
.pay-form:has(#pm-vodafone_cash:checked) .pay-fields--vodafone_cash { display: block; }

/* What the participant does in their own banking app, in order. */
.pay-steps { margin: 0 0 18px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--body); }
.pay-steps li::marker { font-weight: 700; color: var(--purple-deep); }
.pay-hint { margin-bottom: 14px; font-family: var(--font-ui); font-style: italic; font-size: 13px; color: var(--muted); }
.pay-prefix { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--near-black); flex-shrink: 0; }

/* Read-only account to copy into the external app. */
.pay-input--copy { padding-inline-end: 6px; }
.pay-input--copy input { font-weight: 700; }
.pay-copy { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: #eee8ff; color: var(--purple-deep); font-family: var(--font-ui); font-weight: 700; font-size: 13px; transition: background-color 0.15s ease, color 0.15s ease; }
.pay-copy svg { width: 15px; height: 15px; flex-shrink: 0; }
.pay-copy:hover { background: var(--purple-deep); color: var(--white); }
.pay-copy.is-copied { background: var(--green); color: var(--near-black); }

/* Receipt upload: preview replaces the drop zone once a file is chosen. */
.pay-upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pay-upload__drop { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding: 16px 20px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--border); color: var(--purple-deep); cursor: pointer; transition: box-shadow 0.15s ease; }
.pay-upload__drop:hover { box-shadow: inset 0 0 0 1.5px var(--purple); }
.pay-upload__drop svg { width: 20px; height: 20px; flex-shrink: 0; }
.pay-upload__drop b { font-family: var(--font-display); font-size: 15px; color: var(--near-black); }
.pay-upload__drop span { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.pay-upload__input:focus-visible + .pay-upload__drop { box-shadow: inset 0 0 0 2px var(--purple), 0 0 0 3px rgba(106,72,229,0.3); }
.pay-upload__preview { border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); padding: 10px; }
.pay-upload__preview img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; background: var(--card); }
.pay-upload__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 0 4px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.pay-upload__meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-upload__remove { flex-shrink: 0; border: 0; background: none; padding: 0; font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--purple-deep); text-decoration: underline; }

.pay-field { min-width: 0; margin-bottom: 16px; }
/* Direct child only: the upload drop zone is also a label, and a descendant
   selector here would override its flex layout with display: block. */
.pay-field > label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--near-black); margin-bottom: 6px; padding: 0 4px; }
.pay-input { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; height: 56px; padding: 0 20px; border-radius: var(--r-pill); background: var(--white); }
.pay-input img { width: 31px; height: 16.5px; border-radius: 5px; flex-shrink: 0; }
.pay-input input { flex: 1; width: 100%; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-display); font-size: 16px; color: var(--near-black); }
.pay-input input::placeholder { color: #6b7280; }
.pay-row2 { display: flex; gap: 16px; }
.pay-row2 .pay-field { flex: 1; }
/* Every method in this phase is a manual transfer, so there is exactly one
   CTA and it submits the receipt. A charge button would need a gateway. */
.pay-actions { display: none; flex-direction: column; gap: 14px; margin-top: 8px; }
.pay-actions--receipt { display: flex; }
.pay-actions .btn { height: 56px; width: 100%; font-size: 15px; }
.pay-actions .btn--purple { box-shadow: 0 10px 15px -3px rgba(81,40,204,0.2); }
/* QA-FIX-04: when no manual method is operational the upload/submit controls
   stay in the layout but read and behave as disabled. */
.pay-field.is-disabled { opacity: .55; pointer-events: none; }
.pay-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.pay-secure svg { width: 13px; height: 15px; fill: var(--body); }

@media (max-width: 1023px) {
  .pay-card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pay-body { min-height: 0; }
}

@media (max-width: 767px) {
  .pay { padding: 32px 12px 72px; }
  .pay-card { padding: 16px; border-radius: 18px; }
  .pay-order__img { height: 220px; }
  .pay-form { padding: 20px 16px; }
  .pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-input { padding: 0 14px; }
}

@media (max-width: 479px) {
  .pay-row2 { flex-direction: column; gap: 0; }
}

@media (max-width: 360px) {
  .pay-input--copy { flex-direction: column; align-items: stretch; height: auto; padding-block: 10px; border-radius: 20px; }
  .pay-input--copy input { flex: none; height: 32px; }
  .pay-copy { width: 100%; justify-content: center; }
}

/* ==================== PROFESSIONAL PROFILE FORM ========================= */
.pform { max-width: 1240px; margin-inline: auto; padding: 60px 40px 100px; }
.pform__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.pform__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #ffdf93; color: #241a00; padding: 4px 16px; border-radius: var(--r-pill); font-size: 16px; }
.pform__head h2 { font-size: 24px; color: var(--near-black); }
.pform__head p { font-size: 18px; color: var(--body); }
.pform__grid { display: grid; grid-template-columns: 1fr 336px; gap: 26px; align-items: start; }
.pform__sections { display: flex; flex-direction: column; gap: 26px; }
.pform-section { background: var(--white); border-radius: 20px; box-shadow: var(--dash-card-shadow); padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.pform-section h3 { display: flex; align-items: center; gap: 11px; font-size: 16px; letter-spacing: -0.2px; color: var(--near-black); }
.pform-section h3 svg { flex-shrink: 0; max-width: 20px; max-height: 20px; }
.pform-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pfield { display: flex; flex-direction: column; gap: 8px; }
.pfield.full { grid-column: 1 / -1; }
.pfield label { font-size: 16px; color: var(--body); }
.pfield input, .pfield select, .pfield textarea { border: 0; border-radius: 24px; background: #f8f3f1; padding: 12px 16px; font-family: var(--font-display); font-size: 16px; color: var(--near-black); outline: none; height: 48px; }
.pfield input:focus, .pfield select:focus, .pfield textarea:focus { box-shadow: inset 0 0 0 2px var(--purple); }
.pfield textarea { height: auto; min-height: 120px; border-radius: 16px; resize: vertical; }
.expertise { display: flex; flex-wrap: wrap; gap: 10px; }
.expertise .chip { cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); background: var(--white); color: var(--body); }
.expertise .chip.is-on { background: #e9e1ff; color: var(--purple-deep); box-shadow: inset 0 0 0 1px var(--purple-deep); }
.pill-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.pill-toggle span { padding: 10px 18px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.pill-toggle span.is-on { background: var(--purple-deep); color: #fff; box-shadow: none; }
.day-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.day-grid span { min-width: 56px; text-align: center; padding: 10px 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 13px; color: var(--body); }
.day-grid span.is-on { background: var(--purple-deep); color: #fff; box-shadow: none; }
/* The aside is a stack now, not a single card: two cards then the two CTAs. */
.pform-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pform-card { background: var(--white); border-radius: 20px; box-shadow: var(--dash-card-shadow); padding: 24px; }
.pform-aside .btn { width: 100%; height: 52px; }
.pform-aside__draft { box-shadow: inset 0 0 0 1px var(--purple-deep); color: var(--purple-deep); }
.pform-aside__draft:hover { background: var(--purple-deep); color: var(--white); }

@media (max-width: 900px) {
  .pform__grid { grid-template-columns: 1fr; }
  .pform-aside { position: static; }
}
@media (max-width: 600px) {
  .pform-fields { grid-template-columns: 1fr; }
  .pform { padding: 48px 20px 80px; }
}

/* ============================ HOW IT WORKS ============================== */
.how-hero {
  margin: 24px 22px 0;
  padding: 80px 40px 90px;
  background: var(--purple) url("../images/steps-doodles.svg") no-repeat center / cover;
  border-radius: var(--r-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.how-hero h1 { color: var(--white); font-size: 56px; line-height: 1.05; max-width: 760px; }
.how-hero p { color: rgba(255, 255, 255, 0.95); font-family: var(--font-ui); font-size: 15px; line-height: 1.6; max-width: 640px; }

.how-steps { padding: 90px 0 60px; }
.how-steps__title { text-align: center; font-size: 48px; line-height: 1.1; color: var(--near-black); margin-bottom: 20px; }

.how-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  /* padding-block only: the shorthand would reset .container's padding-inline
     and drop these rows flush against the viewport edge. */
  padding-block: 50px;
}
/*
   Steps 2 and 4 are cards rather than plain rows, so they cannot use
   .container directly. Mirroring the container's geometry inset by the 22px
   card gutter keeps their content on the same left/right edges as the plain
   rows at every width, including the breakpoints where --gutter changes.
*/
.how-row--boxed {
  width: calc(100% - 44px);
  max-width: calc(var(--container) + var(--gutter) * 2 - 44px);
  margin: 40px auto;
  padding: 80px calc(var(--gutter) - 22px);
  background: var(--cream) url("../images/how-it-works/back-2&4.webp") no-repeat center / cover;
  border-radius: var(--r-lg);
}
.how-row__media img { width: 100%; height: auto; }

.how-step__badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: var(--r-pill);
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.how-row__copy > h2 { font-size: 38px; line-height: 1.1; letter-spacing: -0.5px; color: var(--near-black); margin: 16px 0 10px; }
.how-row__copy > h3 { font-size: 18px; letter-spacing: 0; color: var(--near-black); }
.how-row__copy > p { margin-top: 10px; font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--body); max-width: 480px; }
.how-list__lead { margin-top: 16px; font-weight: 700; font-size: 15px; color: var(--purple-deep); font-family: var(--font-display); }
.how-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.how-list li { position: relative; padding-inline-start: 14px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--body); }
.how-list li::before { content: "\2022"; position: absolute; inset-inline-start: 0; color: var(--body); }
.how-list b { color: var(--near-black); font-weight: 700; }
.how-row__copy .btn { margin-top: 24px; }

.how-row .benefit__body h3 { font-size: 18px; letter-spacing: 0; color: var(--ink); }
.how-row .benefit__body .how-list { margin-top: 6px; }

@media (max-width: 1023px) {
  .how-row { grid-template-columns: 1fr; gap: 40px; }
  .how-row__copy { order: 0; }
  .how-row__media { order: 1; max-width: 560px; }
}
@media (max-width: 767px) {
  .how-hero { margin: 20px 12px 0; padding: 56px 24px; }
  .how-hero h1 { font-size: 38px; line-height: 1.05; }
  .how-steps { padding: 64px 0 40px; }
  .how-steps__title { font-size: 34px; line-height: 1.1; }
  .how-row { padding-block: 32px; }
  .how-row--boxed { width: calc(100% - 24px); margin: 24px auto; padding: 48px 24px; }
  .how-row__copy > h2 { font-size: 28px; }
}

/* =========================== BUSINESS CIRCLE ============================ */
.biz-hero { border-radius: 30px; gap: 18px; }
.biz-pill { display: inline-block; padding: 7px 18px; border-radius: var(--r-pill); background: var(--yellow); color: var(--near-black); font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.biz-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 8px; }

.biz-choose { max-width: 1240px; margin: 0 auto; padding: 100px 40px 80px; text-align: center; }
.biz-choose h2 { font-size: 44px; line-height: 1.15; color: var(--near-black); margin-bottom: 44px; }
.biz-choose__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: start; }
.biz-choose-card { background: var(--white); border-radius: 14px; box-shadow: var(--ring); padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.biz-choose-card__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--yellow-light); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.biz-choose-card__icon--program svg { width: 20px; height: 20px; }
.biz-choose-card__icon--questions svg { width: 18px; height: 20px; }
.biz-choose-card__icon--payment svg { width: 28px; height: 14px; }
.biz-choose-card__icon--session svg { width: 22px; height: 20px; }
.biz-choose-card h3 { font-size: 17px; line-height: 1.25; letter-spacing: 0; color: var(--near-black); }
.biz-choose-card p { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--body); }

.biz-matters { margin: 0 22px; padding: 60px; background: var(--card); border-radius: var(--r-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.biz-matters__media { position: relative; }
.biz-matters__media img { width: 100%; height: auto; }
.biz-stat { position: absolute; background: var(--white); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 14px 20px; display: flex; flex-direction: column; gap: 2px; }
.biz-stat b { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--purple-deep); }
.biz-stat span { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.biz-stat--stress { top: 12%; left: -28px; }
.biz-stat--value { bottom: 10%; right: -20px; }
.biz-matters__copy h2 { font-size: 40px; line-height: 1.15; color: var(--near-black); }
.biz-matters__copy > p { margin-top: 16px; font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--body); }
.biz-points { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.biz-points h3 { font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: 0; color: var(--purple-deep); }
.biz-points p { margin-top: 4px; font-family: var(--font-ui); font-size: 13px; line-height: 1.55; color: var(--body); }

.biz-receives { max-width: 1240px; margin: 0 auto; padding: 100px 40px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.biz-receives__copy h2 { font-size: 44px; line-height: 1.15; color: var(--near-black); }
.biz-checklist { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.biz-checklist li { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.biz-checklist svg { width: 17px; height: 17px; flex-shrink: 0; fill: var(--purple-deep); }
.biz-receives__media { position: relative; }
.biz-receives__media img { width: 100%; height: auto; }
.biz-receives__decor { position: absolute; pointer-events: none; }
.biz-receives__decor--top { width: 60px; height: 58px; top: -22px; right: -18px; }
.biz-receives__decor--bottom { width: 64px; height: 64px; bottom: -20px; left: -22px; }

.biz-testimonial { max-width: 1240px; margin: 0 auto 40px; padding: 0 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* Native scroll-snap track, so touch swipe keeps working without JS. */
.biz-quotes { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.biz-quotes::-webkit-scrollbar { display: none; }
.biz-quote { flex: 0 0 100%; scroll-snap-align: start; background: var(--purple); border-radius: 30px; padding: 30px 36px 36px; }
.biz-quote__head { display: flex; align-items: center; gap: 14px; }
.biz-quote__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.biz-quote__who { display: flex; flex-direction: column; }
.biz-quote__who b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--white); }
.biz-quote__who span { font-family: var(--font-ui); font-size: 12px; color: #d9cdff; }
.biz-quote__mark { margin-inline-start: auto; width: 92px; height: 65px; flex-shrink: 0; }
.biz-quote blockquote { margin: 22px 0 0; padding: 32px 38px; border-radius: 20px; background: rgba(255,255,255,0.14); font-family: var(--font-ui); font-weight: 700; font-size: 15px; line-height: 1.7; color: var(--white); text-align: center; }
.biz-dots { display: flex; align-items: center; gap: 7px; }
.biz-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--r-pill); background: #d5cdf0; transition: width 0.2s ease, background-color 0.2s ease; }
.biz-dots button.is-active { width: 22px; background: var(--yellow); }
.biz-dots button:focus-visible { outline: 3px solid rgba(106, 72, 229, 0.4); outline-offset: 3px; }

.biz-process { max-width: 1240px; margin: 0 auto; padding: 80px 40px 100px; text-align: center; }
.biz-process h2 { font-size: 44px; line-height: 1.15; color: var(--near-black); }
.biz-process__lead { max-width: 560px; margin: 12px auto 44px; font-family: var(--font-ui); font-size: 13px; line-height: 1.6; color: var(--body); }
.biz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.biz-step { background: var(--white); border-radius: 14px; box-shadow: var(--ring); padding: 26px 20px 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.biz-step .n { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--purple-deep); color: var(--purple-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.biz-step h3 { font-size: 17px; color: var(--near-black); letter-spacing: 0; }
.biz-step p { font-family: var(--font-ui); font-size: 13px; color: var(--body); line-height: 1.5; }

.consult { max-width: 1152px; margin: 0 auto 100px; border-radius: 20px; box-shadow: var(--ring); overflow: hidden; display: grid; grid-template-columns: 0.72fr 1.28fr; }
.consult__aside { background: var(--purple-deep); color: #fff; padding: 40px 34px; display: flex; flex-direction: column; gap: 16px; }
.consult__aside h2 { color: #fff; font-size: 28px; line-height: 1.2; }
.consult__aside p { color: #e0d6ff; font-family: var(--font-ui); font-size: 13px; line-height: 1.6; }
.consult__contact { display: flex; flex-direction: column; gap: 6px; margin-top: auto; font-family: var(--font-ui); }
.consult__contact b { font-size: 14px; }
.consult__contact span { font-size: 13px; color: rgba(255,255,255,0.8); }
.consult__main { display: flex; flex-direction: column; }
.consult__main .flash { margin: 24px 34px 0; }
.consult__form { padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.consult__services { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.consult__services legend { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-bottom: 8px; padding: 0; }
.consult__services .checkbox { font-family: var(--font-ui); font-size: 13px; }
.consult__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consult__form .pfield input, .consult__form .pfield select, .consult__form .pfield textarea { background: var(--white); }
.consult__consent { font-size: 12px; line-height: 1.5; color: var(--body); align-items: flex-start; }
.consult__form .btn { margin-top: 2px; width: 100%; }
.consult__form .pfield label { font-size: 12px; color: var(--muted); }
.consult__form .pfield input,
.consult__form .pfield textarea { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 13px; height: 42px; }
.consult__form .pfield textarea { height: auto; min-height: 92px; }
.consult__form .pfield input:focus,
.consult__form .pfield textarea:focus { box-shadow: inset 0 0 0 2px var(--purple); }

@media (max-width: 1023px) {
  .biz-choose__grid,
  .biz-steps { grid-template-columns: repeat(2, 1fr); }
  .biz-matters,
  .biz-receives { grid-template-columns: 1fr; gap: 40px; }
  .biz-receives__copy { order: 0; }
  .biz-receives__media { order: 1; }
  .consult { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .biz-hero { border-radius: 24px; }
  .biz-choose { padding: 64px 20px 48px; }
  .biz-choose h2,
  .biz-receives__copy h2,
  .biz-process h2 { font-size: 30px; }
  .biz-choose__grid,
  .biz-steps { grid-template-columns: 1fr; }
  .biz-matters { margin: 0 12px; padding: 32px 20px; }
  .biz-matters__copy h2 { font-size: 28px; }
  .biz-stat { padding: 10px 14px; }
  .biz-stat b { font-size: 22px; }
  .biz-stat--stress { left: -8px; }
  .biz-stat--value { right: -6px; }
  .biz-receives { padding: 64px 20px; }
  .biz-receives__decor--top { width: 46px; height: 44px; top: -14px; right: -10px; }
  .biz-receives__decor--bottom { width: 48px; height: 48px; bottom: -14px; left: -12px; }
  .biz-testimonial { padding: 0 12px; margin-bottom: 32px; }
  .biz-quote { padding: 24px 20px 28px; border-radius: 24px; }
  .biz-quote blockquote { padding: 22px 18px; font-size: 14px; }
  .biz-quote__mark { width: 58px; height: 41px; }
  .biz-process { padding: 56px 20px 72px; }
  .consult { margin-inline: 12px; }
  .consult__aside,
  .consult__form { padding: 26px 20px; }
  .consult__row { grid-template-columns: 1fr; }
}

/* ================================ 404 ==================================== */
/* Reuses the .result / .result-card shell from the assessment-result pages. */
.notfound__logo { width: 132px; height: auto; }
.notfound__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--purple);
}

@media (max-width: 767px) {
  .notfound__code { font-size: 64px; }
}

/* ========================= FLOW PAGE DECORATIONS ========================= */
/*
   Shared background artwork for the sign-up → enrollment journey, opted into
   per page with .flow-decor. The shapes are wrapper background layers, so they
   paint above the wrapper's own background colour but beneath its content:
   they cannot overlap text, receive pointer events, or add scrollable width.
   Marketing pages and the 404 keep the global .page-doodles instead.
*/
body:has(.flow-decor) .page-doodles { display: none; }

.flow-decor { background-repeat: no-repeat; }

/* Auth: the photo aside fills the left column, so artwork stays off the right edge. */
.flow-decor--auth {
  background-image:
    url("../images/bg-loop-yellow.svg"),
    url("../images/bg-swoosh-purple.svg");
  background-position: right -130px top 30px, right -150px bottom 40px;
  background-size: 260px auto, 280px auto;
}

/* Support path / programs: placement follows the approved reference for this screen. */
.flow-decor--flow {
  background-image:
    url("../images/bg-loop-yellow.svg"),
    url("../images/bg-scribbles-1.svg"),
    url("../images/bg-swoosh-purple.svg");
  background-position: left -110px top 30px, right -60px top -40px, right -70px bottom -30px;
  background-size: 290px auto, 330px auto, 300px auto;
}

/* Assessment: wide gutters either side of the 819px card. */
.flow-decor--assess {
  background-image:
    url("../images/bg-scribbles-1.svg"),
    url("../images/bg-loop-yellow.svg"),
    url("../images/bg-swoosh-purple.svg");
  background-position: left -70px top 40px, right -90px top 80px, left -80px bottom 40px;
  background-size: 300px auto, 250px auto, 260px auto;
}

/* Result / confirmation: a centred card leaves both gutters open. */
.flow-decor--result {
  background-image:
    url("../images/bg-loop-yellow.svg"),
    url("../images/bg-scribbles-1.svg"),
    url("../images/bg-swoosh-purple.svg");
  background-position: right -80px top 50px, left -60px top 120px, right -60px bottom 30px;
  background-size: 270px auto, 320px auto, 280px auto;
}

/* Booking and payment are dense centred columns: one shape, kept inside the box. */
.flow-decor--book {
  background-image: url("../images/bg-loop-yellow.svg");
  background-position: right 0 top 10px;
  background-size: 200px auto;
}

.flow-decor--pay {
  background-image: url("../images/bg-scribbles-1.svg");
  background-position: right 0 top 0;
  background-size: 240px auto;
}

@media (max-width: 1239px) {
  .flow-decor--auth { background-image: none; }
}

@media (max-width: 1023px) {
  .flow-decor--book,
  .flow-decor--pay { background-image: none; }
  .flow-decor--flow,
  .flow-decor--assess,
  .flow-decor--result {
    background-image: url("../images/bg-scribbles-1.svg");
    background-position: right -90px top 0;
    background-size: 260px auto;
  }
}

@media (max-width: 767px) {
  .flow-decor { background-image: none; }
}

/* =========================== PROGRAM DETAIL ============================== */
.pdetail { max-width: 1288px; margin-inline: auto; padding: 60px 24px 100px; }
.pdetail__card { background: var(--white); border-radius: 24px; box-shadow: 0 8px 40px rgba(0,0,0,0.08); padding: 24px; }
.pdetail__hero { width: 100%; height: 552px; object-fit: cover; border-radius: 16px; }
.pdetail__body { padding: 24px; }
.pdetail__badge { display: inline-block; padding: 6px 14px; border-radius: var(--r-pill); background: var(--yellow); font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--near-black); }
.pdetail__body h1 { margin-top: 22px; font-size: 46px; line-height: 1.1; color: var(--near-black); }
.pdetail__intro { margin-top: 22px; max-width: 1000px; font-family: var(--font-ui); font-size: 15px; line-height: 1.75; color: var(--body); }

.pdetail__stats { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.pdetail-stat { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: var(--r-pill); background: var(--card); }
.pdetail-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
.pdetail-stat__icon--duration svg { width: 16px; height: 17px; }
.pdetail-stat__icon--session svg { width: 14px; height: 17px; }
.pdetail-stat__icon--group svg { width: 21px; height: 10px; }
.pdetail-stat__icon--rating svg { width: 18px; height: 17px; }
.pdetail-stat__text { display: flex; flex-direction: column; gap: 2px; }
.pdetail-stat__text small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.pdetail-stat__text b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--near-black); }

.pdetail__price { margin-top: 28px; display: flex; flex-direction: column; gap: 4px; }
.pdetail__price small { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.pdetail__price b { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--purple-deep); }

.pdetail__body h2 { margin-top: 26px; font-size: 21px; letter-spacing: 0; color: var(--near-black); }
.pdetail__about { margin-top: 12px; font-family: var(--font-ui); font-size: 15px; line-height: 1.75; color: var(--body); }
.pdetail__body .btn { margin-top: 34px; }

@media (max-width: 1023px) {
  .pdetail__hero { height: 380px; }
  .pdetail__body h1 { font-size: 36px; }
}

@media (max-width: 767px) {
  .pdetail { padding: 32px 12px 72px; }
  .pdetail__card { padding: 12px; border-radius: 18px; }
  .pdetail__hero { height: 240px; }
  .pdetail__body { padding: 16px 8px 8px; }
  .pdetail__body h1 { font-size: 28px; }
  .pdetail__stats { gap: 10px; }
  .pdetail-stat { padding: 10px 16px; flex: 1 1 44%; }
  .pdetail__body .btn { width: 100%; }
}

/* ============================ PRE-ASSESSMENT ============================= */
.preassess { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 80px 40px; }
.preassess__card { width: 100%; max-width: 1030px; background: var(--white); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--border), 0 4px 24px rgba(0,0,0,0.06); padding: 24px; display: flex; align-items: center; gap: 40px; }
.preassess__copy { flex: 1; min-width: 0; padding-block: 24px; padding-inline: 34px 0; }
.preassess__copy h1 { font-size: 34px; line-height: 1.2; color: var(--near-black); }
.preassess__copy > p { margin-top: 14px; max-width: 430px; font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--body); }
.preassess-points { margin-top: 30px; display: flex; flex-direction: column; gap: 19px; }
.preassess-points li { display: flex; align-items: center; gap: 14px; font-family: var(--font-ui); font-size: 15px; color: var(--near-black); }
.preassess-points .icon { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.preassess-points .icon svg { width: auto; height: 14px; max-width: 16px; }
.preassess__actions { margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
/* Collapses to a single column until the photo is supplied. */
.preassess__media { flex: 0 0 445px; }
.preassess__media:empty { display: none; }
.preassess__media img { width: 100%; height: 526px; object-fit: cover; border-radius: 16px; }

@media (max-width: 1023px) {
  .preassess__card { flex-direction: column; }
  .preassess__copy { padding: 8px 8px 0; }
  .preassess__media { flex: 0 0 auto; width: 100%; }
  .preassess__media img { height: 320px; }
}

@media (max-width: 767px) {
  .preassess { padding: 48px 16px; }
  .preassess__card { padding: 16px; gap: 24px; }
  .preassess__copy h1 { font-size: 26px; }
  .preassess__actions { gap: 16px; }
  .preassess__actions .btn { width: 100%; }
}

/* ============================ FLOW PAGE SHELL ============================ */
/*
   The footer reserves 320px of top padding for the yellow .closing__cta that
   overlaps it by -223px. Flow pages have no closing card, so that reservation
   renders as dead purple space — they get a normal footer padding instead.
*/
body:has(.flow-decor) .site-footer { padding-top: 72px; }

/*
   On flow pages the shell parks off-screen and slides back in when the
   pointer reaches the top or bottom edge, so the journey fills the viewport.
   Gated behind (hover: hover): touch devices have no hover, and navigation
   that can never be revealed is navigation that is gone. :focus-within keeps
   both bars reachable by keyboard.
*/
@media (hover: hover) {
  body:has(.flow-decor) .site-header,
  body:has(.flow-decor) .site-footer {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 40;
    transition: transform 0.28s ease;
  }
  body:has(.flow-decor) .site-header { top: 0; transform: translateY(-100%); }
  body:has(.flow-decor) .site-footer { bottom: 0; transform: translateY(100%); }

  /* Invisible strip just past each edge — while a bar is parked this is the
     only part of it on screen, and it is what the pointer has to reach. */
  body:has(.flow-decor) .site-header::after,
  body:has(.flow-decor) .site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 26px;
  }
  body:has(.flow-decor) .site-header::after { top: 100%; }
  body:has(.flow-decor) .site-footer::before { bottom: 100%; }

  body:has(.flow-decor) .site-header:hover,
  body:has(.flow-decor) .site-header:focus-within,
  body:has(.flow-decor) .site-footer:hover,
  body:has(.flow-decor) .site-footer:focus-within { transform: translateY(0); }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  body:has(.flow-decor) .site-header,
  body:has(.flow-decor) .site-footer { transition: none; }
}

/* ========================= MY SPACE (DASHBOARD) ========================== */
/*
   First dashboard screen, so this block sets the conventions later dashboard
   modules must reuse: .dash-header for the member top bar, .dash__grid for the
   main + sidebar shell, .dash-card for every panel surface, and .dash-h /
   .dash-sub for section headings. The marketing doodle layer is suppressed
   here — the dashboard is a working surface, not a marketing page.
*/
body:has(.dash) .page-doodles { display: none; }

/* ------------------------------ Header ---------------------------------- */
.dash-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}
.dash-header .container { display: flex; align-items: center; gap: 16px; height: 120px; }
.dash-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: inherit; }
.dash-brand img { width: 34px; height: 36px; }
.dash-brand span { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.5px; color: var(--ink); }
/* This bar carries five links, four tools, the locale pill, the user block
   and a logout on ONE row, so its nav runs a step smaller and tighter than
   the marketing header's. The measured widest-desktop total (1240px content
   box) is what these numbers are tuned against: at 15px/22px the row needed
   1276px and dropped "Business Circl" onto a second line. nowrap makes that
   second row structurally impossible rather than merely unlikely. */
.dash-header .main-nav { margin-inline: 18px auto; }
.dash-header .main-nav ul { gap: 8px 18px; flex-wrap: nowrap; }
.dash-header .main-nav a { font-size: 14px; }

.dash-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dash-tool {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--body);
  transition: box-shadow 0.15s ease, color 0.15s ease;
}
.dash-tool:hover { box-shadow: inset 0 0 0 1px var(--purple); color: var(--purple-deep); }
.dash-tool:focus-visible { outline: 3px solid rgba(106,72,229,0.4); outline-offset: 2px; }

/* Logical padding/border: in Arabic the divider belongs on the other side. */
.dash-user { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-inline-start: 16px; border-inline-start: 1px solid var(--border); color: inherit; }
.dash-user__text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
/* A long real name is bounded, never allowed to squeeze the nav. */
.dash-user__text b { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--purple-deep); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-user__text span { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dash-user img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* --------------------------- Page shell --------------------------------- */
/* Card surfaces are shadow-only — no ring. Borders stay on form controls,
   chips, buttons and row separators, where the design does show a line. */
.dash { padding: 28px 0 100px; }

.dash-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.dash-welcome h1 { font-size: 28px; letter-spacing: -0.5px; }
.dash-welcome p { margin-top: 8px; font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--body); }
.dash-welcome__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.dash-welcome__actions .btn { height: 48px; padding: 0 26px; }

.dash__grid { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 21px; align-items: start; }
.dash__main { display: grid; gap: 26px; min-width: 0; }
/* An explicit minmax(0, 1fr) track, never the implicit `auto` one: an auto
   track sizes to its widest card's MAX-CONTENT, so a horizontal scroller
   in any sidebar card would size the column to all of its slides laid out
   side by side and push every card in the aside past the container. */
.dash__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; }

/* Stacked full-width cards on the single-column dashboard pages (reviews,
   and anything else outside the two-column .dash__grid): the same 26px
   rhythm .dash__main gives its cards, instead of leaving them flush. */
.dash-stack { display: grid; gap: 26px; min-width: 0; }

.dash-card {
  min-width: 0;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--dash-card-shadow);
  padding: 24px;
}
/* Both follow the supplied type spec exactly: display face, 100% leading,
   zero tracking — so they override the global h1-h4 -0.96px letter-spacing. */
.dash-h { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 0; color: var(--purple-deep); }
.dash-sub { margin-top: 10px; font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: 0; color: var(--body); }
/* A held place has no joining link yet — the line says so rather than
   leaving a gap where a Zoom button will later appear. */
.dash-sub--placeholder { font-family: var(--font-ui); font-size: 13px; font-style: italic; line-height: 1.5; color: var(--muted); }

.dash-plus { width: 13px; height: 13px; flex-shrink: 0; }

/* ----------------------------- Profile ---------------------------------- */
.dash-profile { display: flex; align-items: center; gap: 28px; }
.dash-profile__figure { position: relative; flex-shrink: 0; }
.dash-profile__avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: #efe7fb; }
/* Neutral fallback (QA-FIX-02): the participant's own initials, used when
   they preferred not to say and for rows that predate the question. Sized
   inline by the partial so one rule serves every surface. */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #efe7fb;
  color: var(--purple-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.02em;
  -webkit-user-select: none;
  user-select: none;
}

/* Mood section heading row: title on the inline start, history link on the
   inline end, so RTL swaps them with no direction-specific rule. */
.dash-mood__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-mood__head .btn { flex-shrink: 0; }
/* The mood glyph in the history table: decorative, so it keeps its own
   colour emoji rendering and never inherits the cell's text colour. */
.mood-glyph { margin-inline-end: 6px; font-size: 17px; line-height: 1; }

/* Empty sessions state: .dash-sub sets no bottom space, so the CTA sat flush
   against the sentence. */
.dash-sessions--empty .btn { margin-top: 18px; }
/* Same flush problem on the support-group card, where Join on Zoom is a
   direct child rather than wrapped in a .dash-sub paragraph. */
.dash-sessions > .btn { margin-top: 18px; }
.dash-profile__badge {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  padding: 3px 13px;
  border-radius: var(--r-pill);
  background: var(--green);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #08301f;
  white-space: nowrap;
}
.dash-profile__body { min-width: 0; }
.dash-profile h2 { font-size: 20px; letter-spacing: -0.3px; }
.dash-profile__since { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.dash-profile__since svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-profile__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dash-profile__actions .btn { height: 44px; padding: 0 22px; font-size: 13px; letter-spacing: 0.3px; }
.dash-profile__actions .btn--outline { box-shadow: inset 0 0 0 1px var(--border); color: var(--near-black); }
.dash-profile__actions .btn--outline:hover { background: var(--near-black); color: var(--white); }
.dash-profile__actions .btn svg { width: 13px; height: 16px; flex-shrink: 0; }

/* ------------------------- Upcoming sessions ---------------------------- */
.dash-sessions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
/* Scoped to My Space only — .atable-wrap is shared with the admin screens,
   which keep their own spacing. Gives the programme schedule table air below
   the Join on Zoom control. */
.dash-sessions .atable-wrap { margin-top: 18px; }
.sess-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--dash-card-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sess-card__img { width: 100%; height: 205px; border-radius: 12px; object-fit: cover; }
.sess-card__meta { display: grid; gap: 12px; }
.sess-card__row { display: flex; align-items: center; gap: 12px; }
.sess-card__row svg { width: 17px; height: 17px; flex-shrink: 0; }
.sess-card__row > span { display: flex; flex-direction: column; min-width: 0; font-family: var(--font-ui); line-height: 1.35; }
.sess-card__row small { font-size: 11px; color: var(--muted); }
.sess-card__row b { font-size: 13px; color: var(--near-black); }
.sess-card .btn { width: 100%; height: 44px; padding: 0 14px; font-size: 13px; letter-spacing: 0.3px; }
.sess-card .btn--outline { box-shadow: inset 0 0 0 1px var(--near-black); margin-top: auto; }
.sess-card .btn svg { flex-shrink: 0; }
/* QA: the under-review booking card. The pill stays visibly a control but
   reads disabled; the whole card keeps the approved max width even when it is
   the only child of the grid. */
.sess-card--review { max-width: 300px; }
.sess-card--review .btn--outline:disabled {
  opacity: .6; cursor: not-allowed;
  box-shadow: inset 0 0 0 1px var(--near-black); background: var(--white); color: var(--near-black);
  /* The placeholder sentence is longer than a normal CTA: smaller type, no
     letter-spacing and tighter padding keep it on one line inside the pill. */
  font-size: 11px; letter-spacing: 0; padding: 0 10px; white-space: nowrap;
}

/* Completed variant: same card, plus a status badge over the image. */
/* Upcoming Sessions cards: a title line above the date/time rows, and the
   in-section back control for the detail view. */
.sess-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.sess-card__title small { font-family: var(--font-ui); font-weight: 400; font-size: 12px; color: var(--muted); }
.upcoming-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: 14px; }
.upcoming-back .arrow { width: 14px; height: 14px; fill: currentColor; }

.sess-card__figure { position: relative; }
.sess-card__badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple-deep);
}

/* --------------------- Insights + billing row --------------------------- */
.dash-row2 { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 20px; align-items: start; }

.dash-insights__head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.dash-chip { padding: 5px 14px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 11px; color: var(--muted); white-space: nowrap; }
.insight-list { margin-top: 14px; display: grid; gap: 14px; }
.insight { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 12px; background: #f3eefe; }
.insight__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e2d7fb; }
/* Width only — the supplied glyphs are 27x24 and 26x23, so height stays derived. */
.insight__ic svg { width: 21px; height: auto; }
.insight h3 { font-size: 15px; letter-spacing: -0.2px; }

/* Session Insights: a pack groups its items under one real context header
   (Circl / session / facilitator), because a participant may hold several
   Circls with several facilitators at once. */
.insight-pack { margin-top: 14px; }
.insight-pack + .insight-pack { margin-top: 18px; }
.insight-pack__head { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.insight-pack__circl { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.2px; color: var(--ink); margin: 0; }
.insight-pack__session { margin: 4px 0 0; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.insight-pack__meta { margin: 6px 0 0; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.insight-pack .insight-list { margin-top: 14px; }

/* The curated icon picker. A real radio group: the tile is the visual, the
   input stays focusable, and the selected state is a ring plus a label —
   never colour alone. Wraps rather than scrolling on narrow screens. */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 8px; }
.icon-picker__option { display: block; cursor: pointer; }
.icon-picker__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.icon-picker__tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 12px; background: #f3eefe;
  box-shadow: inset 0 0 0 1px transparent;
  color: var(--purple-deep); text-align: center;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.icon-picker__tile svg { width: 22px; height: 22px; }
.icon-picker__name { font-family: var(--font-ui); font-size: 11px; line-height: 1.3; color: var(--body); }
.icon-picker__option:hover .icon-picker__tile { background: #e9e1ff; }
.icon-picker__option input:checked + .icon-picker__tile { background: #e2d7fb; box-shadow: inset 0 0 0 2px var(--purple-deep); }
.icon-picker__option input:focus-visible + .icon-picker__tile { outline: 3px solid rgba(106,72,229,0.4); outline-offset: 2px; }

.insight-edit { border: 0; padding: 0; margin: 22px 0 0; }
.insight-edit legend { padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.insight-edit__label { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--near-black); }
.insight-edit__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }

html[dir="rtl"] .insight-pack__session,
html[dir="rtl"] .insight-pack__meta,
html[dir="rtl"] .icon-picker__name { font-family: var(--font-ar); }
.insight p { margin-top: 4px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--body); }

.billing { margin-top: 14px; border-radius: 12px; box-shadow: var(--dash-card-shadow); background: var(--white); overflow: hidden; }
/* The empty state is a bare paragraph inside the card, so it needs the
   padding the table cells below carry — otherwise it sits flush against the
   card edges. Same markup on the dashboard block and the full history page. */
.billing > .dash-sub { margin: 0; padding: 20px 18px; }
.billing table { width: 100%; border-collapse: collapse; }
.billing th {
  background: var(--purple-deep);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: start;
  padding: 14px 18px;
  white-space: nowrap;
}
.billing td { padding: 20px 18px; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: 13px; color: var(--near-black); }
.billing tbody tr:first-child td { border-top: 0; }

/* -------------------------- Mood tracking ------------------------------- */
.mood { margin-top: 18px; }
.mood__set { border: 0; padding: 0; margin: 0; }
.mood__q { padding: 0; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.mood__opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.mood-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.mood-opt:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.mood-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mood-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--purple-deep); }
.mood-opt:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* Only the hovered / focused / selected face warms up; the rest stay grey.
   Reuses the yellow gradient already defined inside the Very Happy artwork,
   so no extra asset is needed — the discs share one 48x48 user space. */
.mood-opt:hover .mood-disc,
.mood-opt:focus-within .mood-disc,
.mood-opt:has(input:checked) .mood-disc {
  fill: url(#paint0_radial_266_410);
  fill-opacity: 1;
}

/* Very Happy ships a permanently warm disc plus pink mouth, blushes and a
   spark, so it needs muting at rest for all five to read the same. Its own
   gradient is what the active rule above paints with, hence the grey borrow. */
.mood-opt--joy .mood-disc { fill: url(#paint0_radial_266_427); fill-opacity: 0.2; }
.mood-opt--joy .mood-joy-tint { fill: #232333; stroke: #232333; }
.mood-opt--joy .mood-joy-extra { opacity: 0; }

.mood-opt--joy:hover .mood-joy-tint,
.mood-opt--joy:focus-within .mood-joy-tint,
.mood-opt--joy:has(input:checked) .mood-joy-tint { fill: #F72859; stroke: #F72859; }

.mood-opt--joy:hover .mood-joy-extra,
.mood-opt--joy:focus-within .mood-joy-extra,
.mood-opt--joy:has(input:checked) .mood-joy-extra { opacity: 1; }
/* Each supplied face carries its own disc, so no CSS-drawn circle behind it. */
.mood-opt__face { display: grid; place-items: center; width: 42px; height: 42px; }
.mood-opt__face svg { width: 100%; height: 100%; }
.mood-opt__label { font-family: var(--font-ui); font-size: 12px; color: var(--body); text-align: center; }

.mood__label { display: block; margin-top: 22px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.mood textarea {
  display: block;
  width: 100%;
  min-height: 118px;
  margin-top: 10px;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--border);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--near-black);
  resize: vertical;
}
.mood textarea::placeholder { color: var(--muted); }
.mood textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--purple-deep); }
.mood > .btn { width: 100%; height: 52px; margin-top: 20px; }

/* ------------------------- Therapy progress ----------------------------- */
.progress__inner { margin-top: 16px; padding: 22px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(28,27,26,0.10); text-align: center; }
/* No confirmed programme: an honest card, not a ring at 0% (QA-FIX-02). */
.progress__inner--empty { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.progress__empty { font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--body); }
.progress__ring { position: relative; width: 148px; height: 148px; margin-inline: auto; }
.progress__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress__ring circle { fill: none; stroke-width: 14; }
.progress__track { stroke: #eae8ef; }
.progress__value { stroke: var(--green); stroke-linecap: round; }
.progress__num { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.progress__num b { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--near-black); }
.progress__num span { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.progress h3 { margin-top: 16px; font-size: 19px; line-height: 1.25; letter-spacing: -0.3px; }
.progress__legend { display: grid; gap: 8px; margin-top: 14px; text-align: start; }
.progress__legend li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 13px; color: var(--body); }
.progress__legend b { color: var(--near-black); }
.progress__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.progress__dot--done { background: var(--green); }
.progress__dot--left { background: #e0dfe6; }
.progress .btn { width: 100%; height: 46px; margin-top: 18px; font-size: 13px; letter-spacing: 0.3px; }


/* Therapy Progress carousel: one programme at a time when several run at
   once. A native scroll-snap track (touch swipe free, JS only for the
   arrows/dots), and with a single programme it renders as the plain card it
   always was — no track, no controls. */
/* width:100% + min-width:0 all the way down, exactly as .biz-quotes does:
   without them the track's max-content width (every slide side by side) is
   what the fixed 288px sidebar column measures itself against, and the aside
   pushes out of the container. */
.progress-carousel { margin-top: 16px; min-width: 0; }
.progress-carousel__viewport { display: flex; width: 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.progress-carousel__viewport::-webkit-scrollbar { display: none; }
.progress-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.progress-carousel__slide .progress__inner { margin-top: 12px; }
.progress-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.progress-carousel__arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--purple-deep);
  cursor: pointer;
}
.progress-carousel__arrow svg { width: 11px; height: 11px; fill: currentColor; }
.progress-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.progress-carousel__arrow:focus-visible { outline: 2px solid var(--purple-deep); outline-offset: 2px; }
.progress-carousel__dots { display: flex; align-items: center; gap: 8px; }
.progress-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; background: #e0dfe6; cursor: pointer; }
.progress-carousel__dots button.is-active { background: var(--purple-deep); }
.progress-carousel__dots button:focus-visible { outline: 2px solid var(--purple-deep); outline-offset: 3px; }

/* The arrows point in reading order, so Arabic mirrors the glyphs. */
[dir="rtl"] .progress-carousel__arrow svg { transform: scaleX(-1); }

.history__empty { display: block; font-family: var(--font-ui); font-size: 13px; line-height: 1.6; color: var(--muted); }

/* -------------------------- Circle history ------------------------------ */
.history h2,
.settings h2 { font-size: 16px; letter-spacing: -0.2px; }
.history__list { margin-top: 16px; }
.history__list li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.history__list li:last-child { padding-bottom: 0; }
.history__list li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--border); }
.history__dot { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--purple-deep); }
.history__dot svg { width: 12px; height: 12px; fill: var(--white); }
.history__list b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--near-black); }
.history__list small { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.history__list .is-active small { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple-deep); }

/* Journal photos already attached to an entry, shown in the editor so each
   one can be removed. The favourite control is a real form button now, so it
   inherits the heart styling the checkbox used to carry. */
.jup__current { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.jup__current li { display: grid; gap: 6px; justify-items: center; }
.jup__current img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.jup__remove { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.jcard__fav button { display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--muted); }
.jcard__fav button.is-on { color: #F72859; }
.jcard__fav button:focus-visible { outline: 2px solid var(--purple-deep); outline-offset: 3px; border-radius: 50%; }
.jent__photos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.jent__photos img { width: 150px; height: 150px; border-radius: 12px; object-fit: cover; }
.jent__acts { display: grid; gap: 10px; }
.jent__acts .btn { width: 100%; }

/* ----------------------------- Settings --------------------------------- */
.settings__list { margin-top: 6px; }
.settings__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--near-black);
}
.settings__list li:last-child a { border-bottom: 0; }
.settings__list a:hover { color: var(--purple-deep); }
.settings__chevron { width: 8px; height: 14px; flex-shrink: 0; color: var(--muted); }
.settings__list a:hover .settings__chevron { color: inherit; }

/* ---------------------------- Responsive -------------------------------- */
/* The burger only takes over at 1023px, but this header carries four tool
   buttons, the locale pill and a user block on top of the nav, so it runs out
   of room far earlier — the container itself is 1240px wide inside 100px
   gutters, so anything under ~1460px viewport is already squeezed. Tighten
   and drop to the avatar alone rather than let labels clip or wrap. */
@media (max-width: 1459px) {
  .dash-header .container { gap: 12px; }
  .dash-header .main-nav { margin-inline: 16px auto; }
  .dash-header .main-nav ul { gap: 8px 14px; }
  .dash-header .main-nav a { font-size: 14px; }
  .dash-header .dash-tools { gap: 6px; }
  .dash-header .dash-user { padding-inline-start: 14px; }
  .dash-header .dash-user__text { display: none; }
}

@media (max-width: 1239px) {
  .dash__grid { grid-template-columns: minmax(0, 1fr); }
  .dash__aside { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); align-items: start; }
  .dash-row2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .dash-header .container { height: 100px; }
  .dash-header .main-nav { margin-left: 0; margin-right: 0; }
  .nav-checkbox:checked ~ .nav-wrap .dash-tools { justify-content: flex-start; }
  .nav-checkbox:checked ~ .nav-wrap .dash-user { padding-inline-start: 0; border-inline-start: 0; }
  /* Room is no longer tight inside the dropdown, so bring the name back. */
  .nav-checkbox:checked ~ .nav-wrap .dash-user__text { display: flex; align-items: flex-start; }
  .dash-sessions__grid { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
  /* Stack from here rather than at 767, where the row layout squeezes the
     heading into an awkward "Welcome / Back, Sarah" break. */
  .dash-welcome { flex-direction: column; gap: 22px; }
}

@media (max-width: 767px) {
  .dash { padding: 20px 0 72px; }
  /* The 100% leading from the type spec assumes one line; give wrapped
     sub-headings room so the lines do not touch on narrow screens. */
  .dash-sub { line-height: 1.35; }
  .dash-welcome h1 { font-size: 24px; }
  .dash-welcome__actions { width: 100%; }
  .dash-welcome__actions .btn { flex: 1; padding: 0 16px; }
  .dash-profile { flex-direction: column; text-align: center; gap: 20px; }
  .dash-profile__since { justify-content: center; }
  .dash-profile__actions { justify-content: center; }
  .billing { overflow-x: auto; }
  .mood__opts { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}

@media (max-width: 559px) {
  .dash-brand span { display: none; }
  .dash-sessions__grid { grid-template-columns: minmax(0, 1fr); }
  .dash-card { padding: 20px; }
  /* .btn is nowrap, so these two cannot share a row this narrow — stack them
     instead of letting the labels push past the viewport. */
  .dash-welcome__actions { flex-direction: column; align-items: stretch; }
}

/* ========================== SESSION SUMMARY ============================== */
/*
   Detail view for a completed session, reached from a .sess-card--done card.
   Reuses the dashboard shell (.dash + .container + .dash-card).
*/
.ssum__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: #eceaf1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  color: var(--body);
}
.ssum h1 { margin-top: 16px; font-size: 28px; letter-spacing: -0.5px; }
.ssum__sub { margin-top: 8px; font-family: var(--font-display); font-size: 16px; line-height: 1; letter-spacing: 0; color: var(--body); }

.ssum__meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; }
.ssum__meta li { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--near-black); }
.ssum__meta svg { width: 17px; height: 17px; flex-shrink: 0; }

.ssum__lead { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 22px 24px; border-radius: 16px; background: #efeafe; }
.ssum__lead img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ssum__lead > div { min-width: 0; margin-inline-end: auto; }
.ssum__lead h2 { font-size: 20px; letter-spacing: -0.3px; }
.ssum__lead p { margin-top: 2px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.ssum__lead .btn { height: 48px; padding: 0 28px; flex-shrink: 0; }

.ssum__row { display: grid; grid-template-columns: 1.41fr 1fr; gap: 24px; align-items: start; margin-top: 24px; }
.ssum__panel { display: flex; flex-direction: column; }

.ssum__panel-head { display: flex; align-items: center; gap: 14px; }
.ssum__panel-head h2 { font-size: 20px; letter-spacing: -0.3px; margin-inline-end: auto; }
.ssum__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e9e1fd; flex-shrink: 0; }

.ssum__takeaways { display: grid; gap: 16px; margin-top: 22px; }
.ssum__takeaways li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; color: var(--body); }
.ssum__takeaways svg { width: 18px; height: 18px; fill: var(--green); }

.ssum__files { display: grid; gap: 14px; margin-top: 22px; }
.ssum__files li { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: #f3eefe; }
.ssum__file-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--white); flex-shrink: 0; }
.ssum__file-txt { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; font-family: var(--font-ui); }
.ssum__file-txt b { font-size: 15px; color: var(--near-black); }
.ssum__file-txt small { margin-top: 2px; font-size: 13px; color: var(--body); }
.ssum__file-act { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--purple-deep); flex-shrink: 0; }
.ssum__file-act:hover { background: rgba(81,40,204,0.08); }

.ssum__notes { margin-top: 24px; }
.ssum__edit { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--purple-deep); flex-shrink: 0; }
.ssum__edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.ssum__notes blockquote { margin: 20px 0 0; padding: 20px 22px; border-radius: 12px; background: #f3eefe; font-family: var(--font-ui); font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--near-black); }

.ssum__ask { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.ssum__ask h2 { font-size: 20px; letter-spacing: -0.3px; }
.ssum__ask p { margin-top: 6px; max-width: 380px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--body); }
.ssum__ask .btn { height: 52px; padding: 0 28px; flex-shrink: 0; }
.ssum__ask .btn svg { flex-shrink: 0; }

.ssum__zoom { margin-top: 26px; height: 52px; padding: 0 32px; }

@media (max-width: 1023px) {
  .ssum__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ssum h1 { font-size: 24px; }
  .ssum__lead { flex-wrap: wrap; }
  .ssum__lead .btn { width: 100%; }
  .ssum__ask .btn { width: 100%; }
  .ssum__zoom { width: 100%; }
}

/* ========================== SESSION REVIEW =============================== */
/*
   Rating form for a completed session. Stars and traits are real radio /
   checkbox inputs styled with :has(), so the selection works without JS.
*/
.srev h1 { font-size: 28px; letter-spacing: -0.5px; }
.srev__sub { margin-top: 8px; font-family: var(--font-display); font-size: 16px; line-height: 1; letter-spacing: 0; color: var(--body); }

.srev__lead { display: flex; align-items: center; gap: 22px; margin-top: 26px; padding: 26px 28px; border-radius: 16px; background: #efeafe; }
.srev__lead img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.srev__lead > div { min-width: 0; }
.srev__lead h2 { font-size: 22px; letter-spacing: -0.3px; }
.srev__lead p { margin-top: 3px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.srev__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.srev__tags li { padding: 4px 13px; border-radius: var(--r-pill); background: #dcd0fb; font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--purple-deep); }

.srev__form { margin-top: 22px; }

.srev__rate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 28px; }
.srev__rate-q { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; color: var(--ink); }
.srev__stars { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.srev__star { display: grid; place-items: center; cursor: pointer; color: #d9d7de; transition: color 0.12s ease; }
.srev__star input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.srev__star-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Fill the chosen star and every star before it, so the row reads as a score. */
.srev__stars:has(.srev__star:nth-child(1) input:checked) .srev__star:nth-child(-n+1),
.srev__stars:has(.srev__star:nth-child(2) input:checked) .srev__star:nth-child(-n+2),
.srev__stars:has(.srev__star:nth-child(3) input:checked) .srev__star:nth-child(-n+3),
.srev__stars:has(.srev__star:nth-child(4) input:checked) .srev__star:nth-child(-n+4),
.srev__stars:has(.srev__star:nth-child(5) input:checked) .srev__star:nth-child(-n+5) { color: var(--yellow); }
.srev__star:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 3px; border-radius: 4px; }

/* Own reset rather than a generic `fieldset` one, which would out-specify the
   margin below it. */
.srev__traits { border: 0; padding: 0; margin: 30px 0 0; }
.srev__traits legend { padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; color: var(--ink); }
.srev__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.srev__chip {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
  transition: box-shadow 0.12s ease, color 0.12s ease;
}
.srev__chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.srev__chip:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.srev__chip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--purple-deep); font-weight: 700; color: var(--purple-deep); }
.srev__chip:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

.srev__label { display: block; margin-top: 30px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; color: var(--ink); }
.srev textarea {
  display: block;
  width: 100%;
  min-height: 148px;
  margin-top: 16px;
  padding: 20px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--near-black);
  resize: vertical;
}
.srev textarea::placeholder { color: var(--muted); }
.srev textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--purple-deep); }

.srev__privacy {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--dash-card-shadow);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--body);
}
.srev__privacy svg { flex-shrink: 0; }

.srev__anon { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--font-ui); font-size: 14px; color: var(--near-black); cursor: pointer; }
.srev__anon input { width: 20px; height: 20px; margin: 0; accent-color: var(--purple-deep); flex-shrink: 0; }

.srev__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.srev__actions .btn { height: 52px; padding: 0 30px; }
.srev__actions .btn--outline { box-shadow: inset 0 0 0 1px rgba(28,27,26,0.22); }

@media (max-width: 767px) {
  .srev h1 { font-size: 24px; }
  .srev__lead { flex-direction: column; align-items: flex-start; gap: 18px; }
  .srev__lead img { width: 76px; height: 76px; }
  .srev__rate { padding: 22px 20px; }
  .srev__stars { margin-inline-start: 0; }
  .srev__privacy { align-items: flex-start; gap: 12px; }
  .srev__actions .btn { flex: 1; }
}

/* ====================== THERAPIST DASHBOARD (SHELL) ====================== */
/*
   Facilitator-side dashboard: fixed sidebar + topbar, content in .tdash__main.
   Reuses the conventions set by My Space — .dash-card, .dash-h, .dash-sub and
   --dash-card-shadow — so both dashboards stay one system. The sidebar slides
   in below 1023px via the same checkbox pattern as the marketing nav, so no
   JavaScript is involved.
*/
body:has(.tdash) .page-doodles,
body:has(.tlogin) .page-doodles { display: none; }

.tdash { display: flex; min-height: 100vh; background: #f7f6fa; }
.tdash__toggle { position: absolute; opacity: 0; pointer-events: none; }

.tdash__side {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex-shrink: 0;
  width: 268px;
  height: 100vh;
  padding: 26px 18px;
  background: var(--white);
  border-inline-end: 1px solid rgba(28,27,26,0.08);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.tdash__brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; color: inherit; }
.tdash__brand img { width: 30px; height: 32px; }
.tdash__brand span { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.4px; color: var(--ink); }

.tdash__nav { flex: 1; margin-top: 30px; }
.tdash__nav ul { display: grid; gap: 4px; }
.tdash__nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--body);
  transition: background-color 0.14s ease, color 0.14s ease;
}
.tdash__nav a svg { flex-shrink: 0; }
.tdash__nav a:hover { background: #f3eefe; color: var(--purple-deep); }
.tdash__nav a.is-active { background: var(--purple-deep); font-weight: 700; color: var(--white); }

.tdash__signout {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--body);
}
.tdash__signout svg { flex-shrink: 0; }
.tdash__signout { justify-content: center; width: 100%; cursor: pointer; border: 0; background: #dc2626; color: var(--white); font-weight: 700; }
.tdash__signout:hover { background: #b91c1c; color: var(--white); }

.tdash__scrim { display: none; }

.tdash__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tdash__top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 84px;
  padding: 0 32px;
  background: var(--purple-deep);
}
.tdash__top h1 { margin-inline-end: auto; font-size: 22px; letter-spacing: -0.4px; color: var(--white); }

.tdash__burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.tdash__burger span { width: 22px; height: 2px; border-radius: 2px; background: var(--ink); }

/* --------------------------- Avatar dropdown ---------------------------- */
.tdash-user { position: relative; flex-shrink: 0; }
.tdash-user summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(28,27,26,0.10);
  cursor: pointer;
  list-style: none;
}
.tdash-user summary::-webkit-details-marker { display: none; }
.tdash-user summary:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.tdash-user summary:focus-visible { outline: 3px solid rgba(106,72,229,0.4); outline-offset: 2px; }
.tdash-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tdash-user__id { display: flex; flex-direction: column; line-height: 1.3; }
.tdash-user__id b { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }
.tdash-user__id small { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.tdash-user__caret { flex-shrink: 0; color: var(--body); transition: transform 0.15s ease; }
.tdash-user[open] .tdash-user__caret { transform: rotate(180deg); }

.tdash-user__menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 40;
  min-width: 196px;
  padding: 8px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(28,27,26,0.14), inset 0 0 0 1px rgba(28,27,26,0.08);
}
.tdash-user__menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
}
.tdash-user__menu svg { flex-shrink: 0; color: var(--body); }
.tdash-user__menu a:hover { background: #f3eefe; color: var(--purple-deep); }
.tdash-user__menu a:hover svg { color: var(--purple-deep); }

.tdash__main { padding: 28px 32px 64px; }
/* The moved profile form carried its own page container; the shell owns that. */
.tdash__main .pform { max-width: none; margin: 0; padding: 0; }
/*
   That form was laid out for a full-width page. Inside the shell its column is
   ~330px narrower (sidebar + padding), so it has to collapse at wider viewports
   than its own 900/600px breakpoints, and its flexible tracks need an explicit
   zero minimum — `1fr` keeps a min-content floor and the inputs would push past
   the viewport.
*/
.tdash__main .pform__grid { grid-template-columns: minmax(0, 1fr) 320px; }
.tdash__main .pform-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tdash__main .pfield input,
.tdash__main .pfield select,
.tdash__main .pfield textarea { width: 100%; min-width: 0; }

@media (max-width: 1279px) {
  .tdash__main .pform__grid { grid-template-columns: minmax(0, 1fr); }
  .tdash__main .pform-aside { position: static; }
}

@media (max-width: 859px) {
  .tdash__main .pform-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 559px) {
  .tdash__main .pform-section { padding: 22px 18px; }
}

.tsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ======================= THERAPIST DASHBOARD (HOME) ===================== */
.tdash-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.tdash-welcome h2 { font-size: 24px; letter-spacing: -0.4px; }
.tdash-welcome p { margin-top: 6px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.tdash-welcome .btn { height: 48px; padding: 0 24px; flex-shrink: 0; }
.tdash-welcome .btn svg { flex-shrink: 0; }

.tstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.tstat { display: flex; flex-direction: column; gap: 6px; }
.tstat__label { font-family: var(--font-ui); font-size: 13px; color: var(--body); }
.tstat__value { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--purple-deep); }
.tstat__note { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }

.tdash-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }

.tsec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tsec-link { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--purple-deep); flex-shrink: 0; }
.tsec-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.tslots { display: grid; gap: 12px; margin-top: 18px; }
.tslot {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f7f6fa;
  box-shadow: inset 0 0 0 1px rgba(28,27,26,0.07);
}
.tslot--next { background: #f3eefe; box-shadow: inset 0 0 0 1.5px var(--purple-deep); }
.tslot__time { display: flex; flex-direction: column; align-items: center; font-family: var(--font-display); }
.tslot__time b { font-weight: 700; font-size: 17px; color: var(--near-black); }
.tslot__time small { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.tslot__body { display: flex; flex-direction: column; min-width: 0; }
.tslot__body b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--near-black); }
.tslot__body small { margin-top: 2px; font-family: var(--font-ui); font-size: 12px; color: var(--body); }
.tslot__state { font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tslot--next .tslot__state { color: var(--purple-deep); }
.tslot .btn { height: 40px; padding: 0 18px; font-size: 12px; letter-spacing: 0.2px; }
.tslot .btn--outline { box-shadow: inset 0 0 0 1px rgba(28,27,26,0.2); }

/* Fixed 7 columns so the week never wraps a single day onto its own row. */
.tdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.tday {
  padding: 9px 4px;
  text-align: center;
  border-radius: 10px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(28,27,26,0.12);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--body);
  cursor: pointer;
  transition: box-shadow 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.tday input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tday:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.tday:has(input:checked) { background: #f3eefe; box-shadow: inset 0 0 0 1.5px var(--purple-deep); font-weight: 700; color: var(--purple-deep); }
.tday:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

.tmeta { display: grid; gap: 12px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(28,27,26,0.09); }
.tmeta div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tmeta dt { font-family: var(--font-ui); font-size: 13px; color: var(--body); }
.tmeta dd { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }
.tdash-cols .btn--outline { width: 100%; height: 46px; margin-top: 20px; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(28,27,26,0.2); }

.tupcoming { margin-top: 26px; }
.ttable { margin-top: 16px; border-radius: 14px; background: var(--white); box-shadow: var(--dash-card-shadow); overflow-x: auto; }
.ttable table { width: 100%; border-collapse: collapse; }
.ttable th {
  padding: 15px 20px;
  background: #f3eefe;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: start;
  color: var(--purple-deep);
  white-space: nowrap;
}
.ttable td { padding: 17px 20px; border-top: 1px solid rgba(28,27,26,0.08); font-family: var(--font-ui); font-size: 13px; color: var(--near-black); white-space: nowrap; }
.ttable__act a { font-weight: 700; color: var(--purple-deep); }
.ttable__act a:hover { text-decoration: underline; text-underline-offset: 3px; }

.tpill { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 700; font-size: 11px; white-space: nowrap; }
.tpill--ok { background: #e4f8ef; color: #12805c; }
.tpill--wait { background: #fdf3e2; color: #9a6a12; }

/* ======================== THERAPIST LOGIN =============================== */
.tlogin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; background: #f7f6fa; }
.tlogin__card { width: 100%; max-width: 452px; padding: 40px; border-radius: 20px; background: var(--white); box-shadow: 0 18px 48px rgba(28,27,26,0.10); }
.tlogin__brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: inherit; }
.tlogin__brand img { width: 38px; height: 40px; }
.tlogin__brand span { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: var(--ink); }
.tlogin h1 { margin-top: 26px; font-size: 26px; letter-spacing: -0.4px; text-align: center; }
.tlogin__card > p { margin-top: 8px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--body); text-align: center; }

.tlogin__form { display: grid; gap: 16px; margin-top: 28px; }
.tlogin__field { display: grid; gap: 7px; }
.tlogin__field span { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }
.tlogin__field input {
  height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(28,27,26,0.16);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
}
.tlogin__field input::placeholder { color: var(--muted); }
.tlogin__field input:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--purple-deep); }

.tlogin__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-ui); font-size: 13px; }
.tlogin__remember { display: inline-flex; align-items: center; gap: 9px; color: var(--body); cursor: pointer; }
.tlogin__remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--purple-deep); }
.tlogin__meta a { font-weight: 700; color: var(--purple-deep); }

.tlogin__form .btn { width: 100%; height: 52px; margin-top: 6px; }
.tlogin__foot { margin-top: 24px; font-family: var(--font-ui); font-size: 13px; color: var(--body); text-align: center; }
.tlogin__foot a { font-weight: 700; color: var(--purple-deep); }

/* ---------------------------- Responsive -------------------------------- */
@media (max-width: 1239px) {
  .tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdash-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .tdash__side {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 40px rgba(28,27,26,0.2);
  }
  .tdash__toggle:checked ~ .tdash__side { transform: translateX(0); }
  .tdash__toggle:checked ~ .tdash__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(28,27,26,0.42);
  }
  .tdash__burger { display: flex; }
  .tdash__top { padding: 0 20px; height: 74px; }
  .tdash__top h1 { font-size: 19px; }
  .tdash__main { padding: 22px 20px 56px; }
  .tdash-user__id { display: none; }
}

@media (max-width: 767px) {
  .tdash-welcome .btn { width: 100%; }
  .tstats { grid-template-columns: minmax(0, 1fr); }
  /* Time, title and status stack; the action takes a full-width row below. */
  .tslot { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; }
  .tslot__state { grid-column: 2; }
  .tslot .btn { grid-column: 1 / -1; width: 100%; }
  .tlogin__card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .tdash__side { transition: none; }
}

/* =========================== SETTINGS PAGES ============================== */
/*
   The four destinations of the Settings card on My Space. They share the .set-*
   components below — fields, checkboxes, pills, switches, rows — so the four
   screens stay one system and later settings modules reuse them rather than
   inventing new controls. All controls are real inputs styled with :has(), so
   selection and toggle states work without JavaScript.
*/
.set__head { max-width: 640px; }
.set__head h1 { font-size: 28px; letter-spacing: -0.5px; }
.set__head p { margin-top: 8px; font-family: var(--font-display); font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--body); }

.set__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; margin-top: 26px; }
.set__grid--wide { grid-template-columns: minmax(0, 1fr) 316px; }
.set__main { display: grid; gap: 22px; min-width: 0; }
.set__aside { display: grid; gap: 22px; min-width: 0; }
.set__stack { display: grid; gap: 22px; margin-top: 26px; }
/*
   Grid items default to min-width:auto, so a card holding a wide table keeps a
   min-content floor and pushes past the track — which also stops the table's
   own overflow-x:auto from ever scrolling. Zero minimum lets the card match the
   track and the table scroll inside it.
*/
.set__main > *,
.set__aside > *,
.set__stack > * { min-width: 0; }

.set .dash-card { padding: 26px 28px; }
.set__title { display: flex; align-items: center; gap: 11px; font-size: 17px; letter-spacing: -0.2px; color: var(--near-black); }
/* max-width guards against an inline svg that ships no width/height: it would
   otherwise resolve to 100% and fill the card. */
.set__title svg { flex-shrink: 0; max-width: 22px; max-height: 22px; }
.set__label { margin-top: 22px; padding: 0; font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0; color: var(--near-black); }
.set__cta { width: 100%; height: 46px; margin-top: 18px; font-size: 13px; }
.set .dash-sub { margin-top: 8px; line-height: 1.45; }

.set__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.set__actions .btn { height: 50px; padding: 0 28px; }
.set__actions .btn--outline { box-shadow: inset 0 0 0 1px rgba(28,27,26,0.2); }

/* ------------------------------- Fields --------------------------------- */
.set-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.set-field { display: grid; gap: 8px; min-width: 0; }
.set-field--full { grid-column: 1 / -1; }
.set-field > span { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }
.set-field input,
.set-field select {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  appearance: none;
}
.set-field input::placeholder { color: var(--muted); }
.set-field input:focus-visible,
.set-field select:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--purple-deep); }
/* Caret drawn in CSS because appearance:none removes the native one. */
.set-field select {
  padding-inline-end: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--body) 50%), linear-gradient(135deg, var(--body) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.set-fields .btn { height: 48px; padding: 0 28px; }

/* ----------------------------- Checkboxes -------------------------------- */
/* QA: the real profile-photo controls on the settings page. */
.set-photo { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.set-photo__img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
span.set-photo__img { display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--purple-deep); font-family: var(--font-ui); font-weight: 700; font-size: 22px; }
.set-photo__form { display: flex; flex-direction: column; gap: 8px; }
.set-photo__own { margin-top: 6px; }
/* QA: the customizable anonymous avatar — the image OTHER people see. */
.set-avatar { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.set-avatar__img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.set-avatar__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.set-avatar__body > b { font-family: var(--font-ui); font-size: 14px; color: var(--near-black); }
.set-avatar__form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* QA: the settings file inputs reuse the payment page's upload control
   (.pay-upload__*), which is unscoped and shares initReceiptUploads. This
   only supplies the surrounding stack and the small field label. */
.set-upload { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; }
.set-upload__label { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }
.set-upload .pay-upload__drop { justify-content: flex-start; }
.set-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; margin-top: 22px; }
.set-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; cursor: pointer; }
.set-check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.set-check__box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--border);
  color: transparent;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.set-check:has(input:checked) .set-check__box { background: var(--purple-deep); box-shadow: none; color: var(--white); }
.set-check:focus-within .set-check__box { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }
.set-check__txt { display: flex; flex-direction: column; min-width: 0; }
.set-check__txt b { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--near-black); }
.set-check__txt small { margin-top: 4px; font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--body); }

/* -------------------------- Notification matrix -------------------------- */
.set-matrix { margin-top: 20px; overflow-x: auto; }
.set-matrix table { width: 100%; border-collapse: collapse; }
.set-matrix th {
  padding: 0 12px 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  text-align: center;
  color: var(--near-black);
  border-bottom: 1px solid rgba(28,27,26,0.10);
  white-space: nowrap;
}
.set-matrix thead th:first-child { text-align: left; padding-left: 0; }
.set-matrix tbody th { padding: 18px 12px 18px 0; text-align: left; font-weight: 400; font-size: 14px; color: var(--near-black); border-bottom: 1px solid rgba(28,27,26,0.08); }
.set-matrix td { padding: 18px 12px; text-align: center; border-bottom: 1px solid rgba(28,27,26,0.08); }
.set-matrix tbody tr:last-child th,
.set-matrix tbody tr:last-child td { border-bottom: 0; }

.set-dot { display: inline-grid; place-items: center; cursor: pointer; }
.set-dot input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.set-dot__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--border);
  color: transparent;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.set-dot:has(input:checked) .set-dot__mark { background: var(--purple-deep); box-shadow: none; color: var(--white); }
.set-dot:focus-within .set-dot__mark { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* -------------------------------- Pills ---------------------------------- */
.set-pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.set-pills--even { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.set-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--body);
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.set-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.set-pill:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.set-pill:has(input:checked) { background: #f6f2fe; box-shadow: inset 0 0 0 1.5px var(--purple-deep); color: var(--purple-deep); }
.set-pill:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* ------------------------------- Radios ---------------------------------- */
/* Spacing lives on the fieldset: a <legend> does not honour margin-top. */
.set-group { border: 0; padding: 0; margin: 24px 0 0; }
.set-group > .set__label { margin-top: 0; }
.set-radios { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.set-radio { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15px; color: var(--body); cursor: pointer; }
.set-radio input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.set-radio__mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--border);
  flex-shrink: 0;
  transition: box-shadow 0.12s ease;
}
.set-radio:has(input:checked) .set-radio__mark { box-shadow: inset 0 0 0 5px var(--purple-deep); }
.set-radio:has(input:checked) { color: var(--purple-deep); }
.set-radio:focus-within .set-radio__mark { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* ------------------------------ Switches --------------------------------- */
.set-switches { display: grid; gap: 12px; margin-top: 20px; }
.set-switch {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #f3eefe;
  cursor: pointer;
}
.set-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.set-switch__txt { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.set-switch__txt b { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--near-black); }
.set-switch__txt small { margin-top: 3px; font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--body); }
.set-switch__track {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--r-pill);
  background: #d7d4de;
  flex-shrink: 0;
  transition: background-color 0.16s ease;
}
.set-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.16s ease;
}
.set-switch:has(input:checked) .set-switch__track { background: var(--purple-deep); }
.set-switch:has(input:checked) .set-switch__track::after { transform: translateX(20px); }
.set-switch:focus-within .set-switch__track { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* ------------------------------- Rows ------------------------------------ */
.set-rows { margin-top: 8px; }
.set-rows li { border-bottom: 1px solid rgba(28,27,26,0.09); }
.set-rows li:last-child { border-bottom: 0; }
.set-rows a,
.set-rows > li > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
}
.set-rows a:hover { color: var(--purple-deep); }
.set-rows svg { flex-shrink: 0; color: var(--muted); }
.set-rows a:hover svg { color: var(--purple-deep); }

.set-badge { padding: 4px 12px; border-radius: var(--r-pill); background: #b9f4d8; font-family: var(--font-ui); font-weight: 700; font-size: 11px; color: #0c6b48; white-space: nowrap; }
.set-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-family: var(--font-ui); font-size: 14px; color: var(--body); }

.set-meta { display: grid; gap: 12px; margin: 20px 0 0; }
.set-meta div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.set-meta dt { font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.set-meta dd { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.set-meta dd.is-accent { font-family: var(--font-display); font-size: 17px; color: var(--purple-deep); }

.set-note { display: flex; gap: 14px; margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: rgba(81,40,204,0.05); font-family: var(--font-ui); font-size: 12px; line-height: 1.55; color: var(--body); }
.set-note svg { flex-shrink: 0; margin-top: 2px; }

.set-devices { display: grid; gap: 2px; margin-top: 18px; }
.set-devices li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(28,27,26,0.08); }
.set-devices li:last-child { border-bottom: 0; }
.set-devices__txt { display: flex; flex-direction: column; min-width: 0; }
.set-devices__txt b { display: flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.set-devices__txt em { padding: 3px 9px; border-radius: var(--r-pill); background: #eee8ff; font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--purple-deep); }
.set-devices__txt small { margin-top: 3px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.set-devices a { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--purple-deep); flex-shrink: 0; }
.set-devices a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------- Danger ---------------------------------- */
.set-danger .set__title { color: #dc2626; }
.set-danger .set__title svg { color: #dc2626; }
.set-danger__box { display: block; margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: #fdecec; }
.set-danger__box b { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: #dc2626; }
.set-danger__box small { display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: #a33; }
.set-danger__box:hover { background: #fbdede; }
.set-danger__link { display: block; margin-top: 18px; }
.set-danger__link b { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: #dc2626; }
.set-danger__link small { display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--body); }
.set-danger__link:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ============================ BILLING PAGE =============================== */
.bill-plan__eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--purple-deep); }
.bill-plan h2 { margin-top: 8px; font-size: 22px; letter-spacing: -0.3px; }
.bill-plan__facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.bill-plan__facts div { flex: 1 1 180px; min-width: 0; padding: 16px 18px; border-radius: 12px; background: #f3eefe; }
.bill-plan__facts small { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--body); }
.bill-plan__facts b { display: block; margin-top: 5px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--near-black); }
.bill-plan__facts b span { font-family: var(--font-ui); font-weight: 400; font-size: 12px; color: var(--body); }
.bill-plan__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bill-plan__actions .btn { height: 48px; padding: 0 26px; }
.bill-plan__actions .btn--outline { box-shadow: inset 0 0 0 1px rgba(28,27,26,0.2); }

.bill-method h2 { font-size: 19px; letter-spacing: -0.2px; }
.bill-method > p { margin-top: 6px; font-family: var(--font-ui); font-size: 14px; line-height: 1.45; color: var(--body); }
.bill-card { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px; border-radius: 12px; background: #f3eefe; }
.bill-card__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
.bill-card__txt { display: flex; flex-direction: column; min-width: 0; }
.bill-card__txt b { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.bill-card__txt small { margin-top: 3px; font-family: var(--font-ui); font-size: 12px; color: var(--body); }
.bill-method .btn { width: 100%; height: 48px; margin-top: 18px; font-size: 13px; }

.bill-history { margin-top: 22px; border-radius: 16px; background: var(--white); box-shadow: var(--dash-card-shadow); overflow: hidden; }
.bill-history__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; background: var(--purple-deep); }
.bill-history__head h2 { font-size: 20px; letter-spacing: -0.3px; color: var(--white); }
.bill-history__dl {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--near-black);
  flex-shrink: 0;
}
.bill-history__dl:hover { background: var(--cream); color: var(--near-black); }
.bill-history__table { overflow-x: auto; }
.bill-history table { width: 100%; border-collapse: collapse; }
.bill-history th {
  padding: 18px 28px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-align: start;
  color: var(--near-black);
  border-bottom: 1px solid rgba(28,27,26,0.10);
  white-space: nowrap;
}
.bill-history td { padding: 20px 28px; border-bottom: 1px solid rgba(28,27,26,0.08); font-family: var(--font-ui); font-size: 14px; color: var(--body); white-space: nowrap; }
.bill-history tbody tr:last-child td { border-bottom: 0; }

.bill-paid { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: var(--r-pill); background: #efe9ff; font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--purple-deep); }
.bill-invoice { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--ink); }
.bill-invoice:hover { background: #f3eefe; color: var(--purple-deep); }

/* ---------------------------- Responsive -------------------------------- */
@media (max-width: 1239px) {
  .set__grid,
  .set__grid--wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .set__head h1 { font-size: 24px; }
  .set .dash-card { padding: 22px 20px; }
  .set-fields { grid-template-columns: minmax(0, 1fr); }
  .set-checks { grid-template-columns: minmax(0, 1fr); }
  .set-pills { flex-direction: column; }
  .set-pills--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-switch { gap: 14px; padding: 14px 16px; }
  .set__actions .btn { flex: 1; }
  .bill-plan__actions .btn { width: 100%; }
  .bill-history__head { padding: 18px 20px; }
  .bill-history th,
  .bill-history td { padding: 16px 20px; }
}

@media (max-width: 559px) {
  .set-pills--even { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .set-switch__track,
  .set-switch__track::after { transition: none; }
}

/* ===================== THERAPIST PROFILE — COMPONENTS ==================== */
/*
   Added for the redesigned profile form: expertise tags, circle-leadership
   cards, format pills, availability chips, and the aside's live preview and
   completion cards. All selections are real inputs driven by :has(), so the
   form has no JavaScript. .pfield is left untouched — Business Circl uses it.
*/
.pform-label { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }

/* Icon sitting inside a text input. */
.pform-input-ic { position: relative; display: block; }
.pform-input-ic svg { position: absolute; top: 50%; inset-inline-start: 18px; transform: translateY(-50%); pointer-events: none; }
.pform-input-ic input { width: 100%; padding-inline-start: 44px; }

.pform-bio { min-height: 132px; }
.pform-count { text-align: end; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }

/* ----------------------------- Expertise --------------------------------- */
.pform-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.pform-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
  transition: box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.pform-tag input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pform-tag__tick { width: 0; overflow: hidden; transition: width 0.12s ease; }
.pform-tag:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.pform-tag:has(input:checked) { background: #f1ecfe; box-shadow: inset 0 0 0 1.5px var(--purple-deep); font-weight: 700; color: var(--purple-deep); }
.pform-tag:has(input:checked) .pform-tag__tick { width: 13px; }
.pform-tag:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* ------------------------- Circle leadership ----------------------------- */
.pform-circles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pform-circle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 6px 10px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: box-shadow 0.12s ease, background-color 0.12s ease;
}
.pform-circle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pform-circle__ic { grid-column: 1; color: var(--purple-deep); }
.pform-circle__mark { grid-column: 2; grid-row: 1; justify-self: end; color: var(--border); }
/* The tick only shows once the radio is picked; the ring is always drawn. */
.pform-circle__tick { opacity: 0; transition: opacity 0.12s ease; }
.pform-circle b { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--near-black); }
.pform-circle small { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 13px; line-height: 1.45; color: var(--body); }
.pform-circle:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.pform-circle:has(input:checked) { background: #f6f2fe; box-shadow: inset 0 0 0 1.5px var(--purple-deep); }
.pform-circle:has(input:checked) .pform-circle__mark { color: var(--purple-deep); }
.pform-circle:has(input:checked) .pform-circle__tick { opacity: 1; }
.pform-circle:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* ------------------------------- Format ---------------------------------- */
.pform-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pform-format {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
  transition: box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.pform-format input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pform-format svg { flex-shrink: 0; }
.pform-format:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.pform-format:has(input:checked) { background: #f1ecfe; box-shadow: inset 0 0 0 1.5px var(--purple-deep); font-weight: 700; color: var(--purple-deep); }
.pform-format:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* --------------------------- Availability -------------------------------- */
.pform-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pform-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: box-shadow 0.12s ease, background-color 0.12s ease;
}
.pform-day input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pform-day b { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; color: var(--muted); }
.pform-day small { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.pform-day:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.pform-day:has(input:checked) { background: #f6f2fe; box-shadow: inset 0 0 0 1.5px var(--purple-deep); }
.pform-day:has(input:checked) b,
.pform-day:has(input:checked) small { color: var(--purple-deep); }
.pform-day:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }

/* ---------------------------- Live preview ------------------------------- */
.ppreview { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 30px; }
.ppreview__badge {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #ece5fd;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple-deep);
}
.ppreview img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--border); }
.ppreview__name { margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--near-black); }
.ppreview__role { margin-top: 3px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--purple-deep); }
.ppreview__exp { margin-top: 3px; font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.ppreview__label { align-self: flex-start; margin-top: 18px; font-family: var(--font-ui); font-weight: 700; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ppreview__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ppreview__tags li { padding: 4px 11px; border-radius: var(--r-pill); background: #ffe6a3; font-family: var(--font-ui); font-size: 11px; color: #6b4b00; }
.ppreview__facts { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(28,27,26,0.09); }
.ppreview__facts li { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 11px; color: var(--body); }
.ppreview__facts svg { flex-shrink: 0; }
.ppreview blockquote { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(28,27,26,0.09); font-family: var(--font-ui); font-size: 11px; line-height: 1.6; text-align: start; color: var(--body); }

/* --------------------------- Completion --------------------------------- */
.pcomplete__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcomplete__head h3 { font-size: 15px; letter-spacing: -0.2px; color: var(--near-black); }
.pcomplete__head b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--purple-deep); }
.pcomplete__bar { height: 6px; margin-top: 12px; border-radius: var(--r-pill); background: #eae7f2; overflow: hidden; }
.pcomplete__bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--purple-deep); }
.pcomplete__list { display: grid; gap: 10px; margin-top: 18px; }
.pcomplete__list li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.pcomplete__list svg { flex-shrink: 0; color: #d5d2dd; }
.pcomplete__list li.is-done { color: var(--near-black); }
.pcomplete__list li.is-done svg { color: var(--green); }

/* ---------------------------- Responsive -------------------------------- */
@media (max-width: 1439px) {
  .pform-circles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .pform-section { padding: 22px 20px; }
  .pform-formats { grid-template-columns: minmax(0, 1fr); }
  .pform-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pform-aside { position: static; }
}

@media (max-width: 419px) {
  .pform-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pform-tag__tick,
  .pform-circle__tick { transition: none; }
}

/* ============================== JOURNALS ================================= */
/*
   Four screens reached from My Space: the list, the create form, the saved
   confirmation, and a single entry. They reuse .dash-card / .dash shell and the
   .set-switch__track toggle from the settings pages, so nothing is duplicated.
   Every control is a real input driven by :has() — no JavaScript.
*/
.jrn__badge,
.jlist .jrn__badge,
.jent .jrn__badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: #ffdf93;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: #241a00;
}

.jrn__head { max-width: 700px; }
.jrn__head h1 { margin-top: 14px; font-size: 26px; letter-spacing: -0.4px; }
.jrn__head p { margin-top: 10px; font-family: var(--font-display); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--body); }
.jrn__label { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }

.jrn__form { display: grid; gap: 20px; margin-top: 26px; }
.jrn__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.jrn__cols > * { min-width: 0; }

.jrn__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.jrn__actions .btn { height: 50px; padding: 0 30px; }
.jrn__actions .btn--outline { box-shadow: inset 0 0 0 1px rgba(28,27,26,0.22); }
.jrn__draft { box-shadow: inset 0 0 0 1px var(--purple-deep) !important; color: var(--purple-deep); }
.jrn__draft:hover { background: var(--purple-deep); color: var(--white); }
.jrn__save { background: #7b5ce0; }
.jrn__save:hover { background: var(--purple-deep); }

/* ------------------------------ Mood grid -------------------------------- */
.jmood__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jmood__q { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.jmood__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.jmood__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 6px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: box-shadow 0.12s ease;
}
.jmood__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jmood__opt:hover { box-shadow: inset 0 0 0 1px var(--purple); }
.jmood__opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--purple-deep); }
.jmood__opt:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }
.jmood__face { display: grid; place-items: center; width: 40px; height: 40px; }
.jmood__face svg { width: 100%; height: 100%; }
.jmood__label { font-family: var(--font-ui); font-size: 12px; line-height: 1.3; color: var(--body); text-align: center; }
/* Only the picked face warms up; every other disc stays grey. Very Happy also
   carries a pink mouth, blushes and a spark, muted here so all nine read the
   same at rest — matching the mood picker on My Space. */
.jmood__opt:hover .jmood__disc,
.jmood__opt:focus-within .jmood__disc,
.jmood__opt:has(input:checked) .jmood__disc { fill: url(#jm_warm); fill-opacity: 1; }
.jmood__tint { fill: #232333; stroke: #232333; }
.jmood__extra { opacity: 0; }
.jmood__opt:hover .jmood__tint,
.jmood__opt:focus-within .jmood__tint,
.jmood__opt:has(input:checked) .jmood__tint { fill: #F72859; stroke: #F72859; }
.jmood__opt:hover .jmood__extra,
.jmood__opt:focus-within .jmood__extra,
.jmood__opt:has(input:checked) .jmood__extra { opacity: 1; }
.jmood__opt--other .jmood__face svg { width: 78%; height: 78%; }

/* ------------------------------- Editor ---------------------------------- */
.jed { padding: 0 !important; overflow: hidden; }
.jed__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; background: var(--card); }
.jed__set { display: flex; align-items: center; gap: 4px; padding-inline-end: 10px; border-inline-end: 1px solid rgba(28,27,26,0.12); }
.jed__set:last-of-type { border-inline-end: 0; padding-inline-end: 0; }
.jed__set--end { margin-inline-start: auto; border-right: 0; padding-right: 0; }
.jed__bar button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.jed__bar button:hover { background: rgba(81,40,204,0.10); color: var(--purple-deep); }
.jed__bar button:focus-visible { outline: 3px solid rgba(106,72,229,0.4); outline-offset: 1px; }
.jed__area {
  display: block;
  width: 100%;
  min-height: 320px;
  margin: 18px;
  width: calc(100% - 36px);
  padding: 20px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--card);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: var(--near-black);
  resize: vertical;
}
.jed__area::placeholder { color: var(--muted); }
.jed__area:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--purple-deep); }

/* ------------------------------- Upload ---------------------------------- */
.jup__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 250px;
  margin-top: 16px;
  padding: 24px;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.jup__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jup__drop:hover { border-color: var(--purple-deep); background: #f6f2fe; }
.jup__drop:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }
.jup__ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; background: #ece5fd; color: var(--purple-deep); }
.jup__drop b { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--near-black); }
.jup__drop small { font-family: var(--font-ui); font-size: 13px; color: var(--body); }

/* ------------------------------- Privacy --------------------------------- */
.jpriv { display: flex; flex-direction: column; }
.jpriv__row { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.jpriv__row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jpriv__title { margin-inline-end: auto; font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--near-black); }
.jpriv__row:has(input:checked) .set-switch__track { background: var(--purple-deep); }
.jpriv__row:has(input:checked) .set-switch__track::after { transform: translateX(20px); }
.jpriv__row:focus-within .set-switch__track { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; }
.jpriv__note { margin-top: 16px; font-family: var(--font-display); font-size: 15px; line-height: 1.6; color: var(--body); }
.jpriv__seal { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 16px 18px; border-radius: 12px; background: var(--card); font-family: var(--font-ui); font-weight: 700; font-size: 13px; line-height: 1.45; color: var(--near-black); }
.jpriv__seal svg { flex-shrink: 0; }

/* ---------------------------- Saved screen ------------------------------- */
.jsaved__mark { width: 148px; height: 112px; flex-shrink: 0; object-fit: contain; }
.jsaved h1 { margin-top: 10px; font-size: 30px; line-height: 1.2; }
.jsaved > p { margin-top: 10px; font-size: 16px; }
.jsaved__quote { width: 100%; max-width: 528px; margin: 22px 0 0; padding: 20px 26px; border-radius: 12px; background: var(--card); font-family: var(--font-display); font-size: 16px; line-height: 1.55; color: var(--body); }
.jsaved__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.jsaved__actions .btn { height: 52px; padding: 0 30px; }
.jsaved__back { box-shadow: inset 0 0 0 1px var(--purple-deep); color: var(--purple-deep); }
.jsaved__back:hover { background: var(--purple-deep); color: var(--white); }

/* ----------------------------- Entry view -------------------------------- */
.jent__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; }
.jent__main { min-width: 0; }
.jent__main h1 { margin-top: 14px; font-size: 42px; line-height: 1.1; letter-spacing: -1px; }
.jent__sub { margin-top: 10px; font-family: var(--font-display); font-size: 16px; letter-spacing: 0; color: var(--body); }

.jent__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.jent__meta li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px; background: var(--card); font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }
.jent__meta svg { flex-shrink: 0; }

.jent__body { margin-top: 28px; }
.jent__body p { font-family: var(--font-display); font-size: 16px; line-height: 1.75; color: var(--body); }
.jent__body p + p { margin-top: 20px; }

.jent__photos { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(28,27,26,0.10); }
.jent__photos h2 { font-size: 22px; letter-spacing: -0.3px; }
.jent__photos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.jent__photos img { width: 100%; height: 204px; border-radius: 14px; object-fit: cover; }

.jent__back { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--purple-deep); }
.jent__back:hover { text-decoration: underline; text-underline-offset: 3px; }

.jent__aside { display: grid; gap: 20px; min-width: 0; }
.jent__aside > * { min-width: 0; }
.jent__insight-h { display: flex; align-items: center; gap: 12px; font-size: 20px; letter-spacing: -0.3px; }
.jent__insight-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #35c98f; flex-shrink: 0; }
.jent__insight { margin-top: 18px; padding: 18px 20px; border-radius: 12px; background: var(--card); }
.jent__insight-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jent__insight-top span { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--near-black); }
.jent__insight-top b { padding: 4px 13px; border-radius: var(--r-pill); background: #e6ddff; font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--purple-deep); }
.jent__insight blockquote { margin: 14px 0 0; font-family: var(--font-display); font-size: 14px; line-height: 1.65; color: var(--body); }

.jent__acts { display: grid; gap: 12px; }
.jent__acts .btn { width: 100%; height: 50px; font-size: 14px; }
.jent__acts .btn svg { flex-shrink: 0; }
.jent__acts-share { box-shadow: inset 0 0 0 1px var(--purple-deep); color: var(--purple-deep); }
.jent__acts-share:hover { background: var(--purple-deep); color: var(--white); }
.jent__acts-pdf { background: #e6e4ea; color: var(--body); }
.jent__acts-pdf:hover { background: #dcd9e2; color: var(--near-black); }

/* ------------------------------ List view -------------------------------- */
.jlist__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.jlist__head > div { max-width: 640px; }
.jlist__head h1 { margin-top: 14px; font-size: 26px; letter-spacing: -0.4px; }
.jlist__head p { margin-top: 10px; font-family: var(--font-display); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--body); }
.jlist__head .btn { height: 48px; padding: 0 26px; flex-shrink: 0; }
.jlist__head .btn svg { flex-shrink: 0; }

/* Three stats, icon beside the text rather than above it. */
.jlist__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.jstat { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 16px; background: var(--white); box-shadow: var(--dash-card-shadow); min-width: 0; }
/* Each supplied glyph carries its own colour, so the tile only tints behind it. */
.jstat__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.jstat__ic--book { background: #ece5fd; }
.jstat__ic--streak { background: #fdf0c9; }
.jstat__ic--mood { background: #d4f4e5; }
.jstat__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jstat__txt small { font-family: var(--font-ui); font-size: 12px; color: var(--body); }
.jstat__txt b { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--near-black); }

.jlist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.jcard { display: flex; height: 100%; border-radius: 16px; background: var(--white); box-shadow: var(--dash-card-shadow); overflow: hidden; }
.jcard__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 22px 24px; }

/* Photo variant: a fixed-width thumbnail column with the mood pill over it. */
.jcard__figure { position: relative; width: 200px; flex-shrink: 0; }
.jcard__figure img { width: 100%; height: 100%; object-fit: cover; }
.jcard__mood--onphoto { position: absolute; top: 12px; inset-inline-start: 12px; }

.jcard__top { display: flex; align-items: flex-start; gap: 10px; min-height: 26px; }
.jcard__mood { padding: 5px 14px; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 700; font-size: 12px; white-space: nowrap; }
.jcard__mood--calm { background: #2fbf87; color: var(--white); }
.jcard__mood--grateful { background: #ece5fd; color: var(--purple-deep); }
.jcard__mood--stressed { background: #fdf0c9; color: #765B00; }

/* Row menu: native disclosure, so it opens by keyboard and closes on Esc. */
.jcard__menu { position: relative; margin-inline-start: auto; flex-shrink: 0; }
.jcard__menu summary { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none; }
.jcard__menu summary::-webkit-details-marker { display: none; }
.jcard__menu summary:hover { background: #f3eefe; color: var(--purple-deep); }
.jcard__menu summary:focus-visible { outline: 3px solid rgba(106,72,229,0.4); outline-offset: 1px; }
.jcard__menu ul {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 20;
  min-width: 192px;
  padding: 7px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(28,27,26,0.16), inset 0 0 0 1px rgba(28,27,26,0.08);
}
.jcard__menu a { display: block; padding: 10px 12px; border-radius: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--near-black); white-space: nowrap; }
.jcard__menu a:hover { background: #f3eefe; color: var(--purple-deep); }
.jcard__menu a.is-danger { color: #dc2626; }
.jcard__menu a.is-danger:hover { background: #fdecec; color: #dc2626; }

.jcard h2 { margin-top: 12px; font-size: 20px; letter-spacing: -0.3px; }
.jcard h2 a { color: var(--near-black); }
.jcard h2 a:hover { color: var(--purple-deep); }
.jcard__when { margin-top: 7px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--purple-deep); }
.jcard__excerpt { margin-top: 10px; font-family: var(--font-display); font-size: 15px; line-height: 1.6; color: var(--body); }

.jcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; }
.jcard__read { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--purple-deep); }
.jcard__read:hover { text-decoration: underline; text-underline-offset: 3px; }
.jcard__read svg { flex-shrink: 0; }

.jcard__fav { display: grid; place-items: center; width: 30px; height: 30px; color: #c9c6d2; cursor: pointer; transition: color 0.12s ease; }
.jcard__fav input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jcard__fav:hover { color: var(--purple); }
/* Checked fills the heart rather than just recolouring the outline. */
.jcard__fav:has(input:checked) { color: var(--purple-deep); }
.jcard__fav:has(input:checked) svg path { fill: currentColor; }
.jcard__fav:focus-within { outline: 3px solid rgba(106,72,229,0.35); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------- Responsive -------------------------------- */
@media (max-width: 1239px) {
  .jent__grid { grid-template-columns: minmax(0, 1fr); }
  .jmood__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .jent__main h1 { font-size: 34px; }
}

@media (max-width: 767px) {
  .jrn__head h1,
  .jlist__head h1 { font-size: 23px; }
  .jrn__cols { grid-template-columns: minmax(0, 1fr); }
  .jmood__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jed__bar { gap: 6px; padding: 12px; }
  .jed__set { padding-inline-end: 6px; }
  .jed__set--end { margin-inline-start: 0; }
  .jed__area { min-height: 260px; margin: 14px; width: calc(100% - 28px); }
  .jrn__actions .btn { flex: 1 1 100%; }
  .jlist__grid { grid-template-columns: minmax(0, 1fr); }
  .jlist__head .btn { width: 100%; }
  .jent__main h1 { font-size: 28px; }
  .jent__photos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jsaved__actions .btn { flex: 1 1 100%; }
}

/* The three stats stay one row as long as the icon + text pair has room; below
   that they stack, and the card thumbnail moves above the text. */
@media (max-width: 639px) {
  .jlist__stats { grid-template-columns: minmax(0, 1fr); }
  .jcard { flex-direction: column; }
  .jcard__figure { width: 100%; height: 190px; }
}

@media (max-width: 479px) {
  .jmood__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jent__photos ul { grid-template-columns: minmax(0, 1fr); }
  /* .btn is nowrap and "Share with My Therapist" is long: trim the generous
     32px side padding so the label fits instead of pushing past the card. */
  .jent__acts .btn { padding: 0 14px; font-size: 13px; }
}

/* ==================== ASSESSMENT GATE ("Don't know how to start") ======== */
/*
   The intro card stands in for the assessment section until the visitor asks
   for it. Checkbox toggle, same pattern as the mobile nav, so no JavaScript is
   involved: checking it hides the intro and reveals .assessment. The checkbox
   stays focusable (not display:none) and the CTA shows its focus ring.
*/
.dks__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.dks__intro {
  position: relative;
  margin: 120px 22px;
  padding: 64px 80px;
  border-radius: var(--r-lg);
  background: var(--ink) url("../images/assessment-doodles.svg") no-repeat center / cover;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 40px;
  align-items: end;
}
.dks__copy { padding-bottom: 16px; }
.dks__intro h2 { font-size: 48px; line-height: 1.1; letter-spacing: 0; color: var(--white); max-width: 460px; }
.dks__intro p { margin-top: 18px; max-width: 520px; font-family: var(--font-alt); font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.dks__cta { margin-top: 26px; cursor: pointer; }
/* The label is the visible control, so surface the checkbox's focus on it. */
.dks__toggle:focus-visible ~ .dks__intro .dks__cta { outline: 3px solid rgba(245,201,82,0.75); outline-offset: 3px; }

.dks__photo { align-self: end; justify-self: end; width: 100%; max-width: 360px; height: auto; margin-bottom: -64px; }

/* Swap: intro out, assessment in. */
.dks .assessment { display: none; }
.dks__toggle:checked ~ .dks__intro { display: none; }
.dks__toggle:checked ~ .assessment { display: grid; }

@media (max-width: 1023px) {
  .dks__intro { padding: 52px 56px; gap: 28px; }
  .dks__intro h2 { font-size: 38px; }
  .dks__photo { max-width: 280px; margin-bottom: -52px; }
}

@media (max-width: 767px) {
  .dks__intro {
    margin: 72px 12px;
    padding: 40px 24px 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    text-align: center;
  }
  .dks__intro h2 { font-size: 30px; max-width: none; }
  .dks__intro p { max-width: none; }
  .dks__copy { padding-bottom: 0; }
  .dks__cta { width: 100%; }
  .dks__photo { justify-self: center; max-width: 240px; margin: 24px 0 0; }
}

/* ===================== DECISION 01 — SHARED FORM BITS =================== */
/* Field hints, inline validation errors and flash messages. Reused by the
   participant auth pages, the recruitment form, the facilitator profile and
   every admin screen, so they live here rather than per-module. */

.field-hint { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.pfield__error { font-family: var(--font-ui); font-size: 13px; color: #c0392b; margin: 6px 0 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.flash {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  padding: 12px 16px; border-radius: var(--r-sm); margin: 0 0 18px;
}
.flash svg { flex-shrink: 0; margin-top: 2px; }
.flash ul { margin: 0; padding-inline-start: 16px; }
.flash--success { background: #eaf9f2; color: #16794f; border: 1px solid #b6e6d0; }
.flash--error { background: #fdecea; color: #a12d20; border: 1px solid #f5c6c0; }
/* QA: a booking block is neither success nor validation error — it explains
   a rule the participant can act on. */
.flash--notice { background: #eef2ff; color: var(--purple-deep); box-shadow: inset 0 0 0 1px #e0e7ff; }
.flash--notice .alink { margin-inline-start: 8px; font-weight: 700; color: var(--purple-deep); text-decoration: underline; }

.locale-switch { margin: 0; }
.locale-switch button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  color: var(--body); background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 6px 12px;
}
.locale-switch button:hover { color: var(--purple-deep); border-color: var(--purple); }

.dash-logout { margin: 0; }
.dash-logout button {
  cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  color: var(--body); background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 8px 14px;
}
.dash-logout button:hover { color: var(--purple-deep); border-color: var(--purple); }

.auth--narrow { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.tdash__signout-form, .adash__signout-form { margin: 0; }
.tdash__signout-form button { width: 100%; cursor: pointer; }
.tdash-user--static { display: flex; align-items: center; gap: 10px; }
.tstat__value--sm { font-size: 20px; }
.tdash-next__list { list-style: none; margin: 12px 0 0; padding: 0; font-family: var(--font-ui); }
.tdash-next__list a { color: var(--purple-deep); font-weight: 700; }

/* ================== FACILITATOR RECRUITMENT (/facilitators) ============== */

.recruit { display: block; }
.recruit-h2 { font-family: var(--font-display); font-size: 38px; color: var(--ink); margin: 0 0 12px; }
.recruit-lead { font-family: var(--font-ui); font-size: 17px; line-height: 1.7; color: var(--body); max-width: 720px; margin: 0 0 32px; }

.recruit-hero { background: var(--cream); padding: 72px 0 80px; }
.recruit-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.recruit-hero__copy h1 { font-family: var(--font-display); font-size: 52px; line-height: 1.1; color: var(--ink); margin: 12px 0 18px; }
.recruit-hero__lead { font-family: var(--font-ui); font-size: 18px; line-height: 1.75; color: var(--body); margin: 0 0 28px; }
.recruit-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.recruit-hero__figure img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 12px 40px rgba(0,0,0,.12); }

.recruit-join { padding: 80px 0; }
.recruit-join__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.recruit-join h2 { font-family: var(--font-display); font-size: 38px; color: var(--ink); margin: 0 0 14px; }
.recruit-join p { font-family: var(--font-ui); font-size: 17px; line-height: 1.75; color: var(--body); margin: 0; }

.recruit-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.recruit-checks li {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-ui); font-size: 16px; line-height: 1.65; color: var(--body);
}
.recruit-checks svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--purple); margin-top: 1px; }

.recruit-why { background: var(--card); padding: 80px 0; }
.recruit-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.recruit-cards--values { grid-template-columns: repeat(2, 1fr); }
.recruit-card { background: var(--white); border-radius: var(--r-md); padding: 28px; box-shadow: 0 4px 22px rgba(0,0,0,.07); }
.recruit-card h3 { font-family: var(--font-display); font-size: 21px; color: var(--ink); margin: 0 0 10px; }
.recruit-card p { font-family: var(--font-ui); font-size: 15px; line-height: 1.7; color: var(--body); margin: 0; }

.recruit-looking { padding: 80px 0; }
.recruit-looking__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.recruit-looking__figure img { width: 100%; height: auto; border-radius: var(--r-lg); }
.recruit-looking h2 { font-family: var(--font-display); font-size: 38px; color: var(--ink); margin: 0 0 12px; }
.recruit-looking p { font-family: var(--font-ui); font-size: 17px; line-height: 1.7; color: var(--body); margin: 0 0 22px; }

.recruit-values { background: var(--cream); padding: 80px 0; }

.recruit-process { padding: 80px 0; }
.recruit-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.recruit-step { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px; }
.recruit-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: 14px;
  background: var(--purple); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
}
.recruit-step h3 { font-family: var(--font-display); font-size: 19px; color: var(--ink); margin: 0 0 8px; }
.recruit-step p { font-family: var(--font-ui); font-size: 15px; line-height: 1.65; color: var(--body); margin: 0; }

.recruit-apply { background: var(--card); padding: 80px 0 96px; scroll-margin-top: 90px; }
.recruit-apply__head { max-width: 720px; margin-bottom: 32px; }
.recruit-form { background: var(--white); border-radius: var(--r-lg); padding: 40px; box-shadow: 0 8px 34px rgba(0,0,0,.08); }
.recruit-fieldset { border: 0; margin: 0 0 34px; padding: 0; }
.recruit-fieldset legend {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--ink); padding: 0; margin-bottom: 18px;
}
.recruit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.recruit-grid .pfield.full, .recruit-fieldset > .pfield.full { grid-column: 1 / -1; }
.recruit-form__submit { width: 100%; justify-content: center; }

@media (max-width: 980px) {
  .recruit-hero__inner, .recruit-join__inner, .recruit-looking__inner { grid-template-columns: 1fr; gap: 36px; }
  .recruit-hero__copy h1 { font-size: 38px; }
  .recruit-h2, .recruit-join h2, .recruit-looking h2 { font-size: 30px; }
  .recruit-cards, .recruit-cards--values { grid-template-columns: 1fr; }
  .recruit-steps { grid-template-columns: repeat(2, 1fr); }
  .recruit-grid { grid-template-columns: 1fr; }
  .recruit-form { padding: 26px; }
}

@media (max-width: 620px) {
  .recruit-steps { grid-template-columns: 1fr; }
  .recruit-hero { padding: 48px 0 56px; }
}

/* ========================= ADMIN DASHBOARD SHELL ======================== */
/* First admin module: these table / filter / pager / badge patterns are the
   convention later CMS modules must reuse. */

.adash { display: flex; min-height: 100vh; background: var(--cream); }
.adash__toggle { position: absolute; opacity: 0; pointer-events: none; }

.adash__side {
  display: flex; flex-direction: column; flex-shrink: 0;
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
  width: 264px; padding: 26px 20px; background: var(--white);
  border-inline-end: 1px solid var(--border);
}
.adash__brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 30px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.adash__nav { flex: 1; }
/* Both sidemenus scroll their nav with a slim lilac scrollbar that fills to
   the brand purple on hover — never the browser default grey block. */
.adash__nav, .tdash__nav { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #cdbdf5 transparent; }
.adash__nav::-webkit-scrollbar, .tdash__nav::-webkit-scrollbar { width: 6px; }
.adash__nav::-webkit-scrollbar-track, .tdash__nav::-webkit-scrollbar-track { background: transparent; }
.adash__nav::-webkit-scrollbar-thumb, .tdash__nav::-webkit-scrollbar-thumb { background: #cdbdf5; border-radius: 999px; }
.adash__nav::-webkit-scrollbar-thumb:hover, .tdash__nav::-webkit-scrollbar-thumb:hover { background: var(--purple); }
.adash__group {
  margin: 18px 14px 6px; font-family: var(--font-ui); font-size: 11px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.adash__group:first-child { margin-top: 0; }
html[dir="rtl"] .adash__group { font-family: var(--font-ar); letter-spacing: 0; }
.adash__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.adash__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: 15px; color: var(--body);
}
.adash__nav a svg { flex-shrink: 0; }
.adash__nav a:hover { background: var(--cream); color: var(--purple-deep); }
.adash__nav a.is-active { background: var(--purple); color: var(--white); font-weight: 700; }
.adash__signout {
  width: 100%; cursor: pointer; text-align: center; padding: 11px 14px; margin-top: 14px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--white);
  background: #dc2626; border: 0; border-radius: var(--r-sm);
}
.adash__signout:hover { background: #b91c1c; color: var(--white); }

.adash__footer, .tdash__footer {
  padding: 16px 32px; text-align: center;
  font-family: var(--font-ui); font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border); background: var(--white);
}
.adash__footer a, .tdash__footer a { color: var(--purple-deep); font-weight: 700; }
.adash__footer a:hover, .tdash__footer a:hover { text-decoration: underline; }
html[dir="rtl"] .adash__footer, html[dir="rtl"] .tdash__footer { font-family: var(--font-ar); }

.adash__scrim { display: none; }
.adash__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adash__top {
  display: flex; align-items: center; gap: 16px; padding: 18px 32px;
  background: var(--purple-deep); border-bottom: 0;
}
.adash__top h1 { flex: 1; font-family: var(--font-display); font-size: 24px; color: var(--white); margin: 0; }
.adash__burger { display: none; }
.adash-user { display: flex; flex-direction: column; font-family: var(--font-ui); line-height: 1.3; }
.adash-user b { font-size: 14px; color: var(--white); }
.adash-user small { font-size: 12px; color: rgba(255,255,255,0.72); }

/* Everything that sits on the purple bar reads in white. */
.adash__top .locale-switch button, .tdash__top .locale-switch button {
  color: var(--white); border-color: rgba(255,255,255,0.45);
}
.adash__top .locale-switch button:hover, .tdash__top .locale-switch button:hover {
  color: var(--white); border-color: var(--white);
}
.tdash__top .tdash-user__id b { color: var(--white); }
.tdash__top .tdash-user__id small { color: rgba(255,255,255,0.72); }
.tdash__top .tdash__burger span, .adash__burger span { background: var(--white); }
.adash__main { padding: 32px; }

.ahead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.acard {
  background: var(--white); border-radius: var(--r-md); padding: 26px;
  box-shadow: 0 3px 18px rgba(0,0,0,.06); margin-bottom: 22px;
}
.acard--form { max-width: 1140px; }
.acard__h { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin: 0 0 16px; }
.acard__sub { font-family: var(--font-display); font-size: 16px; color: var(--ink); margin: 18px 0 6px; }
.acard__lead { font-family: var(--font-ui); font-size: 15px; color: var(--body); margin: 0 0 18px; }
.aprose { font-family: var(--font-ui); font-size: 15px; line-height: 1.75; color: var(--body); margin: 0; white-space: pre-line; }

.astats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.astat { background: var(--white); border-radius: var(--r-md); box-shadow: 0 3px 18px rgba(0,0,0,.06); }
.astat a { display: block; padding: 22px; }
.astat__label { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.astat__value { font-family: var(--font-display); font-size: 32px; color: var(--purple-deep); }

.aform { display: grid; gap: 18px; margin: 0; }
.aform--decide { margin-top: 14px; }
.aform__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.aform input[type="text"], .aform input[type="email"], .aform input[type="tel"],
.aform input[type="password"], .aform input[type="number"], .aform select, .aform textarea,
.asearch input, .asearch select,
.abar input, .abar select {
  width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  padding: 11px 14px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.aform input:disabled { background: var(--cream); color: var(--muted); }
.aform label, .asearch label { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }

/* Multi-select list of catalogue topics (facilitator Circl preferences). */
.acheck { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* QA-FIX-04: inline checkbox label on the admin settings form. */
.acheck-inline { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 14px; color: var(--near-black); cursor: pointer; }
.acheck-inline input { width: 16px; height: 16px; accent-color: var(--purple-deep); }
.acheck__item { display: grid; gap: 4px; }
.aform .acheck__label { display: flex; align-items: center; gap: 10px; margin-bottom: 0; font-weight: 500; cursor: pointer; }
.acheck__label input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--purple-deep); }
.acheck__item .field-hint { margin: 0; padding-inline-start: 28px; }

.asearch { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 22px; max-width: 520px; }

.afilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.afilter__chip {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--body);
  padding: 7px 15px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-pill);
}
.afilter__chip:hover { border-color: var(--purple); color: var(--purple-deep); }
.afilter__chip.is-active { background: var(--purple); border-color: var(--purple); color: var(--white); }

.atable-wrap { overflow-x: auto; background: var(--white); border-radius: var(--r-md); box-shadow: 0 3px 18px rgba(0,0,0,.06); }
.atable { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 14px; }
.atable th, .atable td { padding: 14px 18px; text-align: start; vertical-align: top; }
.atable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.atable tbody tr + tr td { border-top: 1px solid var(--border); }
.atable td { color: var(--body); }
.atable__sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.atable__actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.atable__actions form { margin: 0; }

.alink { font-weight: 700; color: var(--purple-deep); background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: 14px; }
.alink--danger { color: #c0392b; }
.aempty { font-family: var(--font-ui); font-size: 15px; color: var(--muted); padding: 26px 0; margin: 0; }

.abadge {
  display: inline-block; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--cream); color: var(--body);
}
.abadge--active, .abadge--approved { background: #eaf9f2; color: #16794f; }
.abadge--invited, .abadge--submitted { background: #eef0fd; color: #4338ca; }
.abadge--under_review { background: #fff6e0; color: #8a5b00; }
.abadge--rejected, .abadge--disabled { background: #fdecea; color: #a12d20; }
.abadge--suspended { background: #fdf0e2; color: #9a5a12; }
.abadge--protected { background: var(--yellow-light); color: #241a00; margin-inline-start: 8px; }

.adetail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.adl { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 20px; margin: 0; font-family: var(--font-ui); font-size: 14px; }
.adl dt { color: var(--muted); }
.adl dd { margin: 0; color: var(--ink); word-break: break-word; }
/* Financial evidence, served from the private disk by the admin-only
   endpoint — never a public URL, so it is bounded rather than full-bleed. */
.apayment-receipt { display: block; width: 100%; max-width: 520px; margin-top: 12px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.adocs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.pager { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-family: var(--font-ui); font-size: 14px; }
.pager__link { font-weight: 700; color: var(--purple-deep); }
.pager__link.is-disabled { color: var(--muted); pointer-events: none; }
.pager__count { color: var(--muted); }

.tlogin--admin .tlogin__card { border-top: 4px solid var(--purple); }

@media (max-width: 980px) {
  .astats { grid-template-columns: repeat(2, 1fr); }
  .adetail { grid-template-columns: 1fr; }
  .adash__side {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  html[dir="rtl"] .adash__side { transform: translateX(100%); }
  .adash__toggle:checked ~ .adash__side { transform: translateX(0); }
  .adash__toggle:checked ~ .adash__scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.35); }
  .adash__burger { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
  .adash__burger span { display: block; width: 22px; height: 2px; background: var(--white); }
  .adash__main, .adash__top { padding-inline: 18px; }
}

@media (max-width: 620px) {
  .astats { grid-template-columns: 1fr; }
  .adash__top h1 { font-size: 19px; }
}

/* ============================ RTL / ARABIC ============================== */
/* One direction-aware layer instead of a mirrored stylesheet. Most of the
   layout already uses flex/grid, so only the physical properties, the Arabic
   type stack and the directional icons need flipping. */

html[dir="rtl"] body { font-family: var(--font-ar); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] .brand, html[dir="rtl"] .adash__brand,
html[dir="rtl"] .tdash__brand, html[dir="rtl"] .tlogin__brand { font-family: var(--font-ar); }
html[dir="rtl"] .recruit-hero__copy h1, html[dir="rtl"] .recruit-h2,
html[dir="rtl"] .recruit-card h3, html[dir="rtl"] .recruit-step h3,
html[dir="rtl"] .acard__h, html[dir="rtl"] .astat__value { font-family: var(--font-ar); }
html[dir="rtl"] .contact__intro p, html[dir="rtl"] .contact__safety,
html[dir="rtl"] .cform, html[dir="rtl"] .contact__links,
html[dir="rtl"] .content-page__summary, html[dir="rtl"] .content-page__body,
html[dir="rtl"] .content-page__meta,
html[dir="rtl"] .field-hint, html[dir="rtl"] .pfield__error,

/* ------------------- Dashboard home (admin + facilitator) ---------------- */
/* One containment rule for both operator shells: the working area caps at a
   readable width and centers, instead of stretching across an ultrawide
   monitor. Tables keep scrolling inside .atable-wrap, so nothing overflows. */
.adash__main, .tdash__main { width: 100%; max-width: 1320px; margin-inline: auto; flex: 1; }

/* Six headline cards: two tidy rows of three, falling back to the existing
   2-up / 1-up breakpoints below. */
.astats--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.astat__go { display: block; margin-top: 10px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.astat a:hover .astat__go { color: var(--purple-deep); }

.acard__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; color: var(--ink); }

/* Attention queue + quick actions, side by side. */
.ahome { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 20px; }
.ahome > .acard { min-width: 0; }

.aqueue { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.aqueue__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-ui); color: var(--ink);
}
.aqueue__row:hover { border-color: var(--purple); }
.aqueue__what { display: grid; gap: 2px; min-width: 0; }
.aqueue__what b { font-size: 14px; }
.aqueue__what small { font-size: 12px; color: var(--muted); }
.aqueue__count { flex-shrink: 0; }

.aquick { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aquick--stack { grid-template-columns: minmax(0, 1fr); }
.aquick__item {
  display: block; padding: 11px 14px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--purple-deep);
}
.aquick__item:hover { border-color: var(--purple); background: #f3eefe; }

/* Facilitator home: work column + side column. */
.tdash-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 24px; }
.tdash-cols__main, .tdash-cols__aside { display: grid; gap: 20px; min-width: 0; }
.tnext__title { margin: 4px 0 14px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--purple-deep); }
.tnext .btn { margin-top: 16px; }
.tdash-more { margin: 12px 0 0; font-family: var(--font-ui); font-size: 13px; }
.tdash-more a { color: var(--purple-deep); font-weight: 600; }
/* Inside a dash-card the table shell drops its own chrome. */
.atable-wrap--flat { box-shadow: none; border-radius: 0; margin-top: 8px; }

@media (max-width: 1200px) {
  .ahome, .tdash-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .astats--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .astats--wide { grid-template-columns: minmax(0, 1fr); }
  .aquick { grid-template-columns: minmax(0, 1fr); }
}

.achev { display: inline-block; }
html[dir="rtl"] .achev { transform: scaleX(-1); }
html[dir="rtl"] .aqueue__row, html[dir="rtl"] .aquick__item,
html[dir="rtl"] .astat__go, html[dir="rtl"] .tdash-more,
html[dir="rtl"] .acard__title, html[dir="rtl"] .tnext__title { font-family: var(--font-ar); }

html[dir="rtl"] .atable, html[dir="rtl"] .adl, html[dir="rtl"] .aform,
html[dir="rtl"] .acheck,
html[dir="rtl"] .aprose, html[dir="rtl"] .flash,
html[dir="rtl"] .recruit-checks li, html[dir="rtl"] .recruit-card p,
html[dir="rtl"] .pay-order__rows, html[dir="rtl"] .pay-total,
html[dir="rtl"] .pay-steps, html[dir="rtl"] .pay-hint,
html[dir="rtl"] .pay-method__name, html[dir="rtl"] .pay-method__soon,
html[dir="rtl"] .receipt-facts, html[dir="rtl"] .receipt-pending { font-family: var(--font-ar); }

/* Arrow glyphs point at the reading direction, not a fixed side. */
html[dir="rtl"] .arrow, html[dir="rtl"] .recruit-checks svg { transform: scaleX(-1); }

/* Circl cards: the photo flips side with the logical inset, so its fade must
   flip too — otherwise the mask dissolves the wrong edge and the picture
   collides with the Arabic copy. The decorative faces mirror with it.
   Bounded to the side-by-side layout: below 769px the card stacks, the photo
   is static and unmasked, and these would out-specify that. */
@media (min-width: 769px) {
  html[dir="rtl"] .program-card__img {
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 44%);
    mask-image: linear-gradient(270deg, transparent 0%, #000 44%);
  }
  html[dir="rtl"] .programs__track .program-card::before {
    background-position:
      left 12px top 16px,
      left -30px top 128px,
      right -24px bottom 10px;
  }
}

/* The few remaining physical offsets in the legacy sheet. */
html[dir="rtl"] .auth__list, html[dir="rtl"] .flash ul { padding-inline-start: 16px; padding-inline-end: 0; }
/* The facilitator drawer mirrors like the admin one — it must enter from the
   edge its own burger sits on. */
@media (max-width: 1023px) {
  html[dir="rtl"] .tdash__side { transform: translateX(100%); }
  .tdash__toggle:checked ~ .tdash__side { transform: translateX(0); }
}

/* Directional glyphs that predate the .arrow convention: back/forward arrows
   and drill-in chevrons must point along the reading direction. Down carets
   (.book-select, .tdash-user__caret) are vertical and deliberately excluded. */
html[dir="rtl"] .carousel-nav button svg,
html[dir="rtl"] .assess-back svg,
html[dir="rtl"] .jent__back svg,
html[dir="rtl"] .jcard__read svg,
html[dir="rtl"] .settings__chevron,
html[dir="rtl"] .set-rows svg { transform: scaleX(-1); }

/* Numerals stay Latin inside data tables so IDs and counts remain scannable. */
html[dir="rtl"] .astat__value, html[dir="rtl"] .pager__count,
html[dir="rtl"] .tstat__value { font-variant-numeric: lining-nums; direction: ltr; unicode-bidi: embed; }

html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="number"] {
  direction: ltr; text-align: right;
}

/* =============== DECISION 01.1 — TRUSTED ADULT CONTACT ================== */

/* First-time recommendation modal. A native <dialog> gives dialog semantics,
   a focus trap and top-layer stacking without any z-index bookkeeping. The
   element is rendered with [open] by the server, so the panel is still centred
   and usable when app.js has not upgraded it to showModal(). */
.tamodal {
  position: fixed; inset: 0; margin: auto;
  width: 100%; max-width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0; border: 0; background: transparent; overflow: visible;
}
.tamodal::backdrop { background: rgba(28, 27, 26, 0.55); }
.tamodal__panel {
  background: var(--white); border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  padding: 30px; max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
}
.tamodal__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.tamodal__icon { display: inline-flex; flex-shrink: 0; }
.tamodal__heading {
  font-family: var(--font-display); font-size: 22px; line-height: 1.3;
  color: var(--ink); margin: 0;
}
.tamodal__body {
  font-family: var(--font-ui); font-size: 15px; line-height: 1.65;
  color: var(--body); margin: 0;
}
.tamodal__optional {
  font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 8px 0 0;
}
.tamodal .tadult-form { margin-top: 22px; }
.tamodal__submit { width: 100%; justify-content: center; }
.tamodal__skip { width: 100%; justify-content: center; margin-top: 12px; }

/* The Settings section keeps its disclosure pattern. */
.tadult-edit > summary { display: inline-flex; cursor: pointer; list-style: none; }
.tadult-edit > summary::-webkit-details-marker { display: none; }

.tadult-form { margin: 20px 0 0; }
.tadult-form__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-bottom: 18px;
}
.tadult-form input, .tadult-form select {
  width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  padding: 11px 14px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.tadult-form label {
  display: block; font-family: var(--font-ui); font-size: 14px;
  font-weight: 700; color: var(--ink); margin-bottom: 6px;
}

.tadult-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px; margin: 16px 0 20px; font-family: var(--font-ui);
}
.tadult-summary dt { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.tadult-summary dd { font-size: 15px; color: var(--ink); margin: 0; word-break: break-word; }
.tadult-empty { font-family: var(--font-ui); font-size: 15px; color: var(--muted); margin: 14px 0 18px; }
.tadult-remove { margin: 16px 0 0; }
.set__hint { font-family: var(--font-ui); font-size: 14px; color: var(--muted); margin: 0 0 4px; }

@media (max-width: 720px) {
  .tadult-form__grid, .tadult-summary { grid-template-columns: 1fr; }
}

/* ============ DECISION 01.1 — FACILITATOR FIRST-TIME SETUP ============== */

.tlogin__first {
  font-family: var(--font-ui); font-size: 14px; color: var(--body);
  text-align: center; margin: 18px 0 0; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.fsteps { list-style: none; display: flex; gap: 10px; margin: 20px 0 22px; padding: 0; }
.fsteps__item {
  display: flex; align-items: center; gap: 8px; flex: 1;
  font-family: var(--font-ui); font-size: 13px; color: var(--muted);
}
.fsteps__item span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--border); font-weight: 700; font-size: 12px;
}
.fsteps__item.is-current { color: var(--purple-deep); font-weight: 700; }
.fsteps__item.is-current span { border-color: var(--purple); background: var(--purple); color: var(--white); }
.fsteps__item.is-done span { border-color: var(--green); background: var(--green); color: var(--white); }
.fresend { margin: 14px 0 0; text-align: center; }

/* Grouped digits read better than a cramped field, and stay LTR in Arabic. */
.tlogin__form input[autocomplete="one-time-code"] {
  letter-spacing: .5em; text-align: center; font-size: 20px;
  direction: ltr; unicode-bidi: embed;
}

html[dir="rtl"] .tamodal__heading, html[dir="rtl"] .tamodal__body,
html[dir="rtl"] .tamodal__optional,
html[dir="rtl"] .tadult-summary, html[dir="rtl"] .tadult-form,
html[dir="rtl"] .tadult-empty, html[dir="rtl"] .set__hint,
html[dir="rtl"] .fsteps__item, html[dir="rtl"] .tlogin__first { font-family: var(--font-ar); }

/* Modal responsive + focus polish (Decision 01.1a). */
@media (max-width: 620px) {
  .tamodal { max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .tamodal__panel { padding: 22px; max-height: calc(100dvh - 24px); border-radius: var(--r-sm); }
  .tamodal__heading { font-size: 19px; }
  /* Single column so the dialog never scrolls sideways. */
  .tamodal .tadult-form__grid { grid-template-columns: 1fr; }
}

.tamodal__panel :focus-visible { outline: 3px solid rgba(106, 72, 229, 0.45); outline-offset: 2px; }

/* ============= DECISION 01.2b — LIVEWIRE ADMIN TABLE ADDITIONS ========== */
/* Extends the Decision 01 admin conventions for Livewire-driven tables:
   filter chips become buttons, the search box gains a pending indicator, and
   the confirmation dialog reuses the Pilot 1 .tamodal shell. */

.afilter__chip {
  cursor: pointer; font-family: var(--font-ui); line-height: 1.2;
}
button.afilter__chip { appearance: none; }

.asearch { position: relative; align-items: center; }
.asearch__spinner {
  font-family: var(--font-ui); font-size: 12px; color: var(--muted); white-space: nowrap;
}

/* Dim the table while a filter/search/page request is in flight. */
.is-busy { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

.tamodal__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.tamodal__actions .btn { flex: 1 1 auto; justify-content: center; }
.tamodal .pfield { margin-top: 18px; }
.tamodal .pfield textarea {
  width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  padding: 11px 14px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}

.atable__actions .alink { white-space: nowrap; }

html[dir="rtl"] .asearch__spinner, html[dir="rtl"] .afilter__chip { font-family: var(--font-ar); }

/* ========== DECISION 01.2c — LIVEWIRE FIRST-LOGIN ADDITIONS ============= */
/* Alpine sets [x-cloak] until it initializes; without this the countdown
   flashes its alternate label on first paint. */
[x-cloak] { display: none !important; }

.fresend .alink[disabled] { color: var(--muted); cursor: default; }

/* ===== Public content pages (Privacy, Terms, Safety, Refund, Help, Contact) ===== */
.content-page { width: 100%; max-width: 860px; }
.content-page__summary { font-size: 19px; line-height: 1.7; color: var(--ink); margin-bottom: 28px; }
.content-page__body { font-size: 16px; line-height: 1.8; color: var(--body); }
.content-page__body h2 { font-size: 28px; line-height: 1.3; color: var(--near-black); margin: 36px 0 12px; }
.content-page__body h3 { font-size: 21px; line-height: 1.35; color: var(--near-black); margin: 28px 0 10px; }
.content-page__body h4 { font-size: 17px; line-height: 1.4; color: var(--near-black); margin: 22px 0 8px; }
.content-page__body p { margin: 0 0 16px; }
.content-page__body ul,
.content-page__body ol { margin: 0 0 16px; padding-inline-start: 22px; }
.content-page__body li { margin-bottom: 8px; }
.content-page__body a { color: var(--purple-deep); text-decoration: underline; }
.content-page__body a:hover { color: var(--violet); }
.content-page__body strong { color: var(--near-black); }
.content-page__body hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.content-page__meta { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .content-page__body h2 { font-size: 23px; }
  .content-page__body h3 { font-size: 19px; }
}

/* ===== Contact Us (form-first layout) ===== */
.contact { padding: 72px 0 100px; background: var(--white); }
.contact__intro { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.contact__intro h1 { font-size: 56px; line-height: 60px; color: var(--near-black); margin: 0 0 14px; }
.contact__intro p { font-size: 18px; line-height: 1.7; color: var(--body); margin: 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px; align-items: start; }
.contact__figure img { width: 100%; height: auto; border-radius: var(--r-lg); }
.contact__safety { margin-top: 24px; padding: 22px 24px; background: var(--cream);
  border-radius: var(--r-lg); border-inline-start: 4px solid var(--yellow); }
.contact__safety h2 { font-size: 19px; color: var(--near-black); margin: 0 0 8px; }
.contact__safety p { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0; }

.cform { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 32px; box-shadow: 0 12px 40px rgba(0,0,0,.06); }
.cform__title { font-size: 28px; color: var(--near-black); margin: 0 0 6px; }
.cform__lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; }
.cform .pfield { margin-bottom: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform textarea { min-height: 160px; resize: vertical; }
.cform__submit { width: 100%; justify-content: center; margin-top: 6px; }
.cform__privacy { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; text-align: center; }
.cform__privacy a { color: var(--purple-deep); text-decoration: underline; }
/* Honeypot: removed from layout and from the accessibility tree, never
   display:none alone, so naive bots still fill it in. */
.cform__trap { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

.contact__support { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--border); }
.contact__support h2 { font-size: 22px; color: var(--near-black); margin: 0 0 18px; }
.contact__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  list-style: none; padding: 0; margin: 0; }
.contact__links li { display: flex; flex-direction: column; gap: 4px; }
.contact__links a { font-weight: 700; color: var(--purple-deep); text-decoration: none; }
.contact__links a:hover { text-decoration: underline; }
.contact__links span { font-size: 14px; line-height: 1.6; color: var(--muted); }
.contact__editorial { margin-top: 56px; max-width: 780px; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact__links { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .contact { padding: 44px 0 72px; }
  .contact__intro h1 { font-size: 34px; line-height: 40px; }
  .cform { padding: 22px; }
  .cform__row { grid-template-columns: 1fr; gap: 0; }
}

/* ============ DECISION 06 — BOOKABLE OFFERING LIST (/booking) =========== */
/*
  Vertical list of real Cohort and SupportGroupSession inventory.

  QA-FIX-03: /booking is a PUBLIC page, so it speaks the marketing site's
  visual language — pill controls, soft cards, generous radii — not the admin
  shell's compact table language. It previously borrowed .afilter, .asearch,
  .abadge, .aempty and .pager from the dashboard, which is why it read as
  browser-default beside the rest of the site. Everything below is scoped to
  .book-* / .offering* so no admin or My Space surface is affected.
*/

/* ---------------------------- Track switcher ---------------------------- */
/* The extra block-end margin sits on top of .book's 24px gap, giving the
   switcher the same 40px of air below it that .book__intro has above it. The
   tabs then read as their own band rather than as the first row of the filter
   toolbar. Direction-neutral, so RTL needs no counterpart. */
.book-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 16px; }
.book-tabs__tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: .4px;
  color: var(--body); background: var(--white);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--border);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.book-tabs__tab:hover { color: var(--purple-deep); box-shadow: inset 0 0 0 1.5px var(--purple); }
.book-tabs__tab.is-active { background: var(--purple-deep); color: var(--white); box-shadow: none; }
.book-tabs__tab:focus-visible { outline: 3px solid rgba(106,72,229,.4); outline-offset: 2px; }

/* ---------------------------- Filter toolbar ---------------------------- */
.book-filters { display: grid; gap: 14px; }
.book-filters__search { position: relative; display: flex; align-items: center; }
.book-filters__search svg {
  position: absolute; inset-inline-start: 22px;
  width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8;
  pointer-events: none;
}
.book-filters__search input {
  width: 100%; height: 56px;
  padding-inline: 52px 22px;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  background: var(--white); border: 0; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--border);
  outline: none;
}
.book-filters__search input::placeholder { color: #9a94a6; }
.book-filters__search input:focus { box-shadow: inset 0 0 0 2px var(--purple); }

.book-filters__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Native <select>, restyled — no JavaScript dropdown was built for cosmetics.
   The chevron is a pseudo-element rather than a background-image, so its
   placement follows inset-inline-end and needs no RTL override. Its own two
   borders are physical because a downward chevron is direction-neutral. */
.book-select { position: relative; display: flex; }
.book-select::after {
  content: ""; position: absolute; inset-inline-end: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.book-select select {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 52px;
  padding-inline: 22px 46px;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink);
  background: var(--white); border: 0; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--border);
  outline: none; cursor: pointer;
}
.book-select select:hover { box-shadow: inset 0 0 0 1.5px var(--purple); }
.book-select select:focus-visible { box-shadow: inset 0 0 0 2px var(--purple); }

/* Inline, layout-stable: the list dims rather than being replaced, so
   filtering never makes the page jump. */
.book-filters__status {
  justify-self: start;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--purple-deep);
}
.offerings.is-busy { opacity: .5; transition: opacity .15s ease; }

/* ------------------------------ Offering row ---------------------------- */
.offerings { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.offering {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 26px;
  background: var(--white); border-radius: var(--r-md); padding: 26px 30px;
  box-shadow: var(--dash-card-shadow);
  transition: box-shadow .18s ease;
}
.offering:hover { box-shadow: 0 8px 30px rgba(28,27,26,.10); }
.offering--full { opacity: .72; }

.offering__body { flex: 1 1 340px; min-width: 0; }
.offering__title { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.25; color: var(--ink); margin: 0 0 6px; }
/* Secondary by design: the reference must never compete with the title. */
.offering__circl { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 0; }
.offering__code { letter-spacing: .04em; }

.offering__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; margin: 20px 0 0; }
.offering__meta dt { font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 5px; }
.offering__meta dd { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; color: var(--ink); }
.offering__meta dd small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.offering__price { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--purple-deep); }

.offering__rating { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.offering__stars { color: var(--yellow); }

/* One divider between information and action — not a border per field. */
.offering__aside {
  flex: 0 0 232px; display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start; justify-content: center;
  padding-inline-start: 26px;
  border-inline-start: 1px solid var(--border);
}
.offering__aside .btn { width: 100%; }
.offering__note { font-family: var(--font-ui); font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }

.book-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  padding: 8px 15px; border-radius: var(--r-pill);
}
.book-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.book-badge--open { background: #eaf9f2; color: #16794f; }
.book-badge--low { background: #fff6e0; color: #8a5b00; }
.book-badge--none { background: #fdecea; color: #a12d20; }

/* ------------------------------ Review panel ---------------------------- */
.book-reviews { background: var(--white); border-radius: var(--r-md); box-shadow: var(--dash-card-shadow); padding: 24px 28px; display: grid; gap: 16px; }
.book-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.book-reviews__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0; }
.book-reviews__count { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.book-review { display: grid; gap: 6px; padding-block-end: 16px; border-block-end: 1px solid var(--border); }
.book-review:last-child { padding-block-end: 0; border-block-end: 0; }
.book-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.book-review__rating { font-weight: 700; color: var(--ink); }
.book-review__verified { font-weight: 700; color: var(--purple-deep); }
.book-review__body { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.65; color: var(--body); margin: 0; white-space: pre-line; }

/* ------------------------------ Empty state ----------------------------- */
.book-empty {
  background: var(--white); border-radius: var(--r-md); box-shadow: var(--dash-card-shadow);
  padding: 48px 32px; display: grid; gap: 12px; justify-items: center; text-align: center;
}
.book-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink); margin: 0; }
.book-empty__body { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 420px; }

/* ---------------------- Back to the full list (12A) --------------------- */
.book-back { margin: 28px 0 0; text-align: center; font-family: var(--font-ui); font-size: 14px; }

/* ------------------------------ Pagination ------------------------------ */
.book-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.book-pager__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; min-width: 44px; padding: 0 20px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  color: var(--purple-deep); background: var(--white);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--border);
  transition: box-shadow .15s ease, color .15s ease;
}
.book-pager__link:hover { box-shadow: inset 0 0 0 1.5px var(--purple); }
.book-pager__link:focus-visible { outline: 3px solid rgba(106,72,229,.4); outline-offset: 2px; }
.book-pager__link.is-disabled { color: var(--muted); opacity: .55; pointer-events: none; }
.book-pager__current {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; min-width: 44px; padding: 0 16px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  color: var(--white); background: var(--purple-deep); border-radius: var(--r-pill);
}

@media (max-width: 900px) {
  .offering__aside { flex-basis: 200px; }
}

@media (max-width: 720px) {
  .book-filters__row { grid-template-columns: 1fr; }
  .offering { padding: 22px; gap: 20px; }
  .offering__meta { grid-template-columns: 1fr; }
  /* The action area becomes a full-width footer, so the divider moves from
     the inline edge to the block edge. */
  .offering__aside {
    flex: 1 1 100%; align-items: stretch;
    padding-inline-start: 0; border-inline-start: 0;
    padding-block-start: 20px; border-block-start: 1px solid var(--border);
  }
  .book-badge { align-self: flex-start; }
  .book-pager { flex-wrap: wrap; }
}

html[dir="rtl"] .offering__meta, html[dir="rtl"] .offering__note,
html[dir="rtl"] .offering__circl, html[dir="rtl"] .book-tabs__tab,
html[dir="rtl"] .book-filters__search input, html[dir="rtl"] .book-select select,
html[dir="rtl"] .book-badge, html[dir="rtl"] .book-empty__body,
html[dir="rtl"] .book-review__body, html[dir="rtl"] .book-pager__link { font-family: var(--font-ar); }

/* Derived seat counts on the admin offering detail (Decision 06). */
.aseats { grid-template-columns: repeat(4, minmax(0, auto)); gap: 8px 28px; margin-bottom: 14px; }

@media (max-width: 720px) {
  .aseats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ DECISION 07 — MEMBERSHIP PANEL (My Space) ================= */
/*
  Reuses the existing .dash-card, .adl, .abadge and .recruit-checks systems;
  only the state line and the benefit spacing are new.
*/

/* Air between the card heading and the state line ("Membership active"). */
.mship__state { font-family: var(--font-ui); font-size: 15px; color: var(--body); margin: 14px 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mship__benefits { margin-top: 10px; }
.mship__benefits .abadge { margin-inline-start: 8px; }

/* The two member surfaces as compact icon buttons, with air below so the
   renewal row never sits flush against them. */
.mship__links { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 16px 18px; }
.mship__links .btn { height: 44px; padding: 0 20px; font-size: 13px; gap: 10px; }
.mship__links .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Remaining secured Membership time on a 30-day horizon. The fill anchors
   to the inline start, so RTL depletes naturally in the other direction. */
.mship-progress { margin-top: 18px; }
.mship-progress__track { height: 8px; border-radius: var(--r-pill); background: #ece7f4; overflow: hidden; }
.mship-progress__fill { display: block; height: 100%; border-radius: var(--r-pill); background: #23B33A; transition: width 0.3s ease; }
.mship-progress__fill.is-warning { background: #e8a13a; }
.mship-progress__fill.is-urgent { background: #dc2626; }
.mship-progress__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.mship-progress__days { font-weight: 700; color: var(--near-black); }
.mship-progress__days.is-warning { color: #b47712; }
.mship-progress__days.is-urgent { color: #dc2626; }

html[dir="rtl"] .mship-progress__meta { font-family: var(--font-ar); }

/* Stop renewing: a small, quiet danger control at the card's end — hint at
   the reading start, button at the end. Wraps on narrow screens. */
.mship__stop-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; }
.mship__stop-row .field-hint { margin: 0; flex: 1 1 260px; }
/* Renew + Stop pair; margin-inline-start keeps the pair at the inline end
   even when no hint is rendered on the row. */
.mship__stop-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.mship__stop-actions .btn { height: 44px; padding: 0 20px; font-size: 13px; }
/* Same geometry as the Renew button beside it — the two read as one pair of
   decisions. Only COLOUR marks this one as the destructive choice, never a
   smaller hit area. */
.mship__stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  color: #dc2626; background: transparent;
  border: 0; box-shadow: inset 0 0 0 1px #dc2626;
  border-radius: var(--r-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.mship__stop:hover { background: #dc2626; color: var(--white); }

html[dir="rtl"] .mship__stop { font-family: var(--font-ar); }

html[dir="rtl"] .mship__state { font-family: var(--font-ar); }

/* The /membership explanation page — one wide plan-card reused as a plain,
   start-aligned document. The featured card's raised margin only makes sense
   inside the three-card pricing row, so it is reset here. */
.flow__lead { font-family: var(--font-ui); font-size: 17px; line-height: 1.7; color: var(--body); text-align: center; max-width: 640px; margin: -16px 0 0; }
.pricing-grid--solo .plan-card { max-width: 620px; }
.mship-explain { margin-block: 0; align-items: stretch; text-align: start; }
.mship-explain h3 { margin-top: 0; }
.mship-explain .plan-card__tagline { margin: 10px 0 20px; }
.mship-explain .acard__sub { margin-top: 26px; font-size: 18px; }
.mship-explain__note { margin: 16px 0 0; }
.mship-explain form { margin-top: auto; }
.mship-explain form .btn, .mship-explain > .btn { margin-top: 24px; width: 100%; }

html[dir="rtl"] .flow__lead { font-family: var(--font-ar); }


/* ============== DASHBOARD UI CONSOLIDATION (Admin + Facilitator) ==============
   One shared system for the operational pages of BOTH dashboards: wide
   responsive form grids, one filter/action toolbar (.abar), one table card
   language (already .atable-wrap), one numbered pagination (.dpager), one
   empty state (.aempty) and semantic badge aliases. Purely presentational --
   every control keeps its name, wire model and request payload. */

/* ---- Form pages: use the width. Two readable columns from 900px up; the
   grid never splits a field that genuinely needs the full row (sections,
   textareas, uploads, previews, action bars). .aform--decide stays compact --
   those are small inline decision forms on detail pages. ---- */
@media (min-width: 900px) {
  .acard--form .aform:not(.aform--decide) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    align-items: start;
  }
  .acard--form .aform:not(.aform--decide) > h2,
  .acard--form .aform:not(.aform--decide) > .acard__sub,
  .acard--form .aform:not(.aform--decide) > .acard__lead,
  .acard--form .aform:not(.aform--decide) > .field-hint,
  .acard--form .aform:not(.aform--decide) > .afilter,
  .acard--form .aform:not(.aform--decide) > .pform-section,
  .acard--form .aform:not(.aform--decide) > .atable-wrap,
  .acard--form .aform:not(.aform--decide) > .acard,
  .acard--form .aform:not(.aform--decide) > .recruit-checks,
  .acard--form .aform:not(.aform--decide) > .aform__actions,
  .acard--form .aform:not(.aform--decide) > button,
  .acard--form .aform:not(.aform--decide) > .flash,
  .acard--form .aform:not(.aform--decide) > fieldset,
  .acard--form .aform:not(.aform--decide) > .adl,
  .acard--form .aform:not(.aform--decide) > .pfield.full,
  .acard--form .aform:not(.aform--decide) > .pfield:has(textarea),
  .acard--form .aform:not(.aform--decide) > .pfield:has(input[type="file"]),
  .acard--form .aform:not(.aform--decide) > .pfield:has(.aprice-breakdown),
  .acard--form .aform:not(.aform--decide) > .pfield:has(.set-upload) { grid-column: 1 / -1; }

  /* Sections keep their own two-column field grid; the title and its lead
     hint span the section. */
  .acard--form .aform .pform-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
  }
  .acard--form .aform .pform-section > h3,
  .acard--form .aform .pform-section > .field-hint,
  .acard--form .aform .pform-section > .pfield.full,
  .acard--form .aform .pform-section > .pfield:has(textarea) { grid-column: 1 / -1; }
}
/* Inside the admin shell the section is a grouping, not a second card. */
.acard--form .aform .pform-section { box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--r-md); }
.acard--form .aform .pform-section h3 { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink); }

/* Save/Cancel rows: primary first in reading order, danger separated to the
   far edge. */
.aform__actions { align-items: center; }
.aform__actions .alink--danger { margin-inline-start: auto; }
@media (max-width: 620px) {
  .aform__actions { flex-direction: column; align-items: stretch; }
  .aform__actions .btn { text-align: center; }
  .aform__actions .alink--danger { margin-inline-start: 0; }
}

/* ---- The list toolbar: search + filters at the start, page actions at the
   logical end. Replaces the old 520px .asearch strip on list pages. ---- */
.abar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.abar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 340px; min-width: 0; }
.abar__filters input[type="search"], .abar__filters input[type="text"] { flex: 1 1 220px; max-width: 400px; }
.abar__filters select { width: auto; min-width: 150px; }
.abar input, .abar select { padding-block: 10px; }
.abar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-inline-start: auto; }
.abar .btn { padding: 10px 22px; }
@media (max-width: 620px) {
  .abar__filters > * { flex: 1 1 100%; }
  .abar__filters input[type="search"], .abar__filters input[type="text"] { max-width: none; }
  .abar__filters select { width: 100%; }
  .abar__actions { width: 100%; margin-inline-start: 0; }
  .abar__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---- One dashboard pagination (.dpager): numbered, purple current page,
   result summary, logical-direction safe. Rendered exclusively by
   partials/dash-pagination.blade.php. ---- */
.dpager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; font-family: var(--font-ui); }
.dpager__summary { margin: 0; font-size: 13px; color: var(--muted); }
.dpager__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; margin-inline-start: auto; padding: 0; }
.dpager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
a.dpager__btn { text-decoration: none; }
.dpager__btn:hover { border-color: var(--purple); color: var(--purple-deep); background: #f6f2ff; }
.dpager__btn:focus-visible { outline: 3px solid rgba(106, 72, 229, .35); outline-offset: 1px; }
.dpager__btn.is-current { background: var(--purple); border-color: var(--purple); color: var(--white); cursor: default; }
.dpager__btn.is-disabled, .dpager__btn:disabled { color: var(--muted); background: var(--cream); cursor: default; pointer-events: none; }
.dpager__gap { min-width: 24px; text-align: center; color: var(--muted); font-weight: 700; }
@media (max-width: 620px) {
  .dpager { justify-content: center; }
  .dpager__summary { flex: 1 1 100%; text-align: center; }
  .dpager__list { margin-inline: auto; }
}
html[dir="rtl"] .dpager__summary { font-family: var(--font-ar); }
/* Page numbers stay Latin and LTR, like every other count in the shell. */
html[dir="rtl"] .dpager__btn { direction: ltr; unicode-bidi: embed; font-variant-numeric: lining-nums; }

/* ---- One empty state. The bare <p class="aempty"> pages inherit this too;
   inside an existing card it flattens to plain centred copy. ---- */
.aempty {
  display: block; margin: 0; padding: 40px 22px; text-align: center;
  font-family: var(--font-ui); font-size: 15px; color: var(--muted);
  background: var(--white); border-radius: var(--r-md); box-shadow: 0 3px 18px rgba(0,0,0,.06);
}
.aempty p { margin: 0; }
.aempty svg { display: inline-block; margin-bottom: 10px; color: var(--purple); opacity: .55; }
.acard .aempty, .atable-wrap .aempty { background: transparent; box-shadow: none; padding: 26px 12px; }

/* ---- Semantic badge aliases: map any status to one of five variants
   without inventing new palettes. ---- */
.abadge--success { background: #eaf9f2; color: #16794f; }
.abadge--warning { background: #fff6e0; color: #8a5b00; }
.abadge--danger { background: #fdecea; color: #a12d20; }
.abadge--info { background: #eef0fd; color: #4338ca; }
.abadge--neutral { background: var(--card); color: var(--muted); }

/* ---- Admin schedule agenda filters: one compact row of controls, not a
   stack of full-width fields. ---- */
.aschedule-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 18px; align-items: end; }
.aschedule-filters .pfield { gap: 6px; }
.aschedule-filters .pfield label { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink); }
.aschedule-filters .aform__actions { align-self: end; }
@media (max-width: 620px) { .aschedule-filters { grid-template-columns: 1fr 1fr; } .aschedule-filters .aform__actions { grid-column: 1 / -1; } }