/* ==========================================================================
   «How we measure your progress and vet our specialists» (page-how-we-work.php), the home teaser (template-parts/home-v2/trust.php) and the
   «not sure who to choose?» assistant card (template-parts/assistant-card.php).
   Loaded after simple.css (handle mentayar-ds-trust, inc/trust-page.php) on the page, the home page, the contact page, the directory and the
   specialist profile. Tokens only (--ds-*), logical properties only (RTL, LTR and body.is-ravanline follow the tokens), no link underlines,
   motion only when the visitor allows it. Prefixes: .tw (page), .mhome-trust (home), .asst-card (assistant card).
   ========================================================================== */

/* ---------- page: hero ---------- */
.tw-hero { background: linear-gradient(180deg, var(--ds-mint) 0%, var(--ds-surface) 100%); border-block-end: 1px solid var(--ds-line); padding-block: var(--ds-space-6) var(--ds-space-8); }
body.is-ravanline .tw-hero { background: linear-gradient(180deg, var(--ds-accent-bg) 0%, var(--ds-surface) 100%); }
.tw-hero__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-8); margin-block-start: var(--ds-space-4); }
.tw-hero__text { max-inline-size: 44rem; display: grid; gap: var(--ds-space-3); justify-items: start; }
.tw-hero h1 { margin: 0; font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem); line-height: var(--ds-lh-tight); }
.tw-hero__lead { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-lg); }
.tw-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
body.is-ravanline .tw-eyebrow { color: var(--ds-accent); }
.tw-hero__art { display: none; inline-size: 7rem; block-size: 7rem; border-radius: 32px; background: var(--ds-surface); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-card); }
.tw-hero__art .ds-icon { inline-size: 3rem; block-size: 3rem; }
@media (min-width: 700px) { .tw-hero__art { display: inline-flex; } }
.tw-jump { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: var(--ds-space-2) 0 0; }
.tw-jump__chip { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); text-decoration: none; }
.tw-jump__chip .ds-icon { color: var(--ds-action); }
body.is-ravanline .tw-jump__chip .ds-icon { color: var(--ds-accent); }
.tw-jump__chip:hover, .tw-jump__chip:focus-visible { border-color: var(--ds-deep); background: var(--ds-mint); color: var(--ds-text); text-decoration: none; }
body.is-ravanline .tw-jump__chip:hover, body.is-ravanline .tw-jump__chip:focus-visible { border-color: var(--ds-accent); background: var(--ds-accent-bg); }
.tw-jump__chip:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }

/* ---------- page: sections ---------- */
.tw-sec { padding-block: var(--ds-space-10); scroll-margin-block-start: var(--ds-space-8); }
.tw-sec--tint { background: var(--ds-surface); border-block: 1px solid var(--ds-line); }
.tw-sec--end { padding-block-end: var(--ds-space-12); }
.tw-head { display: flex; align-items: flex-start; gap: var(--ds-space-4); margin-block-end: var(--ds-space-6); max-inline-size: 50rem; }
.tw-head h2 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-2xl); line-height: var(--ds-lh-tight); }
.tw-head p { margin: 0; color: var(--ds-text-2); }
.tw-subhead { margin: var(--ds-space-10) 0 var(--ds-space-4); font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); }

/* ---------- page: icon cards ---------- */
.tw-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tw-cards--three { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.tw-card { display: grid; gap: var(--ds-space-2); align-content: start; justify-items: start; padding: var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.tw-card h3 { margin: var(--ds-space-1) 0 0; font-size: var(--ds-fs-lg); line-height: var(--ds-lh-tight); }
.tw-card p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.85; }

/* ---------- page: the two things people worry about ---------- */
.tw-notes { display: grid; gap: var(--ds-space-4); margin-block-start: var(--ds-space-4); }
@media (min-width: 800px) { .tw-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tw-note, .tw-callout { display: flex; align-items: flex-start; gap: var(--ds-space-4); padding: var(--ds-space-5); border-radius: var(--ds-radius-card); background: var(--ds-f-bg, var(--ds-mint)); border: 1px solid var(--ds-line); }
.tw-note h3, .tw-callout h3 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-md); line-height: var(--ds-lh-tight); color: var(--ds-text); }
.tw-note p, .tw-callout p { margin: 0 0 var(--ds-space-2); color: var(--ds-text); font-size: var(--ds-fs-sm); line-height: 1.85; }
.tw-note p:last-child, .tw-callout p:last-child { margin-block-end: 0; }
.tw-note .ds-ibox, .tw-callout .ds-ibox { background: var(--ds-surface); }
.tw-callout { margin-block-start: var(--ds-space-6); }
.tw-link { color: var(--ds-deep); font-weight: var(--ds-fw-semibold); text-decoration: none; }
body.is-ravanline .tw-link { color: var(--ds-accent); }
.tw-link:hover, .tw-link:focus-visible { text-decoration: none; color: var(--ds-action-hover); }
.tw-link:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; border-radius: var(--ds-radius-sm); }

/* ---------- page: before / during / after ---------- */
.tw-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); position: relative; }
.tw-strip__item { position: relative; display: grid; gap: var(--ds-space-1); align-content: start; justify-items: start; padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.tw-strip__badge { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); margin-block-end: var(--ds-space-1); }
.tw-strip__item h4 { margin: 0; display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-fs-md); }
.tw-strip__num { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--ds-text); color: var(--ds-surface); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); }
.tw-strip__item p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.85; }
@media (min-width: 800px) {
	.tw-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* the thread that joins the three: a line behind the badges */
	.tw-strip::before { content: ""; position: absolute; inset-inline: 16%; inset-block-start: 2.4rem; border-block-start: 2px dashed var(--ds-line); z-index: 0; }
	.tw-strip__item { z-index: 1; }
}
/* phones: a vertical thread on the start side */
@media (max-width: 799.98px) {
	.tw-strip__item { padding-inline-start: var(--ds-space-5); }
}

