/* ==========================================================================
   Visual layer (stage V). Loaded LAST, after public/client/specialist/admin, on every page.
   The owner asked (2026-10-15) for a site that is less text and more pictures and colour, in the spirit of the mobile
   apps: a gradient header card, one coloured picture per counselling area and per test, big touch tiles, short labels.
   Colours come from the families and gradients in tokens.css; text on a gradient is always white on a stop that keeps
   4.5:1, icons in a tile use the family ink (>= 3:1 on its background). Logical properties only.
   ========================================================================== */

/* ---------- colour families: set --ds-f-bg / --ds-f-ink for whatever carries the class ---------- */
.ds-f-teal   { --ds-f-bg: var(--ds-f-teal-bg);   --ds-f-ink: var(--ds-f-teal-ink); }
.ds-f-green  { --ds-f-bg: var(--ds-f-green-bg);  --ds-f-ink: var(--ds-f-green-ink); }
.ds-f-blue   { --ds-f-bg: var(--ds-f-blue-bg);   --ds-f-ink: var(--ds-f-blue-ink); }
.ds-f-sky    { --ds-f-bg: var(--ds-f-sky-bg);    --ds-f-ink: var(--ds-f-sky-ink); }
.ds-f-indigo { --ds-f-bg: var(--ds-f-indigo-bg); --ds-f-ink: var(--ds-f-indigo-ink); }
.ds-f-violet { --ds-f-bg: var(--ds-f-violet-bg); --ds-f-ink: var(--ds-f-violet-ink); }
.ds-f-pink   { --ds-f-bg: var(--ds-f-pink-bg);   --ds-f-ink: var(--ds-f-pink-ink); }
.ds-f-rose   { --ds-f-bg: var(--ds-f-rose-bg);   --ds-f-ink: var(--ds-f-rose-ink); }
.ds-f-red    { --ds-f-bg: var(--ds-f-red-bg);    --ds-f-ink: var(--ds-f-red-ink); }
.ds-f-orange { --ds-f-bg: var(--ds-f-orange-bg); --ds-f-ink: var(--ds-f-orange-ink); }
.ds-f-amber  { --ds-f-bg: var(--ds-f-amber-bg);  --ds-f-ink: var(--ds-f-amber-ink); }
.ds-f-slate  { --ds-f-bg: var(--ds-f-slate-bg);  --ds-f-ink: var(--ds-f-slate-ink); }

/* ---------- icon box ---------- */
.ds-ibox {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	inline-size: 3rem; block-size: 3rem; border-radius: 16px;
	background: var(--ds-f-bg, var(--ds-mint-strong)); color: var(--ds-f-ink, var(--ds-deep));
}
.ds-ibox--sm { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 11px; }
.ds-ibox--lg { inline-size: 4rem; block-size: 4rem; border-radius: 20px; }
.ds-ibox .ds-icon { stroke-width: 1.8; }

/* ---------- tiles: one picture, one short label ---------- */
.ds-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); }
.ds-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--ds-space-2);
	min-block-size: var(--ds-control-h); padding: var(--ds-space-4) var(--ds-space-2);
	background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card);
	color: var(--ds-text); text-align: center; text-decoration: none; font: inherit; cursor: pointer;
	transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.ds-tile:hover, .ds-tile:focus-visible { border-color: var(--ds-f-ink, var(--ds-action)); box-shadow: var(--ds-shadow-card); transform: translateY(-2px); text-decoration: none; color: var(--ds-text); }
