/* ===========================================================================
 * SDO service pages — /services/ and /services/<family>/ (sv-*)
 * Loaded after pages.css by the services templates. Same tokens and pieces as
 * the homepage; nothing here is paged — these are reading pages.
 * ======================================================================== */

body.sdo-inner .sv-hero { padding-block: clamp(36px, 8svh, 96px) clamp(20px, 4svh, 48px); }
body.sdo-inner .sv-sec { padding-block: clamp(20px, 5svh, 56px); }
body.sdo-inner .sv-crumb {
  display: flex; align-items: center; gap: 10px; margin-block-end: 18px;
  font-size: 13.5px; color: var(--text-muted);
}
body.sdo-inner .sv-crumb a { color: var(--brand-text); text-decoration: none; font-weight: 700; }
body.sdo-inner .sv-crumb i { font-size: 10px; opacity: .6; }
body.sdo-inner .sv-hero__icon {
  display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px;
  margin-block-end: 16px; border-radius: 16px;
  background: color-mix(in oklab, var(--cyan) 16%, transparent); color: var(--brand-text); font-size: 22px;
}
body.sdo-inner .sv-highlights {
  display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none;
  max-inline-size: 60ch; font-size: 15.5px; color: var(--text-strong);
}
body.sdo-inner .sv-highlights i { margin-inline-end: 10px; font-size: .8em; color: var(--hm-green); }
body.sdo-inner .sv-example {
  max-inline-size: 60ch; margin: 24px 0 0; padding: 14px 18px;
  border-inline-start: 3px solid var(--cyan); border-radius: 6px;
  background: color-mix(in oklab, var(--text-strong) 4%, transparent);
  font-size: 14.5px; line-height: 1.9; color: var(--text-muted);
}
body.sdo-inner .sv-example b { color: var(--text-strong); }

/* Hub */
body.sdo-inner .sv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none;
}
body.sdo-inner .sv-card { display: flex; }
body.sdo-inner .sv-card__link {
  display: flex; flex-direction: column; gap: 10px; inline-size: 100%;
  padding: clamp(18px, 2vw, 28px); border: 1px solid var(--hm-line, var(--border));
  border-radius: var(--hm-radius, 18px); background: var(--surface-1);
  color: inherit; text-decoration: none;
  transition: border-color .25s, translate .25s var(--ease);
}
body.sdo-inner .sv-card__link:hover { border-color: var(--brand-line); translate: 0 -3px; }
body.sdo-inner .sv-card__icon {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px;
  background: color-mix(in oklab, var(--cyan) 14%, transparent); color: var(--brand-text);
}
body.sdo-inner .sv-card h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-strong); }
body.sdo-inner .sv-card p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--text-muted); }
body.sdo-inner .sv-card__mods {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
body.sdo-inner .sv-card__mods li {
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
  background: color-mix(in oklab, var(--text-strong) 7%, transparent); color: var(--text-muted);
}
body.sdo-inner .sv-card .pg-more { margin-block-start: auto; }

/* Family */
body.sdo-inner .sv-mods { display: grid; gap: clamp(14px, 2vw, 24px); }
body.sdo-inner .sv-mod {
  display: grid; gap: 16px; padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--hm-line, var(--border)); border-radius: var(--hm-radius, 18px);
  background: var(--surface-1); scroll-margin-block-start: 90px;
}
body.sdo-inner .sv-mod__head { display: flex; align-items: flex-start; gap: 16px; }
body.sdo-inner .sv-mod__head > div { flex: 1; min-inline-size: 0; }
body.sdo-inner .sv-mod__icon {
  display: grid; place-items: center; flex: none; inline-size: 46px; block-size: 46px; border-radius: 13px;
  background: color-mix(in oklab, var(--cyan) 14%, transparent); color: var(--brand-text);
}
body.sdo-inner .sv-mod h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--text-strong); }
body.sdo-inner .sv-mod__head p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-muted); }
body.sdo-inner .sv-badge {
  flex: none; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
body.sdo-inner .sv-badge--partial { background: color-mix(in oklab, var(--hm-amber) 18%, transparent); color: var(--hm-amber); }
body.sdo-inner .sv-badge--basic { background: color-mix(in oklab, var(--text-strong) 9%, transparent); color: var(--text-muted); }
body.sdo-inner .sv-mod__feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.8; color: var(--text-strong);
}
body.sdo-inner .sv-mod__feats i { margin-inline-end: 10px; font-size: .75em; color: var(--hm-green); }
body.sdo-inner .sv-mod__ai {
  padding: 14px 18px; border-radius: 12px; font-size: 14px;
  background: color-mix(in oklab, #A78BFA 10%, transparent);
}
body.sdo-inner .sv-mod__ai b { display: flex; align-items: center; gap: 8px; margin-block-end: 6px; color: var(--text-strong); }
body.sdo-inner .sv-mod__ai ul { margin: 0; padding-inline-start: 18px; color: var(--text-muted); line-height: 1.9; }
body.sdo-inner .sv-mod__note { display: flex; gap: 10px; margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-muted); }
body.sdo-inner .sv-mod__note i { margin-block-start: .35em; }
body.sdo-inner .sv-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.sdo-inner .sv-chips a {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--hm-line, var(--border)); font-size: 14.5px; font-weight: 700;
  color: var(--text-strong); text-decoration: none; transition: border-color .2s;
}
body.sdo-inner .sv-chips a:hover { border-color: var(--brand-line); }
body.sdo-inner .sv-chips i { color: var(--brand-text); }
@media (max-width: 575.98px) {
  body.sdo-inner .sv-mod__head { flex-wrap: wrap; }
}