/* ---------- page: the four steps of vetting ---------- */
.tw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); counter-reset: none; }
.tw-step { padding: var(--ds-space-5); background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); display: grid; gap: var(--ds-space-2); align-content: start; justify-items: start; }
.tw-step__num { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--ds-action); color: var(--ds-on-action); font-weight: var(--ds-fw-bold); }
body.is-ravanline .tw-step__num { background: var(--ds-accent); }
.tw-step h3 { margin: 0; font-size: var(--ds-fs-lg); line-height: var(--ds-lh-tight); }
.tw-step p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.85; }

/* ---------- page: questions + closing ---------- */
.tw-faq > * { max-inline-size: 52rem; }
.tw-faq h2 { margin: 0 0 var(--ds-space-4); font-size: var(--ds-fs-2xl); }
.tw-end { display: grid; gap: var(--ds-space-4); }
.tw-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-4); padding: var(--ds-space-6); background: var(--ds-mint); border: 1px solid var(--ds-mint-strong); border-radius: 20px; }
body.is-ravanline .tw-cta { background: var(--ds-accent-bg); border-color: #EBDDC8; }
.tw-cta__text { flex: 1 1 16rem; min-inline-size: 0; }
.tw-cta h2 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-xl); }
.tw-cta p { margin: 0; color: var(--ds-text-2); }
.tw-cta .btn, .asst-card .btn { text-decoration: none; }
@media (max-width: 639.98px) { .tw-cta .btn { inline-size: 100%; justify-content: center; } }

/* ---------- home: teaser band (template-parts/home-v2/trust.php) ---------- */
.mhome-trust { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-5); padding: var(--ds-space-6) var(--ds-space-8); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 20px; box-shadow: var(--ds-shadow-card); }
.mhome-trust__body h2 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-2xl); line-height: var(--ds-lh-tight); }
.mhome-trust__body p { margin: 0 0 var(--ds-space-3); color: var(--ds-text-2); }
.mhome-trust__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.mhome-trust__pills li { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-f-bg); color: var(--ds-f-ink); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.mhome-trust__actions .btn { text-decoration: none; white-space: nowrap; }
@media (max-width: 767px) {
	.mhome-trust { grid-template-columns: auto minmax(0, 1fr); padding: var(--ds-space-5); gap: var(--ds-space-3) var(--ds-space-4); }
	.mhome-trust__body h2 { font-size: var(--ds-fs-xl); }
	.mhome-trust__actions { grid-column: 1 / -1; }
	.mhome-trust__actions .btn { inline-size: 100%; justify-content: center; }
}
@media print { .mhome-trust-wrap { display: none; } }

/* ---------- membership page: one-line link ---------- */
.mp-trustline { margin: var(--ds-space-6) 0 0; color: var(--ds-text-2); }
.mp-trustline a { color: var(--ds-deep); font-weight: var(--ds-fw-semibold); text-decoration: none; }
body.is-ravanline .mp-trustline a { color: var(--ds-accent); }
.mp-trustline a:hover, .mp-trustline a:focus-visible { text-decoration: none; color: var(--ds-action-hover); }

/* ---------- assistant card: «not sure who to choose?» (contact, directory empty state, closing band, profile booking panel) ---------- */
.asst-card { display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-f-blue-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.asst-card[hidden] { display: none; }
.asst-card .ds-ibox { background: var(--ds-surface); }
.asst-card__text { flex: 1 1 auto; min-inline-size: 0; }
.asst-card__title { margin: 0 0 2px; font-size: var(--ds-fs-md); line-height: var(--ds-lh-tight); color: var(--ds-text); }
.asst-card__text p { margin: 0; color: var(--ds-text); font-size: var(--ds-fs-sm); line-height: 1.8; }
.asst-card__cta { flex: none; white-space: nowrap; }
@media (max-width: 639.98px) {
	.asst-card { flex-wrap: wrap; }
	.asst-card__text { flex: 1 1 12rem; }
	.asst-card__cta { inline-size: 100%; justify-content: center; }
}
/* the contact page's side column: channels first, the assistant card under them */
.ct-side { display: grid; gap: var(--ds-space-4); align-content: start; min-inline-size: 0; }
/* inside the booking panel and the directory's empty state the card is compact */
.asst-card--slot { margin-block-start: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); }
.asst-card--slot .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
.directory-empty .asst-card { margin: var(--ds-space-6) auto 0; max-inline-size: 36rem; text-align: start; }

@media (prefers-reduced-motion: no-preference) {
	.tw-jump__chip, .tw-card, .asst-card { transition: border-color var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
	.tw-card:hover { border-color: var(--ds-f-ink, var(--ds-action)); box-shadow: var(--ds-shadow-card); }
}
@media (forced-colors: active) {
	.tw-card, .tw-step, .tw-strip__item, .tw-note, .tw-callout, .asst-card, .mhome-trust { border: 1px solid CanvasText; }
}
/* in the narrow contact side column the card stacks: text, then a full-width button */
.ct-side .asst-card { flex-wrap: wrap; }
.ct-side .asst-card__text { flex: 1 1 10rem; }
.ct-side .asst-card__cta { inline-size: 100%; justify-content: center; }