.ds-tile__label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-tile__sub { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
@media (max-width: 639.98px) {
	.ds-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-2); }
	.ds-tile { padding: var(--ds-space-3) var(--ds-space-1); gap: var(--ds-space-1); border-radius: 14px; }
	.ds-tile .ds-ibox { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 14px; }
	.ds-tile__label { font-size: var(--ds-fs-xs); }
}
@media (max-width: 359.98px) { .ds-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- feature card on a gradient ---------- */
.ds-feature {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center; gap: var(--ds-space-4);
	inline-size: 100%; padding: var(--ds-space-5); border: 0; border-radius: 20px;
	background: var(--ds-grad-brand); color: #fff; text-align: start; text-decoration: none; font: inherit; cursor: pointer;
	box-shadow: var(--ds-shadow-card);
	--ds-focus: var(--ds-focus-on-dark);
}
div.ds-feature { cursor: default; }
.ds-feature::before, .ds-feature::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.ds-feature::before { inset-inline-end: -3.5rem; inset-block-start: -3.5rem; inline-size: 11rem; block-size: 11rem; background: rgba(255, 255, 255, 0.10); }
.ds-feature::after { inset-inline-start: -2rem; inset-block-end: -4rem; inline-size: 8rem; block-size: 8rem; background: rgba(0, 166, 147, 0.22); }
.ds-feature--night { background: var(--ds-grad-night); }
.ds-feature--berry { background: var(--ds-grad-berry); }
.ds-feature--sunset { background: var(--ds-grad-sunset); }
.ds-feature--slate { background: var(--ds-grad-slate); }
.ds-feature:hover { color: #fff; text-decoration: none; filter: brightness(1.04); }
.ds-feature__icon { flex: none; display: inline-grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; }
.ds-feature__body { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 0.15rem; }
.ds-feature__title { display: block; margin: 0; font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); color: #fff; }
.ds-feature__sub { display: block; margin: 0; font-size: var(--ds-fs-sm); color: rgba(255, 255, 255, 0.86); }
.ds-feature__arrow { flex: none; color: #fff; opacity: 0.9; }
.ds-feature--stack { flex-direction: column; align-items: stretch; gap: var(--ds-space-3); }
.ds-feature__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.ds-feature__who { display: flex; align-items: center; gap: var(--ds-space-3); min-inline-size: 0; }
.ds-feature__who .client-avatar, .ds-feature__who .sp-avatar { inline-size: 3.5rem; block-size: 3.5rem; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.2); color: #fff; font-size: var(--ds-fs-xl); }
.ds-feature__name { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold); color: #fff; line-height: var(--ds-lh-tight); }
.ds-feature .ds-pill { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2rem; padding: 0.25rem 0.8rem; border-radius: var(--ds-radius-pill); background: rgba(0, 0, 0, 0.24); color: #FDE68A; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); white-space: nowrap; }
.ds-feature .ds-pill--light { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ds-feature .ds-btn--light, .ds-btn--light { background: #fff; color: var(--ds-deep); border-color: #fff; }
.ds-feature .ds-btn--light:hover, .ds-btn--light:hover { background: var(--ds-mint); color: var(--ds-deep); }
.ds-feature .ds-btn--glass { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.ds-feature .ds-btn--glass:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.ds-feature .ds-feature__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-feature--note { color: rgba(255, 255, 255, 0.86); font-size: var(--ds-fs-xs); }

/* ---------- stat card ---------- */
.ds-stats { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ds-stat { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); min-inline-size: 0; }
.ds-stat__body { display: grid; gap: 0.1rem; min-inline-size: 0; flex: 1 1 auto; }
.ds-stat__num { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold); line-height: 1.25; overflow-wrap: anywhere; }
.ds-stat__label { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ds-stat > .ds-btn { flex: none; }

/* ---------- coloured card (tests, shortcuts) ---------- */
.ds-tilecards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* up to four test cards sit in ONE row on a desktop, compact (owner, 2026-10-15) */
@media (min-width: 900px) { .ds-tilecards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-tilecards > :nth-child(n+5) { display: none; } }
.ds-tilecard {
	position: relative; display: flex; flex-direction: column; gap: var(--ds-space-3); min-block-size: 100%;
	padding: var(--ds-space-4); border: 1px solid transparent; border-radius: 16px;
	background: var(--ds-f-bg, var(--ds-mint)); color: var(--ds-text); text-decoration: none; font: inherit; text-align: start; inline-size: 100%; cursor: pointer;
	transition: transform var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.ds-tilecard:hover { border-color: var(--ds-f-ink); transform: translateY(-2px); text-decoration: none; color: var(--ds-text); }
.ds-tilecard .ds-ibox { background: rgba(255, 255, 255, 0.78); inline-size: 3rem; block-size: 3rem; border-radius: 14px; }
.ds-tilecard .ds-ibox .ds-icon { inline-size: 1.5rem; block-size: 1.5rem; }
.ds-tilecard__title { margin: 0; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); }
.ds-tilecard__title a { color: inherit; text-decoration: none; }
.ds-tilecard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ds-tilecard__meta { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.ds-tilecard__cta { margin-block-start: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; min-block-size: 2.25rem; padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-f-ink); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm); }
/* a horizontal, swipeable row on phones */
@media (max-width: 639.98px) {
	.ds-tilecards--row { display: flex; max-inline-size: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--ds-space-2); scrollbar-width: none; }
	.pub-section .ds-tilecards--row { margin-inline: calc(-1 * var(--ds-gutter)); padding-inline: var(--ds-gutter); max-inline-size: none; }
	.ds-tilecards--row::-webkit-scrollbar { display: none; }
	.ds-tilecards--row > * { flex: 0 0 11.5rem; scroll-snap-align: start; }
}

/* ---------- step card ---------- */
.ds-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); counter-reset: dsstep; }
@media (min-width: 1024px) { .ds-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-step { position: relative; display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.ds-step__num { position: absolute; inset-inline-end: var(--ds-space-4); inset-block-start: var(--ds-space-4); display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); }
.ds-step__title { margin: 0; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); }
.ds-step__text { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

/* ---------- section head with a picture ---------- */
.ds-sechead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); margin-block-end: var(--ds-space-4); }
.ds-sechead__title { display: flex; align-items: center; gap: var(--ds-space-3); margin: 0; font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); flex: 1 1 0; min-inline-size: 0; }
.ds-sechead > .pub-textlink, .ds-sechead > .ds-btn { flex: none; }
@media (max-width: 639.98px) { .ds-tiles--8 > li:nth-child(n+9) { display: none; } }
.ds-sechead__title .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
.ds-sechead p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); flex-basis: 100%; }
.ds-sechead .pub-textlink, .ds-sechead .ds-btn { margin-inline-start: auto; }

/* ---------- coloured chips (areas on a specialist card) ---------- */
.tag-pill.ds-chip-c { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--ds-f-bg); color: var(--ds-f-ink); border-color: transparent; font-weight: var(--ds-fw-semibold); }
.tag-pill.ds-chip-c:hover { border-color: var(--ds-f-ink); background: var(--ds-f-bg); color: var(--ds-f-ink); }
.tag-pill.ds-chip-c .ds-icon { inline-size: 1em; block-size: 1em; }