/* Module index and dependencies */
body.sdo-inner .sv-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(14px, 2.4vw, 24px); padding: 0; list-style: none; }
body.sdo-inner .sv-index a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--hm-line, var(--border)); font-size: 13.5px; font-weight: 700;
  color: var(--text-strong); text-decoration: none; transition: border-color .2s, background-color .2s;
}
body.sdo-inner .sv-index a:hover { border-color: var(--brand-line); background: color-mix(in oklab, var(--cyan) 8%, transparent); }
body.sdo-inner .sv-index i { font-size: .85em; color: var(--brand-text); }
body.sdo-inner .sv-mod__needs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 13px; color: var(--text-muted); }
body.sdo-inner .sv-mod__needs i { color: var(--brand-text); }
body.sdo-inner .sv-mod__needs a {
  padding: 3px 12px; border-radius: 999px; font-weight: 700; text-decoration: none;
  background: color-mix(in oklab, var(--cyan) 12%, transparent); color: var(--brand-text);
}

/* ── Family page: the whole story of an area ─────────────────────────────── */
body.sdo-inner .sv-sec[id], body.sdo-inner .sv-mod[id] { scroll-margin-block-start: 90px; }
body.sdo-inner .sv-sub { max-inline-size: 62ch; margin: -8px 0 22px; font-size: 14.5px; line-height: 1.9; color: var(--text-muted); }
body.sdo-inner .sv-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 28px; }
body.sdo-inner .sv-jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--hm-line, var(--border)); font-size: 13.5px; font-weight: 700;
  color: var(--text-strong); text-decoration: none; transition: border-color .2s, background-color .2s;
}
body.sdo-inner .sv-jump a:hover { border-color: var(--brand-line); background: color-mix(in oklab, var(--cyan) 8%, transparent); }
body.sdo-inner .sv-jump i { font-size: .85em; color: var(--brand-text); }

/* The problem: four pains and the figures before → after. */
body.sdo-inner .sv-pains {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 12px; margin: 0 0 16px; padding: 0; list-style: none;
}
body.sdo-inner .sv-pains li {
  display: flex; gap: 12px; padding: 16px; border: 1px solid var(--hm-line, var(--border));
  border-radius: 16px; background: var(--surface-1);
}
body.sdo-inner .sv-pains i {
  flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 11px;
  background: color-mix(in oklab, var(--hm-rose) 14%, transparent); color: var(--hm-rose-ink, var(--hm-rose)); font-size: 15px;
}
body.sdo-inner .sv-pains span { font-size: 14px; line-height: 1.8; color: var(--text-muted); }
body.sdo-inner .sv-pains b { display: block; margin-block-end: 2px; color: var(--text-strong); }
body.sdo-inner .sv-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
body.sdo-inner .sv-metrics li { padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--hm-green) 40%, transparent); border-radius: 14px; background: var(--surface-1); }
body.sdo-inner .sv-metrics small { display: block; margin-block-end: 4px; font-size: 12px; color: var(--text-muted); }
body.sdo-inner .sv-metrics span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
body.sdo-inner .sv-metrics s { font-size: 14px; font-weight: 700; color: var(--hm-rose-ink, var(--hm-rose)); }
body.sdo-inner .sv-metrics i { font-size: .8em; color: var(--text-muted); }
body.sdo-inner .sv-metrics b { font-size: 19px; font-weight: 900; color: var(--hm-green-ink, var(--hm-green)); }