/* ---------- rows with a picture (to-dos, attention, lists) ---------- */
.ds-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.ds-row { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: var(--ds-control-h); padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); color: var(--ds-text); text-decoration: none; font: inherit; text-align: start; inline-size: 100%; cursor: pointer; }
.ds-row:hover { border-color: var(--ds-f-ink, var(--ds-action)); background: var(--ds-f-bg, var(--ds-mint)); text-decoration: none; color: var(--ds-text); }
div.ds-row, li.ds-row { cursor: default; }
.ds-row__body { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 0.1rem; }
.ds-row__title { font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-sm); }
.ds-row__sub { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ds-row__end { flex: none; color: var(--ds-text-2); }

/* ==========================================================================
   Public site: the hero becomes the gradient card of the apps; sections get pictures.
   ========================================================================== */
.pub-hero, body.is-ravanline .pub-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--ds-grad-brand); color: #fff; border-block-end: 0; padding-block: var(--ds-space-10) var(--ds-space-10); }
.pub-hero::before, .pub-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.pub-hero::before { inset-inline-end: -8rem; inset-block-start: -10rem; inline-size: 26rem; block-size: 26rem; background: rgba(255, 255, 255, 0.08); }
.pub-hero::after { inset-inline-start: -6rem; inset-block-end: -12rem; inline-size: 22rem; block-size: 22rem; background: rgba(0, 166, 147, 0.28); }
.pub-hero h1 { color: #fff; }
.pub-hero__lead { color: rgba(255, 255, 255, 0.88); }
.pub-hero .btn--primary, .pub-hero .ds-btn--primary { background: #fff; color: var(--ds-deep); border-color: #fff; box-shadow: var(--ds-shadow-card); }
.pub-hero .btn--primary:hover, .pub-hero .ds-btn--primary:hover { background: var(--ds-mint); color: var(--ds-deep); }
.pub-hero .pub-textlink { color: #fff; }
.pub-hero .pub-textlink:hover { color: #fff; opacity: 0.9; }
.pub-hero__quick { color: rgba(255, 255, 255, 0.88); }
.pub-hero .pill { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.pub-hero .pill:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.pub-hero .pub-facts { color: rgba(255, 255, 255, 0.92); }
.pub-hero .pub-facts .ds-icon { color: #FDE68A; }
.pub-hero { --ds-focus: var(--ds-focus-on-dark); }
.pub-hero .pub-panel { --ds-focus: #005B50; color: var(--ds-text); border: 0; box-shadow: var(--ds-shadow-card); border-radius: 20px; }
.pub-hero .pub-panel p { color: var(--ds-text-2); }
.pub-hero .pub-panel .pub-textlink { color: var(--ds-deep); }
.pub-avatars__item { inline-size: 4rem; block-size: 4rem; }
.pub-panel__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }
.pub-panel__tiles .ds-tile { padding: var(--ds-space-2) 0.25rem; border-radius: 12px; gap: 0.25rem; }
.pub-panel__tiles .ds-tile .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
.pub-panel__tiles .ds-tile__label { font-size: 0.8125rem; }

/* sections: a tinted band alternates with white; headings carry a coloured picture */
.pub-section--tint { background: var(--ds-bg); }

/* specialists band and the "for specialists" strip */
.pub-pro { background: var(--ds-grad-night); color: #fff; border: 0; border-radius: 20px; position: relative; overflow: hidden; isolation: isolate; --ds-focus: var(--ds-focus-on-dark); }
.pub-pro::before { content: ""; position: absolute; inset-inline-end: -4rem; inset-block-start: -5rem; inline-size: 14rem; block-size: 14rem; border-radius: 50%; background: rgba(255, 255, 255, 0.10); z-index: -1; }
.pub-pro h2, .pub-pro p, .pub-pro ul { color: #fff; }
.pub-pro p, .pub-pro ul { color: rgba(255, 255, 255, 0.86); }
.pub-pro .btn--outline, .pub-pro .ds-btn--secondary { background: #fff; color: #1E3A8A; border-color: #fff; }
.pub-pro .btn--outline:hover { background: #E0ECFF; color: #1E3A8A; }
.pub-pro .pub-textlink { color: #fff; }
.pub-pro__head { display: flex; align-items: center; gap: var(--ds-space-3); margin-block-end: var(--ds-space-2); }
.pub-pro__head .ds-feature__icon { inline-size: 3rem; block-size: 3rem; }
.pub-pro__head h2 { margin: 0; }

/* costs: four picture rows + a price card with a gradient head */
.pub-costs__rows { display: grid; gap: var(--ds-space-3); }
.pub-price { padding: 0; overflow: hidden; border-radius: 20px; }
.pub-price__head { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-grad-brand); color: #fff; }
.pub-price__head h3 { margin: 0; color: #fff; font-size: var(--ds-fs-lg); }
.pub-price__head .ds-feature__icon { inline-size: 2.75rem; block-size: 2.75rem; }
.pub-price__body { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); }
.pub-price__value { font-size: var(--ds-fs-lg); color: var(--ds-deep); }

/* specialist cards: a little more picture */
.specialist-card .specialist-card__photo { aspect-ratio: 4 / 3; }
.specialist-card .ds-btn--secondary { background: var(--ds-action); color: #fff; border-color: var(--ds-action); }
.specialist-card .ds-btn--secondary:hover { background: var(--ds-action-hover); color: #fff; }
.specialist-card:hover { box-shadow: var(--ds-shadow-card); }

/* ==========================================================================
   Panels (client, specialist, admin): a coloured picture next to every destination; sections with pictures.
   ========================================================================== */
.dashboard-nav__item > svg { flex: none; inline-size: 2.25rem; block-size: 2.25rem; padding: 0.5rem; border-radius: 11px; background: var(--ds-tint); color: var(--ds-deep); }
.dashboard-nav__item.is-active > svg, .dashboard-nav__item[aria-current="page"] > svg { background: var(--ds-action); color: #fff; }
.dashboard-nav__item--logout > svg { background: var(--ds-danger-bg); color: var(--ds-danger); }
.dashboard-sidebar__user { background: var(--ds-grad-brand) !important; color: #fff !important; border-radius: 20px !important; }
.dashboard-sidebar__user .dashboard-sidebar__name, .dashboard-sidebar__user strong, .dashboard-sidebar__user small { color: #fff !important; }
.dashboard-sidebar__user .dashboard-sidebar__avatar { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.6); }
.dashboard-sidebar__user .notif-bell { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: transparent; }
.ds-tabbar .ds-tabbar__item[aria-current="page"] .ds-icon, .ds-tabbar .ds-tabbar__item.is-active .ds-icon { background: var(--ds-mint-strong); border-radius: 10px; padding: 0.2rem; box-sizing: content-box; }

/* client home */
#mentayar-client-dashboard .dashboard-content { min-inline-size: 0; }
.client-home, .client-home__main, .client-home__side { min-inline-size: 0; }
/* one auto grid track must never grow to the max-content of a swipeable row (4 cards side by side): the track is minmax(0, 1fr) */
.client-home { grid-template-columns: minmax(0, 1fr); }
.client-home__main, .client-home__side { grid-template-columns: minmax(0, 1fr); }
.client-home__main > *, .client-home__side > * { min-inline-size: 0; }
@media (min-width: 1100px) { .client-home { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); } }
.client-home { gap: var(--ds-space-5); }
.client-home__hero { display: grid; gap: var(--ds-space-3); }
.client-services { display: grid; gap: var(--ds-space-3); }
.client-home .client-h2 { font-size: var(--ds-fs-xl); }
.client-home .client-box { margin-block-end: 0; }
.client-todo { display: none; }
.client-home__tests .ds-tilecards { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.client-subbox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.client-subbox .client-box__head { flex: 1 1 100%; }

/* specialist home */
.sp-home { gap: var(--ds-space-5); }
.sp-today__item { border-inline-start: 4px solid var(--ds-f-ink, var(--ds-action)); }
.sp-today__time { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 3.5rem; padding: 0.3rem 0.6rem; border-radius: 10px; background: var(--ds-f-teal-bg); color: var(--ds-f-teal-ink); }
.sp-attn__item { background: var(--ds-f-amber-bg); border-color: transparent; }
.sp-attn__item > span { display: flex; align-items: center; gap: var(--ds-space-3); }

/* print: no gradients */
@media print { .ds-feature, .pub-hero, .pub-pro, .pub-price__head, .dashboard-sidebar__user { background: #fff !important; color: #000 !important; box-shadow: none; } }
@media (forced-colors: active) { .ds-tile, .ds-feature, .ds-stat, .ds-tilecard, .ds-row, .ds-step { border: 1px solid CanvasText; } }

/* ---------- specialist card facts as icon chips; a letter instead of an empty photo box ---------- */
.ds-factchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-factchips li { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2rem; padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); background: var(--ds-tint); color: var(--ds-text); font-size: var(--ds-fs-xs); }
.ds-factchips .ds-icon { color: var(--ds-deep); flex: none; }
.specialist-card__photo--initial { display: grid; place-items: center; background: var(--ds-grad-brand); }
.specialist-card__photo--initial span { font-size: 3rem; font-weight: var(--ds-fw-bold); color: #fff; }
.client-card .specialist-card__photo:has(> .specialist-card__photo--initial), #mentayar-directory-results .client-card .specialist-card__photo:has(> .specialist-card__photo--initial) { aspect-ratio: 4 / 3; block-size: auto; height: auto; }

/* specialist home: stat cards with a picture */
.sp-statcard__head { display: flex; align-items: flex-start; gap: var(--ds-space-3); }
.sp-statcard__head > div { min-inline-size: 0; flex: 1; }
.sp-statcard__head p { margin: 0; }
.sp-statcard .sp-h2 { margin-block-end: var(--ds-space-1); }
.sp-next .sp-avatar { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--ds-fs-xl); }
.sp-home .sp-h2.ds-sechead__title { font-size: var(--ds-fs-xl); margin-block-end: var(--ds-space-3); }
.sp-attn__item { background: var(--ds-surface); }
.client-card .specialist-card__photo--placeholder.specialist-card__photo--initial, #mentayar-directory-results .client-card .specialist-card__photo--placeholder.specialist-card__photo--initial { display: grid; place-items: center; background: var(--ds-grad-brand); background-image: var(--ds-grad-brand); inline-size: 100%; block-size: 100%; }
.client-card .specialist-card__photo--initial::before, .client-card .specialist-card__photo--initial::after { content: none; }

/* The specialist profile page has its own sheet now: assets/css/ds/profile.css (redesign, 2026-10-17). */

/* ==========================================================================
   Admin panel (stage V): gradient hero, pictures on the queue, headings and facts.
   ========================================================================== */
body.ds-admin .dash-hero { background: var(--ds-grad-brand); border-radius: 20px; box-shadow: var(--ds-shadow-card); }
body.ds-admin .dashboard-content > section > h1::before { content: none; }
body.ds-admin .dashboard-content > section > h1 { display: flex; align-items: center; gap: var(--ds-space-3); }
body.ds-admin .ds-queue__link { gap: var(--ds-space-3); }
body.ds-admin .ds-queue__pic { flex: none; }
body.ds-admin .ds-queue__item { border-inline-start-width: 1px; }
body.ds-admin .ds-queue__item--urgent { border-inline-start: 4px solid var(--ds-f-red-ink); background: var(--ds-f-red-bg); }
body.ds-admin .ds-queue__item--action { border-inline-start: 4px solid var(--ds-f-amber-ink); background: var(--ds-f-amber-bg); }
body.ds-admin .ds-queue__item--urgent .ds-queue__link:hover, body.ds-admin .ds-queue__item--action .ds-queue__link:hover { background: rgba(255, 255, 255, 0.5); }
body.ds-admin .dashboard-content h2.ds-sechead__title { display: flex; align-items: center; gap: var(--ds-space-3); }
body.ds-admin .ds-disclosure > summary .ds-ibox { margin-inline-end: var(--ds-space-1); }
body.ds-admin .ds-facts > div { border-block-start: 4px solid var(--ds-action); }
body.ds-admin .ds-facts > div:nth-child(4n+2) { border-block-start-color: var(--ds-f-blue-ink); }
body.ds-admin .ds-facts > div:nth-child(4n+3) { border-block-start-color: var(--ds-f-violet-ink); }
body.ds-admin .ds-facts > div:nth-child(4n+4) { border-block-start-color: var(--ds-f-amber-ink); }
body.ds-admin .ds-facts dd { color: var(--ds-deep); }
body.ds-admin .dashboard-nav__group-toggle { font-weight: var(--ds-fw-bold); color: var(--ds-text-2); }

/* ---------- Header on a desktop: the menu never runs under the action buttons ---------- */
@media (min-width: 1200px) {
	.site-nav { margin-inline-start: 16px; overflow: hidden; }
	html[lang^="en"] .site-nav ul li a, html[lang^="en"] .site-nav__more > summary { padding-inline: 10px; }
	.site-header__actions .btn--primary { white-space: nowrap; }
}

/* ==========================================================================
   Footer: the dark footer of the original site (owner, 2026-10-15), one-line about text, no emergency note.
   ========================================================================== */
.site-footer { background: #0F2231; color: #CBD5E1; border-block-start: 0; }
body.is-ravanline .site-footer { background: #1F2A2E; }
.site-footer__top { border-block-end: 1px solid rgba(255, 255, 255, 0.10); }
.site-footer__top p { color: #CBD5E1; max-inline-size: none; font-size: var(--ds-fs-md); }
@media (min-width: 900px) { .site-footer__top p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.site-footer__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-space-6); }
@media (max-width: 1023.98px) { .site-footer__inner { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.site-footer__heading, .site-footer h4 { color: #fff; }
.site-footer a { color: #CBD5E1; }
.site-footer a:hover { color: #fff; }
.site-footer__col p { color: #94A3B8; }
.site-footer__social a { background: rgba(255, 255, 255, 0.10); color: #fff; border-color: transparent; }
.site-footer__social a:hover { background: var(--ds-action); color: #fff; }
.site-footer__bottom { color: #94A3B8; border-block-start: 1px solid rgba(255, 255, 255, 0.10); }
.site-footer { --ds-focus: var(--ds-focus-on-dark); }

/* outcome monitoring + SOAP (2026-10-15) */
.sp-fit__flags { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-block: var(--ds-space-2); }
.sp-note-kind { margin-block-end: var(--ds-space-3); }
.sp-soap { display: grid; gap: 0; }
.sp-soap-view { margin: var(--ds-space-2) 0 0; display: grid; gap: var(--ds-space-2); }
.sp-soap-view dt { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-deep); }
.sp-soap-view dd { margin: 0; }
.sp-soap-view > div { border-inline-start: 3px solid var(--ds-f-blue-ink); padding-inline-start: var(--ds-space-3); }
.ds-at-risk td.is-flags { font-size: var(--ds-fs-xs); }


/* ==========================================================================
   Links (owner, 2026-10-16): no underline anywhere. A text link is told apart by colour and weight; the pointer (and keyboard focus)
   answers with a colour shift and a soft mint highlight that fades in. Cards, buttons and navigation keep their own hover.
   ========================================================================== */
a, a:hover, a:focus, a:active, button.client-linkbtn, .mas-link { text-decoration: none; }
:where(p, dd, .ds-prose, .pub-form__intro, .legal-page__content, .mp, .directory-empty__foot) a:where(:not(.btn, .ds-btn, .ds-card__link, .ds-nolink)),
.pub-textlink, .client-linkbtn, .mas-link, .breadcrumb a, .pub-values a, .pub-contact__item a {
	border-radius: 0.35em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
	transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
:where(p, dd, .ds-prose, .pub-form__intro, .legal-page__content, .mp, .directory-empty__foot) a:where(:not(.btn, .ds-btn, .ds-card__link, .ds-nolink)):is(:hover, :focus-visible),
.pub-textlink:is(:hover, :focus-visible), .client-linkbtn:is(:hover, :focus-visible), .mas-link:is(:hover, :focus-visible),
.breadcrumb a:is(:hover, :focus-visible), .pub-values a:is(:hover, :focus-visible), .pub-contact__item a:is(:hover, :focus-visible) {
	color: var(--ds-action-hover);
	background-color: var(--ds-mint-strong);
	box-shadow: 0 0 0 0.22em var(--ds-mint-strong);
}
/* links inside lists (cards, menus): colour only, each component keeps its own lift/border */
:where(li) > a:where(:not(.btn, .ds-btn, .ds-nolink)):hover { color: var(--ds-action-hover); }
/* the dark footer: lighter text and a faint glass highlight */
.site-footer a { transition: color 0.18s ease, background-color 0.18s ease; border-radius: 0.35em; }
.site-footer a:is(:hover, :focus-visible) { color: #fff; background-color: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 0.22em rgba(255, 255, 255, 0.08); }
.site-footer__social a:hover { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { a, button { transition: none !important; } }

/* ==========================================================================
   VISUAL PASS 2 (2026-10-17). Owner: "everything very simple, smooth and more visual, so the user is never confused".
   One clear next step per screen, pictures before words, one primary button per section, the same spacing / radius / shadow
   everywhere. Everything below is additive and overrides the older layers only where it says so. Logical properties (RTL + LTR).
   Scale used here: space 4/8/12/16/24/32/48, radius 12 (chips, inputs) / 20 (cards, tiles) / pill, shadow = --ds-shadow-card.
   ========================================================================== */

/* ---------- 1. Home hero: one short line, ONE primary tile (the matching quiz), a second tile for the assistant ---------- */
.home-hero { padding-block: var(--ds-space-10) var(--ds-space-12); }
.home-hero__title { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); margin-block-end: var(--ds-space-3); }
.home-hero__lead { font-size: var(--ds-fs-lg); max-inline-size: 34rem; margin-block-end: var(--ds-space-5); }
.home-hero__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); max-inline-size: 38rem; }
.home-hero__tiles--single { grid-template-columns: minmax(0, 1fr); max-inline-size: 22rem; }
.home-bigtile {
	position: relative; display: flex; align-items: center; gap: var(--ds-space-3);
	min-block-size: 4.5rem; padding: var(--ds-space-3) var(--ds-space-4);
	border: 2px solid var(--ds-line); border-radius: 20px; background: var(--ds-surface); color: var(--ds-text);
	text-align: start; box-shadow: var(--ds-shadow-card);
	transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), filter var(--ds-dur) var(--ds-ease);
}
.home-bigtile:hover, .home-bigtile:focus-visible { transform: translateY(-2px); border-color: var(--ds-f-ink, var(--ds-action)); color: var(--ds-text); }
.home-bigtile__icon { flex: none; display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 16px; background: var(--ds-f-blue-bg); color: var(--ds-f-blue-ink); }
.home-bigtile__text { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 0.1rem; }
.home-bigtile__title { display: block; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); }
.home-bigtile__sub { display: block; font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.4; }
.home-bigtile__arrow { flex: none; color: var(--ds-text-2); }
.home-bigtile--primary { border-color: transparent; background: var(--ds-grad-brand); color: #fff; --ds-focus: var(--ds-focus-on-dark); }
.home-bigtile--primary:hover, .home-bigtile--primary:focus-visible { border-color: transparent; color: #fff; filter: brightness(1.06); }
.home-bigtile--primary .home-bigtile__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.home-bigtile--primary .home-bigtile__sub { color: rgba(255, 255, 255, 0.92); }
.home-bigtile--primary .home-bigtile__arrow { color: #fff; }
.home-bigtile--soft { --ds-f-ink: var(--ds-f-blue-ink); }
body.is-ravanline .home-bigtile--soft { --ds-f-ink: var(--ds-accent); }
body.is-ravanline .home-bigtile--soft .home-bigtile__icon { background: var(--ds-accent-bg); color: var(--ds-accent); }
.home-hero__browse { margin: var(--ds-space-3) 0 0; }
.home-hero__browse .pub-textlink { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-block-size: var(--ds-control-h); }
.home-hero__trust { gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }
.home-hero__trust li { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.25rem; padding-inline: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.home-hero__trust .ds-icon { color: var(--ds-action); flex: none; }
@media (max-width: 900px) {
	.home-hero { padding-block: var(--ds-space-8) var(--ds-space-8); }
	.home-hero__tiles, .home-hero__tiles--single { margin-inline: auto; max-inline-size: 30rem; }
	.home-hero__tiles { grid-template-columns: minmax(0, 1fr); }
	.home-hero__tiles--single { max-inline-size: 30rem; }
	.home-hero__lead { font-size: var(--ds-fs-md); }
	.home-stats { margin-block-start: calc(-1 * var(--ds-space-6)); }
}
@media (max-width: 640px) {
	.home-hero__eyebrow { margin-block-end: var(--ds-space-3); }
	.home-hero__title { font-size: 1.85rem; }
	.home-hero__trust { margin-block-start: var(--ds-space-3); gap: var(--ds-space-2); }
	.home-hero__trust li { padding-inline: var(--ds-space-2); font-size: 0.8125rem; }
	/* the visual card shrinks to the faces and one line; the floating chips and the long footer go (the tile above is the action) */
	.home-hero__visual { padding: 0; margin-block-start: var(--ds-space-5); max-inline-size: 22rem; }
	.home-hero__visual::before, .home-hero__chip { display: none; }
	.home-spotlight { box-shadow: var(--ds-shadow-card); }
	.home-spotlight__cover { aspect-ratio: auto; padding: var(--ds-space-4); gap: var(--ds-space-2); }
	.home-spotlight__body { padding: var(--ds-space-3) var(--ds-space-4); text-align: center; }
	.home-spotlight__name, .home-spotlight__areas, .home-spotlight__footer, .home-glance-list { display: none; }
	.home-stats { display: none; }
	.home-hero { padding-block-end: var(--ds-space-8); }
}

/* ---------- 2. Section rhythm and headings ---------- */
.pub-section { padding-block: var(--ds-space-10); }
@media (max-width: 640px) { .pub-section { padding-block: var(--ds-space-8); } }
.ds-sechead__title { font-size: var(--ds-fs-xl); }
@media (min-width: 900px) { .ds-sechead__title { font-size: var(--ds-fs-2xl); } }

/* areas: 3 columns x 2 rows on a phone, one calm row-set of 6 on a desktop; the full list is one tap away ("all") */
@media (min-width: 640px) { .ds-tiles--home { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ds-tiles--home { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
	.ds-tiles--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); }
	.ds-tiles--home > li:nth-child(n+7) { display: none; }
	.ds-tiles--home .ds-tile { padding: var(--ds-space-3) var(--ds-space-2); min-block-size: 6.25rem; }
	.ds-tiles--home .ds-tile .ds-ibox { inline-size: 3rem; block-size: 3rem; }
	.ds-tiles--home .ds-tile__label { font-size: var(--ds-fs-xs); }
}
.ds-tile { border-radius: 20px; }
.ds-tile:focus-visible, .home-bigtile:focus-visible, .ds-tilecard:focus-within { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }

/* how it works: three big pictures in one row, one or two words each */
.ds-steps.ds-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); }
.ds-steps--three .ds-step { justify-items: center; text-align: center; gap: var(--ds-space-2); padding: var(--ds-space-5) var(--ds-space-3); border-radius: 20px; }
.ds-steps--three .ds-step .ds-ibox { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 18px; }
.ds-steps--three .ds-step .ds-ibox .ds-icon { inline-size: 1.75rem; block-size: 1.75rem; }
.ds-steps--three .ds-step__num { inset-inline-end: auto; inset-inline-start: var(--ds-space-3); inset-block-start: var(--ds-space-3); }
.ds-steps--three .ds-step__title { font-size: var(--ds-fs-md); }
@media (min-width: 640px) {
	/* a soft arrow between the cards */
	.ds-steps--three .ds-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(-1 * var(--ds-space-3) - 5px); inline-size: 10px; block-size: 10px; border-block-start: 2px solid var(--ds-control-line); border-inline-end: 2px solid var(--ds-control-line); transform: translateY(-50%) rotate(45deg); z-index: 1; }
	[dir="rtl"] .ds-steps--three .ds-step:not(:last-child)::after { transform: translateY(-50%) rotate(-45deg); }
}
@media (max-width: 639.98px) {
	.ds-steps--three { gap: var(--ds-space-2); }
	.ds-steps--three .ds-step { padding: var(--ds-space-4) var(--ds-space-2); border-radius: 16px; }
	.ds-steps--three .ds-step__text { display: none; }
	.ds-steps--three .ds-step .ds-ibox { inline-size: 3rem; block-size: 3rem; }
	.ds-steps--three .ds-step__title { font-size: var(--ds-fs-sm); line-height: 1.35; }
}

/* ---------- 3. Specialist card: one scannable card everywhere (home, directory, quiz result) ----------
   photo | name + title, then at most three topic chips, three fact chips (formats first), next free times, price + one button.
   The card is built by specialist/card.php AND by client-core.js (specialistCardHtml): the rules below only use the classes both write. */
.specialist-card.client-card {
	display: flex !important; flex-direction: column !important; align-items: stretch; min-height: 0 !important;
	gap: var(--ds-space-3); padding: var(--ds-space-4); overflow: visible;
	border: 1px solid var(--ds-line); border-radius: 20px; background: var(--ds-surface); box-shadow: none;
	transition: box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.specialist-card.client-card:hover { border-color: var(--ds-action); box-shadow: var(--ds-shadow-card); }
/* the card is a flex column: the head (photo + name + title) on top, the body below it; the body's foot (price + button) sits on the card's bottom line, see simple.css "specialist card" */
.specialist-card.client-card .specialist-card__photo,
#mentayar-directory-results .specialist-card.client-card .specialist-card__photo,
.specialist-card.client-card .specialist-card__photo:has(> .specialist-card__photo--placeholder) {
	grid-column: 1; grid-row: 1 / span 2; position: relative; inline-size: 4.75rem !important; block-size: 4.75rem !important; height: 4.75rem !important; width: 4.75rem !important;
	aspect-ratio: 1 !important; flex: none; align-self: start; border-radius: 50%; overflow: visible; background: transparent;
}
.specialist-card.client-card .specialist-card__photo img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; object-position: center top; box-shadow: 0 0 0 3px var(--ds-surface), 0 0 0 4.5px var(--ds-mint-strong); }
.specialist-card.client-card .specialist-card__photo--initial,
.client-card .specialist-card__photo--placeholder.specialist-card__photo--initial,
#mentayar-directory-results .client-card .specialist-card__photo--placeholder.specialist-card__photo--initial { inline-size: 100%; block-size: 100%; border-radius: 50%; box-shadow: 0 0 0 3px var(--ds-surface), 0 0 0 4.5px var(--ds-mint-strong); }
.specialist-card.client-card .specialist-card__photo--initial span { font-size: 1.75rem; }
.specialist-card.client-card .specialist-card__badge { inset: auto; inset-block-end: -0.6rem; inset-inline: 0; margin-inline: auto; inline-size: max-content; z-index: 1; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.5rem; border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 1px solid var(--ds-line); font-size: 0.8125rem; font-weight: var(--ds-fw-bold); box-shadow: 0 2px 6px rgba(23, 43, 42, 0.12); }
.specialist-card.client-card .specialist-card__name { grid-column: 2 / -1; grid-row: 1; align-self: end; margin: 0; font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); }
.specialist-card.client-card .specialist-card__title { grid-column: 2 / -1; grid-row: 2; align-self: start; margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); line-height: 1.5; }
.specialist-card.client-card .credential-pills { display: none; }
.specialist-card.client-card .tag-pills, .specialist-card.client-card .ds-factchips, .specialist-card.client-card .client-card__intro,
.specialist-card.client-card .client-card__slots, .specialist-card.client-card .matching-quiz__reasons { grid-column: 1 / -1; margin: 0; }
.specialist-card.client-card .tag-pills { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-block-start: var(--ds-space-1); }
.specialist-card.client-card .tag-pills > :nth-child(n+4) { display: none; }
/* chips look 2rem tall but keep a 44px touch area (the whole card is a link as well) */
.specialist-card.client-card a.tag-pill.ds-chip-c { position: relative; min-block-size: 2rem; padding: 0.15rem 0.7rem; font-size: var(--ds-fs-xs); }
.specialist-card.client-card a.tag-pill.ds-chip-c::after { content: ""; position: absolute; inset-inline: 0; inset-block: -0.375rem; }
.specialist-card.client-card .ds-factchips { gap: var(--ds-space-2); }
.specialist-card.client-card .ds-factchips > :nth-child(n+4) { display: none; }
.specialist-card.client-card .ds-factchips li { min-block-size: 2rem; background: var(--ds-tint); border-radius: var(--ds-radius-pill); padding-inline: var(--ds-space-3); }
.specialist-card.client-card .client-card__intro { display: inline-flex; align-items: center; justify-self: start; min-block-size: 2rem; padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-f-amber-bg); color: var(--ds-f-amber-ink); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.specialist-card.client-card .client-card__slots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-fs-xs); }
.specialist-card.client-card .client-card__slots > .client-muted { flex-basis: 100%; }
.specialist-card.client-card .client-slotlist > li:nth-child(n+3) { display: none; }
.specialist-card.client-card .client-slotlist > li:first-child .client-slot { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.specialist-card.client-card .client-slot { padding: 0.3rem 0.75rem; font-size: var(--ds-fs-xs); }
.specialist-card.client-card .matching-quiz__reasons { display: grid; gap: var(--ds-space-1); padding-inline-start: var(--ds-space-4); }
.specialist-card.client-card .specialist-card__meta { margin: 0; display: block; font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); color: var(--ds-deep); }
.specialist-card.client-card .specialist-card__meta .client-muted { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-regular); }
.specialist-card.client-card .specialist-card__actions { margin: 0; }
.specialist-card.client-card .specialist-card__actions .ds-btn, .specialist-card.client-card .specialist-card__actions .btn { inline-size: 100%; }
/* the directory list and the quiz result list are wide: price on one side, the button on the other (simple.css "specialist card") */
.matching-quiz__results .specialist-grid { grid-template-columns: minmax(0, 1fr) !important; }
.specialist-card.client-card .specialist-card__actions .ds-btn, .specialist-card.client-card .specialist-card__actions .btn { min-block-size: var(--ds-control-h); padding-inline: var(--ds-space-5); border-radius: 14px; white-space: nowrap; }
@media (max-width: 639.98px) {
	.specialist-card.client-card { padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4); gap: var(--ds-space-2); }
	.specialist-card.client-card .specialist-card__photo, #mentayar-directory-results .specialist-card.client-card .specialist-card__photo,
	.specialist-card.client-card .specialist-card__photo:has(> .specialist-card__photo--placeholder) { inline-size: 4.25rem !important; block-size: 4.25rem !important; height: 4.25rem !important; width: 4.25rem !important; }
}
/* the home grid and the directory list: three across / one column of wide cards, same gap */
.specialist-grid { gap: var(--ds-space-4); }
@media (min-width: 640px) and (max-width: 1023.98px) { .specialist-grid:not(#mentayar-directory-results) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .specialist-grid:not(#mentayar-directory-results) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023.98px) { .specialist-grid--few { display: grid !important; } }

/* phone: shorter trust row (two chips fit one line), a quieter specialists band, a tighter FAQ head */
@media (max-width: 640px) {
	.home-hero__trust li:nth-child(n+3) { display: none; }
	.pub-pro ul { display: none; }
	.pub-faq { gap: var(--ds-space-4); }
	.pub-faq > div:first-child p { margin-block-end: var(--ds-space-1); }
}
@media (min-width: 901px) {
	.home-hero__tiles { max-inline-size: 41rem; }
	.home-hero__tiles:not(.home-hero__tiles--single) .home-bigtile__arrow { display: none; }
}

/* card: the legacy directory rules give the body's children a flex `order` and a line-break ::before; in the grid they must not */
.specialist-card.client-card .specialist-card__body > * { order: 0 !important; }
.specialist-card.client-card .specialist-card__body::before, .specialist-card.client-card .specialist-card__body::after { display: none !important; content: none !important; }

/* ---------- 4. Directory + quiz page head: the two guided ways in are picture tiles ---------- */
.client-pagehead .ds-pagehead { align-items: flex-end; gap: var(--ds-space-4) var(--ds-space-6); margin-block-end: var(--ds-space-4); }
.client-pagehead .ds-pagehead__title { font-size: var(--ds-fs-3xl); }
.dir-entries { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.dir-entry { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: 4rem; padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-2) var(--ds-space-2); border: 1.5px solid var(--ds-line); border-radius: 20px; background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-card); text-align: start; transition: transform var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); }
[dir="rtl"] .dir-entry { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-4); }
.dir-entry:hover, .dir-entry:focus-visible { transform: translateY(-2px); border-color: var(--ds-f-ink); color: var(--ds-text); }
.dir-entry:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.dir-entry .ds-ibox { inline-size: 3rem; block-size: 3rem; border-radius: 16px; }
.dir-entry__text { display: grid; gap: 0.1rem; min-inline-size: 0; }
.dir-entry__title { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); }
.dir-entry__sub { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
@media (max-width: 640px) {
	.client-pagehead .ds-pagehead__title { font-size: var(--ds-fs-2xl); }
	.client-pagehead .ds-pagehead__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.client-pagehead .ds-pagehead > div:first-child { flex-basis: 100%; }
	.dir-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; gap: var(--ds-space-2); }
	.dir-entries--single { grid-template-columns: minmax(0, 1fr); }
	.dir-entry { gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-2); min-block-size: 3.75rem; border-radius: 16px; }
	[dir="rtl"] .dir-entry { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-3); }
	.dir-entry .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
	.dir-entry__sub { display: none; }
}

/* the search row and the filters button */
.filters-searchbar input { border-radius: 14px; }
.filters-searchbar .ds-btn { border-radius: 14px; min-block-size: var(--ds-control-h); }
.directory-layout { row-gap: var(--ds-space-3); }
.client-directory .directory-toolbar { align-items: baseline; margin-block-end: var(--ds-space-3); }
.client-directory .directory-toolbar .client-muted { font-size: var(--ds-fs-xs); }
@media (max-width: 640px) {
	.filters-toggle-mobile { border-radius: 14px; }
}

/* ---------- 5. Matching quiz ("Find my specialist"): picture tiles like the app, one question per screen ---------- */
.matching-quiz { max-inline-size: 44rem; }
.matching-quiz__intro { display: grid; justify-items: center; gap: var(--ds-space-4); padding: var(--ds-space-8) var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 24px; box-shadow: var(--ds-shadow-card); }
.mq-intro__icons { display: flex; gap: var(--ds-space-3); list-style: none; margin: 0; padding: 0; }
.mq-intro__icons .ds-ibox { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 18px; }
.mq-intro__note { margin: 0; max-inline-size: 22rem; color: var(--ds-text-2); font-size: var(--ds-fs-md); }
.matching-quiz__progress-bar { block-size: 0.5rem; margin-block-end: var(--ds-space-5); }
.matching-quiz__progress-bar > div { background: linear-gradient(90deg, var(--ds-brand), var(--ds-action)); transition: width 0.4s var(--ds-ease); }
.matching-quiz__question { padding: var(--ds-space-5); margin-block: 0 var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: 24px; box-shadow: var(--ds-shadow-card); }
.matching-quiz__question h2 { font-size: var(--ds-fs-xl); line-height: 1.5; margin: 0 0 var(--ds-space-1); }
.matching-quiz__hint { margin-block: 0 var(--ds-space-4); font-size: var(--ds-fs-sm); }
.matching-quiz .pill-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--ds-space-3); margin-block-start: var(--ds-space-3); }
@media (max-width: 480px) { .matching-quiz .pill-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); } .matching-quiz__question { padding: var(--ds-space-4); } }
.matching-quiz .pill { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--ds-space-2); min-block-size: 6.5rem; padding: var(--ds-space-4) var(--ds-space-2) var(--ds-space-3); border: 2px solid var(--ds-line); border-radius: 20px; background: var(--ds-surface); color: var(--ds-text); text-align: center; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); line-height: 1.4; transition: border-color var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.matching-quiz .pill.mq-opt:not(:has(.mq-opt__ic)) { justify-content: center; }
.matching-quiz .pill:hover:not(:has(input:checked)) { border-color: var(--ds-f-ink, var(--ds-action)); background: var(--ds-surface); transform: translateY(-1px); color: var(--ds-text); }
.matching-quiz .pill:has(input:checked) { border-color: var(--ds-action); background: var(--ds-mint-strong); color: var(--ds-deep); }
.matching-quiz .pill:has(input:checked)::after { content: ""; position: absolute; inset-block-start: var(--ds-space-2); inset-inline-end: var(--ds-space-2); inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.matching-quiz .pill:has(input:focus-visible) { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.mq-opt__ic { display: inline-grid; place-items: center; flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 16px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.mq-opt__t { display: block; }
.matching-quiz__nav { justify-content: space-between; margin-block-start: var(--ds-space-4); }
.matching-quiz__nav .ds-btn { min-block-size: 3rem; border-radius: 14px; min-inline-size: 7rem; }
@media (max-width: 480px) { .matching-quiz__nav .ds-btn--primary { flex: 1 1 auto; } }
.matching-quiz__progress-text { font-size: var(--ds-fs-sm); }
.matching-quiz__results h2 { font-size: var(--ds-fs-xl); }
@media (prefers-reduced-motion: reduce) { .matching-quiz .pill, .matching-quiz__progress-bar > div, .home-bigtile, .dir-entry, .ds-tile { transition: none; transform: none !important; } }
/* the legend of a fieldset sits ON its border by default; keep the question inside the card */
.matching-quiz__question > legend { float: inline-start; inline-size: 100%; padding: 0; margin: 0 0 var(--ds-space-2); }
.matching-quiz__question > legend + * { clear: both; }
/* while the questions are on screen, the page head shrinks to the title and the skip link */
body:has([data-quiz-form]:not([hidden])) .client-pagehead .ds-pagehead__sub,
body:has([data-quiz-form]:not([hidden])) .client-pagehead .ds-breadcrumb { display: none; }

/* ---------- 6. Header (phone/tablet): the open menu panel spans the screen (the desktop 28px start margin used to shift it) ---------- */
@media (max-width: 1199px) {
	.site-nav { margin-inline-start: 0; border-end-start-radius: 20px; border-end-end-radius: 20px; }
	.site-nav ul li a { min-block-size: var(--ds-control-h); display: flex; align-items: center; }
}

/* ---------- 7. Footer on a phone: link columns two across (the page used to end in a very long single column) ---------- */
@media (max-width: 640px) {
	.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-4) var(--ds-space-4); padding-block: var(--ds-space-6); }
	.site-footer__col:first-child, .site-footer__col--contact { grid-column: 1 / -1; }
	.site-footer__heading { font-size: var(--ds-fs-sm); margin-block-end: var(--ds-space-1); }
	.site-footer__top { padding-block: var(--ds-space-6) var(--ds-space-4); }
	.site-footer__top p { font-size: var(--ds-fs-sm); }
}
@media (max-width: 640px) {
	/* the face cluster must fit the card on a 320px phone (it used to spill 4px past both edges) */
	.home-team { max-inline-size: 100%; }
	.home-team__avatar { inline-size: 3.25rem; block-size: 3.25rem; margin-inline-start: -0.875rem; font-size: 1.1rem; }
	.home-team__avatar:first-child { margin-inline-start: 0; }
	.home-team__avatar--more { font-size: 0.85rem; }
}

/* ---------- 8. Contrast: small white text on the gradients is at least 4.5:1 even at the lightest stop (0.86 alpha gave 4.31) ---------- */
.ds-feature__sub, .ds-feature--note, .pub-hero__lead, .pub-hero__quick, .pub-pro p, .pub-pro ul { color: rgba(255, 255, 255, 0.92); }
@media (max-width: 640px) { .home-hero__quick { display: none; } }

/* ---------- 9. Motion and high-contrast modes for the pieces above ---------- */
@media (prefers-reduced-motion: reduce) {
	.specialist-card.client-card, .home-bigtile, .dir-entry, .mq-opt, .ds-tile, .ds-tilecard { transition: none !important; transform: none !important; }
	.home-bigtile:hover, .dir-entry:hover, .ds-tile:hover { transform: none; }
}
@media (forced-colors: active) {
	.home-bigtile, .dir-entry, .specialist-card.client-card, .matching-quiz .pill, .matching-quiz__intro, .matching-quiz__question { border: 1px solid CanvasText; }
	.matching-quiz .pill:has(input:checked) { border-width: 3px; }
}