/* The journey: six steps. */
body.sdo-inner .sv-before { display: flex; gap: 10px; max-inline-size: 70ch; margin: -6px 0 20px; font-size: 14px; line-height: 1.8; color: var(--text-muted); }
body.sdo-inner .sv-before i { margin-block-start: .35em; color: var(--hm-rose-ink, var(--hm-rose)); }
body.sdo-inner .sv-before b { color: var(--text-strong); }
body.sdo-inner .sv-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none;
}
body.sdo-inner .sv-steps > li { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--hm-line, var(--border)); border-radius: 16px; background: var(--surface-1); }
body.sdo-inner .sv-steps header { display: flex; align-items: center; gap: 12px; }
body.sdo-inner .sv-steps__n {
  display: grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px; border-radius: 50%;
  background: var(--cyan); color: var(--brand-fill-ink); font-weight: 800;
}
body.sdo-inner .sv-steps header b { display: block; font-size: 15.5px; color: var(--text-strong); }
body.sdo-inner .sv-steps header small { font-size: 12.5px; color: var(--text-muted); }
body.sdo-inner .sv-steps__you { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-strong); }
body.sdo-inner .sv-steps ul { display: grid; gap: 6px; margin: 0; padding: 12px; list-style: none; border-radius: 12px; background: color-mix(in oklab, var(--cyan) 8%, transparent); font-size: 13.5px; line-height: 1.7; color: var(--text-strong); }
body.sdo-inner .sv-steps ul i { margin-inline-end: 8px; font-size: .8em; color: var(--hm-green-ink, var(--hm-green)); }
body.sdo-inner .sv-steps__res { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 0 0; padding-block-start: 10px; border-block-start: 1px dashed var(--hm-line, var(--border)); font-size: 13px; }
body.sdo-inner .sv-steps__res small { color: var(--text-muted); }
body.sdo-inner .sv-steps__res span { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
body.sdo-inner .sv-steps__res s { color: var(--text-muted); }
body.sdo-inner .sv-steps__res i { font-size: .8em; color: var(--brand-text); }
body.sdo-inner .sv-steps__res b { font-weight: 900; color: var(--hm-green-ink, var(--hm-green)); }

/* The assistant: question and answer pairs. */
body.sdo-inner .sv-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
body.sdo-inner .sv-qa > li { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--hm-line, var(--border)); border-radius: 18px; background: var(--surface-1); }
body.sdo-inner .sv-qa__q { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--cyan); color: var(--brand-fill-ink); font-size: 14px; font-weight: 700; line-height: 1.7; }
body.sdo-inner .sv-qa__q i { margin-block-start: .3em; font-size: .85em; }
body.sdo-inner .sv-qa__a { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: color-mix(in oklab, var(--text-strong) 5%, transparent); }
body.sdo-inner .sv-qa__a > p { display: flex; gap: 10px; margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-strong); }
body.sdo-inner .sv-qa__a > p i { margin-block-start: .35em; font-size: .85em; color: #A78BFA; }
body.sdo-inner .sv-qa__a ul { display: grid; gap: 4px; margin: 0; padding: 8px 12px; list-style: none; border-radius: 10px; background: var(--surface-0); font-size: 13px; }
body.sdo-inner .sv-qa__a ul li { display: flex; justify-content: space-between; gap: 12px; }
body.sdo-inner .sv-qa__a em { font-style: normal; font-weight: 800; color: var(--text-strong); }
body.sdo-inner .sv-qa__draft { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; background: var(--hm-green); color: #052e16; font-size: 13px; font-weight: 800; }
body.sdo-inner .sv-qa__a small { font-size: 12px; color: var(--text-muted); }
body.sdo-inner .sv-qa__more { margin: 20px 0 0; }
body.sdo-inner .sv-chips small { margin-inline-start: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

/* Accent colours as text: darker on the light theme so they read (≥ 4.5:1). */
body.sdo-inner { --hm-green-ink: var(--hm-green); --hm-rose-ink: var(--hm-rose); }
[data-theme="light"] body.sdo-inner { --hm-green-ink: #15803D; --hm-rose-ink: #BE123C; }
/* Dark theme: a lighter rose for text on the navy cards (≥ 4.5:1). */
:root:not([data-theme="light"]) body.sdo-inner, [data-theme="dark"] body.sdo-inner { --hm-rose-ink: #FB7185; }