/* ===========================================================================
 * SDO homepage, services edition (plan: specs/2026-10-17-homepage-airp-services-plan.md)
 *
 * Loaded by intro/index.html after home.css, relying on its section shell, type,
 * buttons, .hm-fit and the motion contract. Holds what the services edition added:
 * the platform's module switches, the services explorer and module sheet, the AI
 * simulator, the richer workflow (swimlane) and problem sections, the interactive
 * hero screens, integration notes, contact chips, small-screen rules (incl. the fit
 * guard's .is-tall), the accessibility pass and reduced motion.
 * ======================================================================== */

/* ── Platform: layout ────────────────────────────────────────────────────── */

body.sdo-landing-page .hm-plat__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}

body.sdo-landing-page .hm-plat__copy { min-inline-size: 0; }

body.sdo-landing-page .hm-mods__count {
  padding: .35em 1em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--cyan) 14%, transparent);
  color: var(--brand-text);
  font-size: .9em;
  font-weight: 700;
}
body.sdo-landing-page .hm-mods__count b { font-weight: 900; }

body.sdo-landing-page .hm-sw {
  position: absolute;
  inset-block-start: .95em;
  inset-inline-end: 1em;
  inline-size: 2.6em;
  block-size: 1.45em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text-strong) 18%, transparent);
  transition: background-color .35s;
}
body.sdo-landing-page .hm-sw::after {
  content: "";
  position: absolute;
  inset-block-start: .2em;
  inset-inline-start: .2em;
  inline-size: 1.05em;
  block-size: 1.05em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .1em .3em rgb(0 0 0 / .35);
  transition: inset-inline-start .35s var(--ease);
}

@keyframes hm-mod-pop { 0% { scale: 1; } 35% { scale: 1.07; } 100% { scale: 1; } }

@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-plat__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: clamp(12px, 2.4svh, 24px); }
  
}

/* ── Services: eight families, one at a time ─────────────────────────────── */

body.sdo-landing-page .hm-svc .hm-features__body { grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr); }
body.sdo-landing-page .hm-svc .hm-dom { min-block-size: clamp(38px, 5.4svh, 52px); }
body.sdo-landing-page .hm-svc .hm-dpane { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); align-items: stretch; }
body.sdo-landing-page .hm-svc__points {
  display: grid;
  gap: clamp(4px, 1svh, 9px);
  margin: clamp(2px, .8svh, 8px) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(13px, .15vw + 1.3svh, 15px);
  line-height: 1.7;
  color: var(--text-strong);
}
body.sdo-landing-page .hm-svc__points li { display: flex; gap: 10px; animation: hm-pane-in .5s var(--ease) both; animation-delay: calc(.15s + var(--k, 0) * 110ms); }
body.sdo-landing-page .hm-svc__points i {
  position: static;
  margin-block-start: .5em;
  font-size: .7em;
  color: var(--hm-green-ink);
}
/* The poster keeps its large quiet icon behind the text (home.css); the points
   sit above it. */
body.sdo-landing-page .hm-svc .hm-dpane__poster > i { z-index: 0; }
body.sdo-landing-page .hm-svc .hm-dpane__poster > :not(i) { position: relative; z-index: 1; }
body.sdo-landing-page .hm-svc .hm-dpane__poster h3 { font-size: clamp(24px, .9vw + 2.6svh, 40px); }

body.sdo-landing-page .hm-mgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, min(10.5rem, 21svh));
  align-content: center;
  gap: clamp(8px, 1.4vw, 14px);
  min-block-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .hm-mcard { min-block-size: 0; display: flex; animation: hm-pane-in .5s var(--ease) both; animation-delay: calc(var(--k, 0) * 55ms); }
body.sdo-landing-page .hm-mcard > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
  row-gap: 8px;
  inline-size: 100%;
  min-block-size: 0;
  padding: clamp(10px, 1.8svh, 18px) clamp(12px, 1.2vw, 18px);
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  background: var(--surface-0);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .25s, translate .25s var(--ease), background-color .25s;
}
[data-theme="light"] body.sdo-landing-page .hm-mcard > a { background: #fff; }
body.sdo-landing-page .hm-mcard > a:hover { border-color: var(--brand-line); translate: 0 -2px; }
body.sdo-landing-page .hm-mcard > a:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
body.sdo-landing-page .hm-mcard i {
  grid-row: 1;
  display: grid;
  place-items: center;
  inline-size: clamp(32px, 4.4svh, 40px);
  block-size: clamp(32px, 4.4svh, 40px);
  border-radius: 11px;
  background: color-mix(in oklab, var(--cyan) 13%, transparent);
  color: var(--brand-text);
  font-size: clamp(13px, 1.7svh, 16px);
}
body.sdo-landing-page .hm-mcard b {
  align-self: center;
  font-size: clamp(13.5px, .15vw + 1.4svh, 16px);
  font-weight: 800;
  color: var(--text-strong);
}
body.sdo-landing-page .hm-mcard span {
  grid-column: 1 / -1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: clamp(12px, .1vw + 1.2svh, 13.5px);
  line-height: 1.7;
  color: var(--text-muted);
}
/* A family with one or two modules has room: show their capabilities. */
body.sdo-landing-page .hm-mcard ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(12px, .1vw + 1.2svh, 13.5px);
  line-height: 1.7;
  color: var(--text-strong);
}
body.sdo-landing-page .hm-mcard ul li::before { content: "·"; margin-inline-end: 8px; color: var(--brand-text); font-weight: 900; }
body.sdo-landing-page .hm-svc__more { display: none; }

@media (max-width: 999.98px) {
  body.sdo-landing-page .hm-svc .hm-features__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.sdo-landing-page .hm-svc .hm-doms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.sdo-landing-page .hm-svc .hm-dom { font-size: 12.5px; }
  body.sdo-landing-page .hm-svc .hm-dpane { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.sdo-landing-page .hm-svc__points { display: none; }
  body.sdo-landing-page .hm-svc .hm-dpane__poster p { display: none; }
}
@media (max-width: 599.98px) {
  body.sdo-landing-page .hm-svc .hm-dpane { grid-template-rows: minmax(0, 1fr) auto; }
  body.sdo-landing-page .hm-svc .hm-doms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.sdo-landing-page .hm-svc .hm-dom { flex-direction: column; gap: 4px; min-block-size: 54px; padding: 6px 2px; font-size: 11px; line-height: 1.35; }
  body.sdo-landing-page .hm-svc .hm-dom i { inline-size: 1.9em; block-size: 1.9em; }
  body.sdo-landing-page .hm-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 52px); align-content: start; }
  body.sdo-landing-page .hm-mcard > a { grid-template-rows: auto; align-items: center; align-content: center; padding: 8px 10px; column-gap: 10px; }
  body.sdo-landing-page .hm-mcard i { inline-size: 30px; block-size: 30px; }
  body.sdo-landing-page .hm-mcard b { font-size: 13px; align-self: center; }
  body.sdo-landing-page .hm-mcard span,
  body.sdo-landing-page .hm-mcard ul { display: none; }
  body.sdo-landing-page .hm-svc__more { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 14px; font-weight: 700; color: var(--brand-text); text-decoration: none; }
}

/* ── AI: three layers and one conversation ───────────────────────────────── */

body.sdo-landing-page .hm-layers i,
body.sdo-landing-page .hm-plat__points i {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: clamp(34px, 4.6svh, 42px);
  block-size: clamp(34px, 4.6svh, 42px);
  border-radius: 12px;
  background: color-mix(in oklab, var(--cyan) 13%, transparent);
  color: var(--brand-text);
  font-size: clamp(14px, 1.8svh, 17px);
}
body.sdo-landing-page .hm-layers span,
body.sdo-landing-page .hm-plat__points span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
body.sdo-landing-page .hm-layers b,
body.sdo-landing-page .hm-plat__points b { font-size: clamp(14.5px, .2vw + 1.4svh, 17px); font-weight: 800; color: var(--text-strong); }
body.sdo-landing-page .hm-layers small,
body.sdo-landing-page .hm-plat__points small { font-size: clamp(12.5px, .1vw + 1.25svh, 14.5px); line-height: 1.75; color: var(--text-muted); }

body.sdo-landing-page .hm-say__rows {
  display: grid;
  gap: .35em;
  margin: .7em 0 0;
  padding: .6em .8em;
  list-style: none;
  border-radius: .8em;
  background: var(--surface-0);
  font-size: .88em;
}
[data-theme="light"] body.sdo-landing-page .hm-say__rows { background: #fff; }
body.sdo-landing-page .hm-say__rows li { display: flex; justify-content: space-between; gap: 1em; }
body.sdo-landing-page .hm-say__rows em { font-style: normal; font-weight: 800; color: var(--hm-rose-ink); font-family: var(--font-mono); }
body.sdo-landing-page .hm-say__confirm {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-block-start: .7em;
  padding: .4em 1em;
  border-radius: 999px;
  background: var(--hm-green);
  color: #052e16;
  font-size: .9em;
  font-weight: 800;
}
body.sdo-landing-page .hm-chat__note {
  margin: 0;
  padding: 0 1.3em 1em;
  font-size: .78em;
  color: var(--text-label, var(--text-muted));
}

/* ── Platform: six points ────────────────────────────────────────────────── */

body.sdo-landing-page .hm-plat__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2.2svh, 22px) clamp(14px, 2vw, 28px);
  margin: clamp(16px, 3.4svh, 34px) 0 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .hm-plat__points li { display: flex; gap: 12px; align-items: flex-start; }
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-plat__points { grid-template-columns: 1fr 1fr; margin: 12px 0 0; gap: 8px 12px; }
  body.sdo-landing-page .hm-plat__points small { display: none; }
  body.sdo-landing-page .hm-plat__points i { inline-size: 30px; block-size: 30px; font-size: 13px; }
  body.sdo-landing-page .hm-plat__points b { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  body.sdo-landing-page .hm-mod.is-pop,
  body.sdo-landing-page .hm-svc__points li,
  body.sdo-landing-page .hm-mcard { animation: none; }
}

/* ── Short screens (landscape phones): the same content, one line per item ── */
@media (max-height: 560px) {
  body.sdo-landing-page .hm-svc .hm-features__head .hm-lead,
  body.sdo-landing-page .hm-svc .hm-dpane__poster,
  body.sdo-landing-page .hm-mcard span,
  body.sdo-landing-page .hm-mcard ul { display: none; }
  body.sdo-landing-page .hm-svc .hm-features__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.sdo-landing-page .hm-svc .hm-doms { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  body.sdo-landing-page .hm-svc .hm-dom { flex-direction: column; gap: 2px; min-block-size: 40px; padding: 4px 2px; font-size: 10.5px; line-height: 1.3; }
  body.sdo-landing-page .hm-svc .hm-dom[aria-selected="true"]::after { inset-block: auto 0; inset-inline: 20%; inline-size: auto; block-size: 3px; }
  body.sdo-landing-page .hm-svc .hm-dpane { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  body.sdo-landing-page .hm-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 44px); align-content: start; }
  body.sdo-landing-page .hm-mcard > a { grid-template-rows: auto; align-items: center; align-content: center; padding: 6px 10px; }
  body.sdo-landing-page .hm-mcard i { inline-size: 28px; block-size: 28px; }
  body.sdo-landing-page .hm-mcard b { font-size: 12.5px; }
  body.sdo-landing-page .hm-svc__more { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 13px; font-weight: 700; color: var(--brand-text); text-decoration: none; }
  body.sdo-landing-page .hm-plat__points small,
  body.sdo-landing-page .hm-plat__copy .hm-lead,
  body.sdo-landing-page .hm-hub__nodes small { display: none; }
  
}
@media (max-height: 560px) and (max-width: 899.98px) {
  body.sdo-landing-page .hm-plat__stage { display: none; }
}

/* ── Workflow: the journey tabs ──────────────────────────────────────────── */
body.sdo-landing-page .hm-jtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: clamp(8px, 1.6svh, 16px);
}
body.sdo-landing-page .hm-jtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: clamp(34px, 4.6svh, 42px);
  padding-inline: 14px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface-1) 70%, transparent);
  color: var(--text-muted);
  font: inherit;
  font-size: clamp(12.5px, .1vw + 1.3svh, 14px);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
body.sdo-landing-page .hm-jtab i { font-size: .9em; color: var(--brand-text); }
body.sdo-landing-page .hm-jtab:hover { color: var(--text-strong); border-color: var(--brand-line); }
body.sdo-landing-page .hm-jtab[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--brand-fill-ink); }
body.sdo-landing-page .hm-jtab[aria-pressed="true"] i { color: var(--brand-fill-ink); }
body.sdo-landing-page .hm-jtab:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
body.sdo-landing-page .hm-flowset { display: contents; }
body.sdo-landing-page .hm-flowset[hidden] { display: none; }
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-jtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--hm-pad-x)); padding-inline: var(--hm-pad-x); }
  body.sdo-landing-page .hm-jtabs::-webkit-scrollbar { display: none; }
}

@media (max-height: 800px) and (min-width: 1000px) {
  body.sdo-landing-page .hm-svc__points li:nth-child(n+3) { display: none; }
}
@media (max-width: 999.98px) {
  body.sdo-landing-page .hm-mgrid { grid-auto-rows: minmax(0, min(9rem, 14svh)); }
}

/* One or two modules: full-width cards with their capabilities in two columns. */
body.sdo-landing-page .hm-mgrid--few { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: center; }
body.sdo-landing-page .hm-mgrid--few .hm-mcard > a { padding: clamp(16px, 3svh, 28px); row-gap: 10px; }
body.sdo-landing-page .hm-mgrid--few .hm-mcard b { font-size: clamp(17px, .4vw + 1.8svh, 22px); }
body.sdo-landing-page .hm-mgrid--few .hm-mcard span { -webkit-line-clamp: 2; font-size: clamp(13px, .15vw + 1.4svh, 15.5px); }
body.sdo-landing-page .hm-mgrid--few .hm-mcard ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: clamp(12.5px, .15vw + 1.3svh, 14.5px); }
@media (max-width: 599.98px) {
  body.sdo-landing-page .hm-mgrid--few .hm-mcard ul { display: none; }
}

/* ── AI: the assistant simulator ─────────────────────────────────────────── */

body.sdo-landing-page .hm-ai__copy { min-inline-size: 0; }
body.sdo-landing-page .hm-aitabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: clamp(14px, 2.6svh, 26px);
}
body.sdo-landing-page .hm-aitab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: clamp(34px, 4.6svh, 42px);
  padding-inline: 12px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface-1) 70%, transparent);
  color: var(--text-muted);
  font: inherit;
  font-size: clamp(12.5px, .1vw + 1.3svh, 14px);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
body.sdo-landing-page .hm-aitab i { font-size: .9em; color: var(--brand-text); transition: color .25s; }
body.sdo-landing-page .hm-aitab:hover { color: var(--text-strong); border-color: var(--brand-line); }
body.sdo-landing-page .hm-aitab[aria-selected="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--brand-fill-ink); }
body.sdo-landing-page .hm-aitab[aria-selected="true"] i { color: var(--brand-fill-ink); }
body.sdo-landing-page .hm-aitab:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }

body.sdo-landing-page .hm-aiqs { margin-block-start: clamp(10px, 2svh, 18px); }
body.sdo-landing-page .hm-aipanel {
  display: grid;
  gap: clamp(6px, 1.1svh, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: hm-pane-in .4s var(--ease);
}
body.sdo-landing-page .hm-aipanel[hidden] { display: none; }
body.sdo-landing-page .hm-aiq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  inline-size: 100%;
  min-block-size: clamp(40px, 5.6svh, 52px);
  padding: 8px 16px;
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  background: var(--surface-0);
  color: var(--text-strong);
  font: inherit;
  font-size: clamp(13px, .12vw + 1.3svh, 15px);
  line-height: 1.6;
  text-align: start;
  cursor: pointer;
  transition: border-color .25s, background-color .25s, translate .25s var(--ease);
}
[data-theme="light"] body.sdo-landing-page .hm-aiq { background: #fff; }
body.sdo-landing-page .hm-aiq i { flex: none; font-size: .85em; color: var(--brand-text); transition: translate .25s var(--ease); }
body.sdo-landing-page .hm-aiq:hover { border-color: var(--brand-line); translate: -3px 0; }
body.sdo-landing-page .hm-aiq:hover i { translate: -4px 0; }
body.sdo-landing-page .hm-aiq.is-active { border-color: var(--cyan); background: color-mix(in oklab, var(--cyan) 10%, var(--surface-0)); }
body.sdo-landing-page .hm-aiq:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }

/* The chat: scrolls inside itself, newest at the bottom. */
body.sdo-landing-page .hm-ai .hm-chat__body {
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--text-strong) 25%, transparent) transparent;
}
body.sdo-landing-page .hm-ai .hm-chat__body > :first-child { margin-block-start: auto; }
body.sdo-landing-page .hm-say.is-fresh { animation: hm-say .4s var(--ease); }
body.sdo-landing-page .hm-say--wait { display: inline-flex; gap: .35em; align-items: center; padding-block: 1em; }
body.sdo-landing-page .hm-say--wait i {
  inline-size: .55em;
  block-size: .55em;
  border-radius: 50%;
  background: var(--text-muted);
  animation: hm-dot 1s infinite;
}
body.sdo-landing-page .hm-say--wait i:nth-child(2) { animation-delay: .15s; }
body.sdo-landing-page .hm-say--wait i:nth-child(3) { animation-delay: .3s; }
body.sdo-landing-page .hm-say__via { display: block; margin-block-start: .6em; font-size: .78em; color: var(--text-muted); }

body.sdo-landing-page .hm-say__confirm {
  border: 0;
  font: inherit;
  font-size: .9em;
  cursor: pointer;
  transition: background-color .3s, color .3s, scale .2s var(--ease);
}
body.sdo-landing-page .hm-say__confirm:hover:not(:disabled) { scale: 1.04; }
body.sdo-landing-page .hm-say__confirm.is-done {
  background: color-mix(in oklab, var(--hm-green) 18%, transparent);
  color: var(--hm-green-ink);
  cursor: default;
}
body.sdo-landing-page .hm-say__confirm:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 3px; }

/* The question box is a real form now. */
body.sdo-landing-page .hm-chat__input { gap: .6em; }
body.sdo-landing-page .hm-chat__input input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  color: var(--text-strong);
  font: inherit;
  font-size: 1em;
  outline: none;
}
body.sdo-landing-page .hm-chat__input input::placeholder { color: var(--text-muted); }
body.sdo-landing-page .hm-chat__input button {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.2em;
  block-size: 2.2em;
  border: 0;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--brand-fill-ink);
  font-size: .9em;
  cursor: pointer;
}
body.sdo-landing-page .hm-chat__input:focus-within { border-color: var(--brand-line); }

@media (max-height: 800px) and (min-width: 900px) {
  body.sdo-landing-page .hm-ai__copy .hm-lead { display: none; }
}
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-aitabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--hm-pad-x)); padding-inline: var(--hm-pad-x); }
  body.sdo-landing-page .hm-aitabs::-webkit-scrollbar { display: none; }
  body.sdo-landing-page .hm-aipanel { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--hm-pad-x)); padding-inline: var(--hm-pad-x); }
  body.sdo-landing-page .hm-aipanel[hidden] { display: none; }
  body.sdo-landing-page .hm-aipanel > li { flex: none; inline-size: min(78%, 20rem); }
  body.sdo-landing-page .hm-aiq { min-block-size: 56px; font-size: 13px; }
  body.sdo-landing-page .hm-ai__stage { --fit-w: 34; --fit-h: 38; }
}
@media (max-width: 899.98px) and (max-height: 740px) {
  body.sdo-landing-page .hm-ai__copy .hm-lead { display: none; }
}

body.sdo-landing-page .hm-say__rows em { color: var(--text-strong); }
body.sdo-landing-page .hm-say__rows em.is-neg { color: var(--hm-rose-ink); }
body.sdo-landing-page .hm-chat__input input:focus,
body.sdo-landing-page .hm-chat__input input:focus-visible { outline: none; box-shadow: none; border: 0; background: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE SECTIONS — hero screens, problem scenes, module switches,
   service details, integration notes, contact chips
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: the dashboard is a small app ─────────────────────────────────── */
body.sdo-landing-page button.hm-app__nav {
  inline-size: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .95em;
  text-align: start;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
body.sdo-landing-page button.hm-app__nav:hover { background: rgb(255 255 255 / .06); color: #fff; }
body.sdo-landing-page button.hm-app__nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
body.sdo-landing-page .hm-app__main[hidden] { display: none; }
body.sdo-landing-page .hm-app__main { animation: hm-pane-in .4s var(--ease); }
body.sdo-landing-page .hm-mkpi {
  display: flex;
  flex-direction: column;
  gap: .2em;
  justify-content: center;
  padding: .9em 1em;
  border: 1px solid var(--hm-line);
  border-radius: .9em;
  background: var(--surface-0);
}
body.sdo-landing-page .hm-mkpi b { font-size: 1.6em; font-weight: 900; line-height: 1.2; color: var(--text-strong); }
body.sdo-landing-page .hm-mkpi small { font-size: .82em; color: var(--text-muted); }
body.sdo-landing-page .hm-scr .hm-app__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.sdo-landing-page .hm-mlist { display: grid; gap: .5em; margin: 0; padding: 0; list-style: none; }
body.sdo-landing-page .hm-mlist li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .65em .9em .85em;
  border: 1px solid var(--hm-line);
  border-radius: .8em;
  background: var(--surface-0);
  overflow: hidden;
}
body.sdo-landing-page .hm-mlist span { display: flex; flex-direction: column; min-inline-size: 0; }
body.sdo-landing-page .hm-mlist b { font-size: .95em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sdo-landing-page .hm-mlist small { font-size: .8em; color: var(--text-muted); }
body.sdo-landing-page .hm-mlist i {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: .25em;
  background: linear-gradient(to left, var(--cyan) var(--w), transparent var(--w));
  opacity: .8;
}
body.sdo-landing-page .hm-mbars { flex: 1; min-block-size: 0; display: flex; align-items: flex-end; gap: .35em; }
body.sdo-landing-page .hm-mbars span {
  flex: 1;
  block-size: var(--h);
  border-radius: .25em .25em 0 0;
  background: color-mix(in oklab, var(--cyan) 70%, transparent);
  transform-origin: bottom;
  animation: hm-grow .7s var(--ease) both;
}
body.sdo-landing-page .hm-mbars span:nth-child(odd) { background: color-mix(in oklab, var(--hm-green) 65%, transparent); }
@keyframes hm-grow { from { scale: 1 0; } to { scale: 1 1; } }
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-scr .hm-app__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.sdo-landing-page .hm-mlist li:nth-child(n+3) { display: none; }
}

/* ── Problem: five scenes ───────────────────────────────────────────────── */
body.sdo-landing-page .hm-problem__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
body.sdo-landing-page .hm-pscenes { display: flex; flex-wrap: wrap; gap: 6px; }
body.sdo-landing-page .hm-pscene {
  min-block-size: 34px;
  padding-inline: 12px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
body.sdo-landing-page .hm-pscene:hover { color: var(--text-strong); border-color: var(--brand-line); }
body.sdo-landing-page .hm-pscene[aria-pressed="true"] { background: color-mix(in oklab, var(--cyan) 16%, transparent); border-color: var(--cyan); color: var(--text-strong); }
body.sdo-landing-page .hm-pscene:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-pscenes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; inline-size: 100%; }
  body.sdo-landing-page .hm-pscenes::-webkit-scrollbar { display: none; }
}

/* ── Platform: the module switches (all of them) and their stage ────────── */
body.sdo-landing-page .hm-plat__stage {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6svh, 16px);
  min-inline-size: 0;
  max-inline-size: 40rem;
  margin-inline: auto;
  inline-size: 100%;
}
body.sdo-landing-page .hm-plat__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: clamp(14px, 1.7svh, 17px); }
body.sdo-landing-page .hm-plat__bar > b { font-weight: 800; }
body.sdo-landing-page .hm-plat__bar .hm-mods__count { font-size: 13px; }
body.sdo-landing-page .hm-plat__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
body.sdo-landing-page .hm-preset {
  min-block-size: 32px;
  padding-inline: 12px;
  border: 1px dashed var(--hm-line);
  border-radius: 999px;
  background: none;
  color: var(--text-strong);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
body.sdo-landing-page .hm-preset:hover { border-color: var(--cyan); background: color-mix(in oklab, var(--cyan) 10%, transparent); }
body.sdo-landing-page .hm-preset--reset { border-style: solid; color: var(--text-muted); }
body.sdo-landing-page .hm-preset--reset i { margin-inline-end: 6px; font-size: .85em; }
body.sdo-landing-page .hm-preset:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
body.sdo-landing-page .hm-plat__fams { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in oklab, var(--text-strong) 5%, transparent); }
body.sdo-landing-page .hm-pfam {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 34px;
  padding-inline: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
body.sdo-landing-page .hm-pfam[aria-selected="true"] { background: var(--surface-0); color: var(--text-strong); box-shadow: 0 .1em .6em rgb(0 0 0 / .18); }
[data-theme="light"] body.sdo-landing-page .hm-pfam[aria-selected="true"] { background: #fff; }
body.sdo-landing-page .hm-pfam i { color: var(--brand-text); font-size: .9em; }
body.sdo-landing-page .hm-pfam .hm-pfam__n { margin-inline-start: 2px; padding: 0 6px; border-radius: 999px; background: var(--cyan); color: var(--brand-fill-ink); font-size: 11px; }
body.sdo-landing-page .hm-pfam:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 1px; }

body.sdo-landing-page .hm-plat__grid-mods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.2svh, 10px);
  min-block-size: 0;
}
body.sdo-landing-page .hm-pmod {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-inline-size: 0;
  min-block-size: clamp(64px, 9svh, 84px);
  padding: 10px 12px;
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  background: var(--surface-0);
  color: var(--text-strong);
  font: inherit;
  text-align: start;
  opacity: .66;
  cursor: pointer;
  transition: opacity .35s var(--ease), border-color .35s, background-color .35s, translate .25s var(--ease);
}
[data-theme="light"] body.sdo-landing-page .hm-pmod { background: #fff; }
body.sdo-landing-page .hm-pmod:hover { opacity: 1; translate: 0 -2px; }
body.sdo-landing-page .hm-pmod > i {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--text-strong) 8%, transparent);
  color: var(--text-muted);
  font-size: 13px;
  transition: background-color .35s, color .35s;
}
body.sdo-landing-page .hm-pmod > b { font-size: 13px; font-weight: 800; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sdo-landing-page .hm-pmod .hm-sw { inset-block-start: 11px; inset-inline-end: 12px; font-size: 12px; }
body.sdo-landing-page .hm-pmod.is-on {
  opacity: 1;
  border-color: color-mix(in oklab, var(--cyan) 55%, transparent);
  background: color-mix(in oklab, var(--cyan) 8%, var(--surface-0));
}
[data-theme="light"] body.sdo-landing-page .hm-pmod.is-on { background: #EAF8FD; }
body.sdo-landing-page .hm-pmod.is-on > i { background: var(--cyan); color: var(--brand-fill-ink); }
body.sdo-landing-page .hm-pmod.is-on .hm-sw { background: var(--cyan); }
body.sdo-landing-page .hm-pmod.is-on .hm-sw::after { inset-inline-start: calc(100% - 1.25em); }
body.sdo-landing-page .hm-pmod.is-core { cursor: default; }
body.sdo-landing-page .hm-pmod.is-core:hover { translate: none; }
body.sdo-landing-page .hm-pmod.is-pop { animation: hm-mod-pop .6s var(--ease); }
body.sdo-landing-page .hm-pmod.is-need { border-style: dashed; border-color: var(--hm-amber-ink); }
body.sdo-landing-page .hm-pmod:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
body.sdo-landing-page .hm-pmod .hm-sw { position: absolute; display: block; inline-size: 2.6em; block-size: 1.45em; border-radius: 999px; background: color-mix(in oklab, var(--text-strong) 18%, transparent); }
body.sdo-landing-page .hm-plat__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--text-strong) 6%, transparent);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  transition: background-color .4s, color .4s;
}
body.sdo-landing-page .hm-plat__note i { color: var(--brand-text); }
body.sdo-landing-page .hm-plat__note.is-flash { background: color-mix(in oklab, var(--hm-amber) 16%, transparent); color: var(--text-strong); }
body.sdo-landing-page .hm-plat__note.is-flash i { color: var(--hm-amber-ink); }

@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-plat__stage { max-inline-size: none; }
  body.sdo-landing-page .hm-plat__fams { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.sdo-landing-page .hm-plat__fams::-webkit-scrollbar { display: none; }
  body.sdo-landing-page .hm-plat__presets > span { display: none; }
  body.sdo-landing-page .hm-plat__presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.sdo-landing-page .hm-preset { flex: none; }
  body.sdo-landing-page .hm-plat__grid-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sdo-landing-page .hm-pmod { min-block-size: 54px; flex-direction: row; align-items: center; gap: 10px; padding-inline-end: 56px; }
  body.sdo-landing-page .hm-plat__note { display: none; }
  body.sdo-landing-page .hm-plat__points { display: none; }
}
@media (max-height: 800px) and (min-width: 900px) {
  body.sdo-landing-page .hm-plat__points small { display: none; }
}

/* ── Services: a module opens in place ───────────────────────────────────── */
body.sdo-landing-page .hm-svc__pane.is-detail > .hm-dpane__poster,
body.sdo-landing-page .hm-svc__pane.is-detail > .hm-mgrid,
body.sdo-landing-page .hm-svc__pane.is-detail > .hm-svc__more { display: none; }
body.sdo-landing-page .hm-mdets { grid-column: 1 / -1; min-block-size: 0; }
body.sdo-landing-page .hm-mdets[hidden], body.sdo-landing-page .hm-mdet[hidden] { display: none; }
body.sdo-landing-page .hm-mdet {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2svh, 18px);
  block-size: 100%;
  padding: clamp(16px, 3svh, 30px) clamp(16px, 2.2vw, 32px);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  background: var(--surface-0);
  animation: hm-pane-in .4s var(--ease);
  overflow: hidden;
}
[data-theme="light"] body.sdo-landing-page .hm-mdet { background: #fff; }
body.sdo-landing-page .hm-mdet__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body.sdo-landing-page .hm-mdet__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 36px;
  padding-inline: 12px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
body.sdo-landing-page .hm-mdet__back:hover { color: var(--text-strong); border-color: var(--brand-line); }
body.sdo-landing-page .hm-mdet__icon { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 13px; background: color-mix(in oklab, var(--cyan) 14%, transparent); color: var(--brand-text); }
body.sdo-landing-page .hm-mdet h4 { margin: 0; font-size: clamp(18px, 1.2vw + 1.2svh, 24px); font-weight: 800; color: var(--text-strong); }
body.sdo-landing-page .hm-mdet__head p { margin: 0; font-size: 14px; color: var(--text-muted); }
body.sdo-landing-page .hm-mdet__feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1.2svh, 10px) 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(13px, .1vw + 1.35svh, 15px);
  line-height: 1.7;
  color: var(--text-strong);
}
body.sdo-landing-page .hm-mdet__feats i { margin-inline-end: 10px; font-size: .75em; color: var(--hm-green-ink); }
body.sdo-landing-page .hm-mdet__ai, body.sdo-landing-page .hm-mdet__needs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
body.sdo-landing-page .hm-mdet__ai { padding: 10px 14px; border-radius: 12px; background: color-mix(in oklab, #A78BFA 10%, transparent); }
body.sdo-landing-page .hm-mdet__ai i { color: #A78BFA; }
body.sdo-landing-page .hm-mdet__ai b { color: var(--text-strong); }
body.sdo-landing-page .hm-mdet__ai span, body.sdo-landing-page .hm-mdet__needs span { padding: 3px 12px; border-radius: 999px; background: color-mix(in oklab, var(--text-strong) 7%, transparent); }
body.sdo-landing-page .hm-mdet__needs i { color: var(--brand-text); }
body.sdo-landing-page .hm-mdet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: auto; }
body.sdo-landing-page .hm-mdet__ask { min-block-size: 40px; font-size: 13.5px; }
@media (max-width: 599.98px) {
  body.sdo-landing-page .hm-mdet__feats { grid-template-columns: 1fr; }
  body.sdo-landing-page .hm-mdet__head p { display: none; }
  body.sdo-landing-page .hm-mdet__feats li:nth-child(n+5) { display: none; }
}

/* ── Integrations: tap a tool ───────────────────────────────────────────── */
body.sdo-landing-page .hm-hub__nodes li { cursor: pointer; transition: border-color .25s, translate .25s var(--ease); }
body.sdo-landing-page .hm-hub__nodes li:hover { translate: 0 -2px; }
body.sdo-landing-page .hm-hub__nodes li.is-on { border-color: var(--c); box-shadow: 0 0 0 .2em color-mix(in oklab, var(--c) 25%, transparent); }
body.sdo-landing-page .hm-hub__nodes li:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 3px; }
body.sdo-landing-page .hm-int__detail {
  min-block-size: 4.6em;
  max-inline-size: 52ch;
  margin: clamp(10px, 2svh, 18px) 0 0;
  padding: 12px 16px;
  border-inline-start: 3px solid var(--cyan);
  border-radius: 6px;
  background: color-mix(in oklab, var(--text-strong) 5%, transparent);
  font-size: clamp(13px, .1vw + 1.3svh, 15px);
  line-height: 1.85;
  color: var(--text-strong);
}
@media (max-width: 899.98px) { body.sdo-landing-page .hm-int__detail { min-block-size: 0; font-size: 13px; padding: 8px 12px; } }
@media (max-width: 899.98px) and (max-height: 760px) { body.sdo-landing-page .hm-int__detail { display: none; } }

/* ── Contact: which areas matter ────────────────────────────────────────── */
body.sdo-landing-page .hm-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
body.sdo-landing-page .hm-mchip {
  min-block-size: 32px;
  padding-inline: 12px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
body.sdo-landing-page .hm-mchip[aria-pressed="true"] { background: color-mix(in oklab, var(--cyan) 16%, transparent); border-color: var(--cyan); color: var(--text-strong); }
body.sdo-landing-page .hm-mchip:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
@media (max-width: 575.98px) { body.sdo-landing-page .hm-field--chips { display: none; } }
@media (max-height: 700px) { body.sdo-landing-page .hm-field--chips { display: none; } }

/* ── Pillars: a way in ──────────────────────────────────────────────────── */
body.sdo-landing-page .hm-pillar__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text);
  text-decoration: none;
}
body.sdo-landing-page .hm-pillar__more i { font-size: .85em; transition: translate .25s var(--ease); }
body.sdo-landing-page .hm-pillar__more:hover i { translate: -4px 0; }
@media (max-width: 899.98px) { body.sdo-landing-page .hm-pillar__more { display: none; } }

/* The sidebar is a menu now: the approval card moves to the far side so it never covers it. */
@media (min-width: 900px) {
  body.sdo-landing-page .hm-approve { inset-inline-start: auto; inset-inline-end: -2.4em; inline-size: 22em; }
}
body.sdo-landing-page .hm-scr { gap: .7em; }
body.sdo-landing-page .hm-mlist li { padding: .45em .8em .6em; }
body.sdo-landing-page .hm-mlist { gap: .4em; }
body.sdo-landing-page .hm-mkpi { padding: .7em .9em; }
body.sdo-landing-page .hm-mkpi b { font-size: 1.45em; }
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-pmod { padding-inline-end: 50px; }
  body.sdo-landing-page .hm-pmod > b { white-space: normal; font-size: 12px; line-height: 1.4; }
}

/* Short phones: the platform keeps the switches and drops the extras. */
@media (max-width: 899.98px) and (max-height: 740px) {
  body.sdo-landing-page .hm-plat__copy .hm-lead { display: none; }
  body.sdo-landing-page .hm-pmod { min-block-size: 44px; }
  body.sdo-landing-page .hm-plat__stage { gap: 8px; }
}
@media (max-height: 560px) {
  body.sdo-landing-page .hm-plat__points,
  body.sdo-landing-page .hm-plat__presets,
  body.sdo-landing-page .hm-plat__note,
  body.sdo-landing-page .hm-plat__copy .hm-lead { display: none; }
  body.sdo-landing-page .hm-plat__grid-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.sdo-landing-page .hm-pmod { min-block-size: 40px; padding-block: 6px; }
  body.sdo-landing-page .hm-plat__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (max-width: 999.98px) {
  body.sdo-landing-page .hm-mgrid { grid-auto-rows: minmax(0, min(9rem, 12svh)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOW — richer steps
   ═══════════════════════════════════════════════════════════════════════════ */

/* Above the steps: the same work without a system, and what the journey adds up to. */
body.sdo-landing-page .hm-flow__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
body.sdo-landing-page .hm-flow__before {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-inline-size: 62ch;
  margin: 0;
  font-size: clamp(12.5px, .1vw + 1.25svh, 14px);
  line-height: 1.8;
  color: var(--text-muted);
}
body.sdo-landing-page .hm-flow__before i { margin-block-start: .35em; color: var(--hm-rose-ink); }
body.sdo-landing-page .hm-flow__before b { color: var(--text-strong); }
body.sdo-landing-page .hm-flow__stats { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.sdo-landing-page .hm-flow__stats li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--cyan) 12%, transparent);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}
body.sdo-landing-page .hm-flow__stats b { font-size: 1.25em; font-weight: 900; color: var(--brand-text); }

/* A step: who, what you do, what the system does (a list), the modules, the figure. */
body.sdo-landing-page .hm-pane__cols { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
body.sdo-landing-page .hm-pane__auto {
  display: grid;
  gap: clamp(5px, 1svh, 9px);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .hm-pane__auto li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: clamp(12.5px, .1vw + 1.25svh, 14.5px);
  line-height: 1.7;
  color: var(--text-strong);
  animation: hm-pane-in .5s var(--ease) both;
  animation-delay: calc(.12s + var(--k, 0) * 110ms);
}
body.sdo-landing-page .hm-pane__auto i { flex: none; margin-block-start: .4em; font-size: .85em; color: var(--hm-green-ink); }

body.sdo-landing-page .hm-pane__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 12px;
  margin-block-start: clamp(10px, 1.8svh, 16px);
}
body.sdo-landing-page .hm-pane__foot > div {
  padding: clamp(10px, 1.6svh, 16px);
  border: 1px dashed var(--hm-line);
  border-radius: 14px;
  min-inline-size: 0;
}
body.sdo-landing-page .hm-pane__foot small { display: block; margin-block-end: 8px; font-size: 12px; font-weight: 700; color: var(--text-label, var(--text-muted)); }
body.sdo-landing-page .hm-pane__mods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.sdo-landing-page .hm-pane__mods small { flex-basis: 100%; margin: 0 0 2px; }
body.sdo-landing-page .hm-pmodchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text-strong) 7%, transparent);
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
body.sdo-landing-page .hm-pmodchip i { font-size: .85em; color: var(--brand-text); }
body.sdo-landing-page .hm-pmodchip:hover { background: color-mix(in oklab, var(--cyan) 18%, transparent); }
body.sdo-landing-page .hm-pmodchip:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
body.sdo-landing-page .hm-pane__res span { display: flex; align-items: center; gap: 10px; font-size: clamp(13px, .15vw + 1.3svh, 15px); white-space: nowrap; }
body.sdo-landing-page .hm-pane__res s { color: var(--text-muted); text-decoration-thickness: 1px; }
body.sdo-landing-page .hm-pane__res i { font-size: .8em; color: var(--brand-text); }
body.sdo-landing-page .hm-pane__res b { font-weight: 900; color: var(--hm-green-ink); font-size: 1.1em; }

@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-flow__before { display: none; }
  body.sdo-landing-page .hm-flow__stats li { padding: 4px 10px; }
  body.sdo-landing-page .hm-pane__cols { grid-template-columns: 1fr; }
  body.sdo-landing-page .hm-pane__foot { grid-template-columns: 1fr; gap: 8px; }
  body.sdo-landing-page .hm-pane__foot > div { padding: 8px 12px; }
  body.sdo-landing-page .hm-pane__mods small { display: none; }
}
@media (max-width: 899.98px), (max-height: 800px) {
  body.sdo-landing-page .hm-pane__auto li:nth-child(n+3) { display: none; }
}
@media (max-width: 575.98px) {
  body.sdo-landing-page .hm-pane__mods { display: none; }
}
@media (max-height: 640px) {
  body.sdo-landing-page .hm-pane__foot, body.sdo-landing-page .hm-flow__top { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROBLEM — pains and replacements follow the area
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .hm-pains li.is-swap { animation: hm-pane-in .45s var(--ease) both; animation-delay: calc(var(--k, 0) * 80ms); }
body.sdo-landing-page .hm-one__rows li { padding: 0; }
body.sdo-landing-page .hm-one__rows li a {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .75em .9em;
  border-radius: .8em;
  color: inherit;
  text-decoration: none;
  transition: background-color .25s;
}
body.sdo-landing-page .hm-one__rows li a:hover { background: color-mix(in oklab, var(--cyan) 10%, transparent); }
body.sdo-landing-page .hm-one__rows li a:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 1px; }
body.sdo-landing-page .hm-one__mods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin: 1em 0 0;
  padding-block-start: 1em;
  border-block-start: 1px dashed var(--hm-line);
  font-size: .9em;
}
body.sdo-landing-page .hm-one__mods small { color: var(--text-muted); font-size: .9em; font-weight: 700; margin-inline-end: .3em; }
body.sdo-landing-page .hm-one__mods a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .25em .8em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--cyan) 12%, transparent);
  color: var(--text-strong);
  font-weight: 700;
  text-decoration: none;
}
body.sdo-landing-page .hm-one__mods a i { font-size: .85em; color: var(--brand-text); }
body.sdo-landing-page .hm-one__mods a:hover { background: color-mix(in oklab, var(--cyan) 22%, transparent); }
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-one__mods { display: none; }
}

/* Phones: the step itself first; the summary line and role label give way so the live card keeps room. */
@media (max-width: 575.98px) {
  body.sdo-landing-page .hm-flow__top,
  body.sdo-landing-page .hm-pane__who { display: none; }
  body.sdo-landing-page .hm-pane h3 { margin-block-end: 8px; }
  body.sdo-landing-page .hm-pane__res small { display: inline; margin: 0 8px 0 0; }
  body.sdo-landing-page .hm-pane__res { display: flex; align-items: center; justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOW — the swimlane
   Compact (small or short screens): the lane furniture is hidden and the steps
   are the old single row. Roomy screens: one lane per person, a last lane for
   the system, a line through the steps.
   ═══════════════════════════════════════════════════════════════════════════ */
body.sdo-landing-page .hm-lanes .hm-lane,
body.sdo-landing-page .hm-lanes .hm-lane__auto,
body.sdo-landing-page .hm-lanes .hm-lanes__svg { display: none; }
body.sdo-landing-page .hm-lanes .hm-step { grid-column: calc(var(--c) + 1); grid-row: 1; }
body.sdo-landing-page .hm-pane__who span { margin-inline-start: auto; font-size: .9em; color: var(--text-muted); }

@media (min-width: 1000px) and (min-height: 880px) {
  body.sdo-landing-page .hm-lanes {
    --lane-h: clamp(24px, 3.3svh, 34px);
    grid-template-columns: 9.5rem repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(var(--lanes), var(--lane-h));
    row-gap: 4px;
    align-items: center;
  }
  body.sdo-landing-page .hm-lanes .hm-steps__line { display: none; }
  body.sdo-landing-page .hm-lanes .hm-lane {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: calc(var(--r) + 1);
    block-size: 100%;
    border-radius: 10px;
    background: color-mix(in oklab, var(--text-strong) 4%, transparent);
  }
  body.sdo-landing-page .hm-lanes .hm-lane--sys {
    background: color-mix(in oklab, var(--cyan) 9%, transparent);
    outline: 1px dashed color-mix(in oklab, var(--cyan) 45%, transparent);
    outline-offset: -1px;
  }
  body.sdo-landing-page .hm-lane__name {
    display: block;
    inline-size: 9.5rem;
    padding-inline: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.sdo-landing-page .hm-lane--sys .hm-lane__name { color: var(--brand-text); }
  body.sdo-landing-page .hm-lane__name i { margin-inline-end: 6px; }
  body.sdo-landing-page .hm-lanes .hm-step {
    grid-column: calc(var(--c) + 2);
    grid-row: calc(var(--r) + 1);
    z-index: 2;
    flex-direction: row;
    gap: 8px;
    justify-self: center;
    max-inline-size: 100%;
    padding: 3px 12px 3px 4px;
    border: 1px solid var(--hm-line);
    border-radius: 999px;
    background: var(--surface-1);
    transition: border-color .3s, background-color .3s, color .3s;
  }
  [data-theme="light"] body.sdo-landing-page .hm-lanes .hm-step { background: #fff; }
  body.sdo-landing-page .hm-lanes .hm-step__n { inline-size: 24px; block-size: 24px; font-size: 12px; border-width: 2px; flex: none; }
  body.sdo-landing-page .hm-lanes .hm-step__t { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.sdo-landing-page .hm-lanes .hm-step[aria-selected="true"] {
    border-color: var(--cyan);
    background: color-mix(in oklab, var(--cyan) 14%, var(--surface-1));
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--cyan) 14%, transparent);
  }
  body.sdo-landing-page .hm-lanes .hm-step[aria-selected="true"] .hm-step__n { scale: 1; box-shadow: none; }
  body.sdo-landing-page .hm-lanes .hm-step:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 3px; }
  body.sdo-landing-page .hm-lanes .hm-lane__auto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    grid-column: calc(var(--c) + 2);
    grid-row: calc(var(--r) + 1);
    justify-self: center;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: .45;
    transition: opacity .35s, color .35s;
  }
  body.sdo-landing-page .hm-lanes .hm-lane__auto.is-on { opacity: 1; color: var(--hm-green-ink); }
  body.sdo-landing-page .hm-lanes .hm-lanes__svg {
    display: block;
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
  }
  body.sdo-landing-page .hm-lanes__svg path { fill: none; stroke: var(--hm-line); stroke-width: 2; stroke-linejoin: round; transition: stroke .4s; }
  body.sdo-landing-page .hm-lanes__svg path.is-done { stroke: var(--cyan); }
  /* The lane says who acts, so the pane drops its own "who" pill. */
  body.sdo-landing-page .hm-pane__who { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROBLEM — the area tabs sit with the pains they change; the numbers sit
   with the picture they describe
   ═══════════════════════════════════════════════════════════════════════════ */
body.sdo-landing-page .hm-problem__copy .hm-pscenes { margin-block-start: clamp(14px, 2.6svh, 26px); }
body.sdo-landing-page .hm-problem__bar { display: flex; justify-content: center; }

/* Pains as four cards. */
body.sdo-landing-page .hm-problem__copy .hm-pains {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.6svh, 14px);
  margin-block-start: clamp(10px, 2svh, 20px);
}
body.sdo-landing-page .hm-problem__copy .hm-pains li {
  flex-direction: column;
  gap: 10px;
  padding: clamp(12px, 2svh, 18px);
  border: 1px solid var(--hm-line);
  border-radius: 16px;
  background: var(--surface-0);
}
[data-theme="light"] body.sdo-landing-page .hm-problem__copy .hm-pains li { background: #fff; }
body.sdo-landing-page .hm-problem__copy .hm-pains li b { display: block; margin-block-end: 4px; font-size: 1.02em; color: var(--text-strong); }
body.sdo-landing-page .hm-problem__copy .hm-pains li span { font-size: .93em; line-height: 1.75; }

/* The numbers: today in rose, with SDO in green. */
body.sdo-landing-page .hm-pmetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  inline-size: 100%;
}
body.sdo-landing-page .hm-pmetric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  background: var(--surface-0);
  min-inline-size: 0;
}
[data-theme="light"] body.sdo-landing-page .hm-pmetric { background: #fff; }
body.sdo-landing-page .hm-pmetric small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sdo-landing-page .hm-pmetric__v b { font-size: clamp(16px, 1.1vw + 1svh, 22px); font-weight: 900; line-height: 1.3; white-space: nowrap; }
body.sdo-landing-page .hm-pmetric__v .is-today { color: var(--hm-rose-ink); }
body.sdo-landing-page .hm-pmetric__v .is-sdo { color: var(--hm-green-ink); }
body.sdo-landing-page .hm-pmetric__v { display: flex; align-items: baseline; gap: 8px; }
body.sdo-landing-page .hm-pmetric__v i { font-size: .8em; color: var(--text-muted); }
body.sdo-landing-page .hm-pmetric__v .is-today { font-size: .85em; font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1px; opacity: .85; }
body.sdo-landing-page .hm-problem__demo:has([data-hm-mess][data-state="today"]) .is-sdo { opacity: .35; }
body.sdo-landing-page .hm-problem__demo:has([data-hm-mess][data-state="sdo"]) .is-today { opacity: .5; }
body.sdo-landing-page .hm-pmetric__v b { transition: opacity .4s; }
body.sdo-landing-page .hm-problem__demo:has([data-hm-mess][data-state="today"]) .hm-pmetric { border-color: color-mix(in oklab, var(--hm-rose) 40%, transparent); }
body.sdo-landing-page .hm-problem__demo:has([data-hm-mess][data-state="sdo"]) .hm-pmetric { border-color: color-mix(in oklab, var(--hm-green) 40%, transparent); }
body.sdo-landing-page .hm-pmetric { transition: border-color .4s; }

@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-problem__copy .hm-pscenes { margin-block-start: 12px; }
  body.sdo-landing-page .hm-pmetrics { gap: 6px; }
  body.sdo-landing-page .hm-pmetric { padding: 6px 8px; }
  body.sdo-landing-page .hm-pmetric small { font-size: 10.5px; }
  body.sdo-landing-page .hm-pmetric__v b { font-size: 14px; }
}
@media (max-width: 899.98px) and (max-height: 760px) {
  body.sdo-landing-page .hm-pmetrics { display: none; }
}

/* The swimlane takes room; the summary line gives way a little earlier than the steps. */
@media (min-width: 1000px) and (min-height: 880px) {
  body.sdo-landing-page .hm-flow__wrap { gap: clamp(8px, 1.6svh, 18px); }
  body.sdo-landing-page .hm-flow__top { margin-block-end: -4px; }
  body.sdo-landing-page .hm-pane__foot { margin-block-start: clamp(8px, 1.2svh, 12px); }
}
@media (max-height: 560px) {
  body.sdo-landing-page .hm-pane__foot,
  body.sdo-landing-page .hm-flow__top,
  body.sdo-landing-page .hm-pane__who { display: none; }
}
body.sdo-landing-page .hm-pmetric__v { flex-wrap: wrap; }
body.sdo-landing-page .hm-pmetric__v .is-sdo { font-size: clamp(14px, .5vw + .9svh, 19px); }
body.sdo-landing-page .hm-pmetric { overflow: hidden; }
@media (max-height: 560px) {
  body.sdo-landing-page .hm-pane h3 { font-size: 18px; margin-block-end: 6px; }
  body.sdo-landing-page .hm-pane__cols > div { padding: 8px 12px; }
  body.sdo-landing-page .hm-pane__cols p, body.sdo-landing-page .hm-pane__auto li { font-size: 12.5px; line-height: 1.6; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL SCREENS — the rule: a section is never cut. It is built to fit one
   screen; where it cannot, home.js (initFitGuard) gives it the height it needs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The guard: a section that cannot fit its screen grows by exactly what is missing. */
body.sdo-landing-page .hm-sec.is-tall,
body.sdo-landing-page .site-reels.is-tall { block-size: var(--sec-h); }

/* ── Services on phones: one swipeable row of area chips; compact module cards ── */
@media (max-width: 999.98px) {
  body.sdo-landing-page .hm-svc .hm-doms {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--hm-pad-x));
    padding-inline: var(--hm-pad-x);
  }
  body.sdo-landing-page .hm-svc .hm-doms::-webkit-scrollbar { display: none; }
  body.sdo-landing-page .hm-svc .hm-dom {
    flex: none;
    flex-direction: row;
    gap: 8px;
    min-block-size: 40px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--hm-line);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
  }
  body.sdo-landing-page .hm-svc .hm-dom i { inline-size: 1.7em; block-size: 1.7em; border-radius: 50%; }
  body.sdo-landing-page .hm-svc .hm-dom[aria-selected="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--brand-fill-ink); }
  body.sdo-landing-page .hm-svc .hm-dom[aria-selected="true"] i { background: rgb(255 255 255 / .28); color: inherit; }
  body.sdo-landing-page .hm-svc .hm-dom[aria-selected="true"]::after { display: none; }
}
@media (max-width: 599.98px) {
  body.sdo-landing-page .hm-svc .hm-features__body { gap: 12px; }
  body.sdo-landing-page .hm-svc .hm-dpane { gap: 10px; }
  body.sdo-landing-page .hm-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(52px, auto); gap: 8px; align-content: start; }
  body.sdo-landing-page .hm-mcard > a { min-block-size: 52px; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; padding: 8px 10px; column-gap: 10px; }
  body.sdo-landing-page .hm-mcard i { grid-row: 1; inline-size: 30px; block-size: 30px; }
  body.sdo-landing-page .hm-mcard b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    align-self: center;
    font-size: 12.5px;
    line-height: 1.4;
  }
  body.sdo-landing-page .hm-mgrid--few { grid-template-columns: minmax(0, 1fr); }
}

/* ── Module details: on small screens a bottom sheet over the page (the card
   is moved to <body> by home.js while open), in place on large ones. ── */
.hm-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(4 12 22 / .6);
  animation: hm-fade .25s ease both;
}
.hm-sheet[hidden] { display: none; }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-sheet-up { from { translate: 0 40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.hm-sheet .hm-mdet {
  block-size: auto;
  inline-size: min(100%, 38rem);
  max-block-size: 90svh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding-bottom: calc(clamp(16px, 3svh, 30px) + env(safe-area-inset-bottom, 0px));
  animation: hm-sheet-up .35s var(--ease) both;
  overscroll-behavior: contain;
  background: var(--surface-0);
  color: var(--text-strong);
}
html.hm-sheet-open, html.hm-sheet-open body { overflow: hidden; }
html.hm-sheet-open { scroll-snap-type: none !important; }
.hm-sheet .hm-mdet__head { position: sticky; inset-block-start: calc(-1 * clamp(16px, 3svh, 30px)); z-index: 2; margin: calc(-1 * clamp(16px, 3svh, 30px)) calc(-1 * clamp(16px, 2.2vw, 32px)) 0; padding: clamp(14px, 2.4svh, 22px) clamp(16px, 2.2vw, 32px) 12px; background: var(--surface-0); }
.hm-sheet .hm-mdet__feats { grid-template-columns: 1fr; }
.hm-sheet .hm-mdet__foot { flex-direction: column; align-items: stretch; gap: 10px; }
.hm-sheet .hm-mdet__ask { inline-size: 100%; justify-content: center; }
.hm-sheet .hm-mdet__foot .pg-more { justify-content: center; }

/* ── Footer on phones: the whole page end in one screen ── */
@media (max-width: 575.98px) {
  body.sdo-landing-page .hm-foot__inner { padding-block: 18px 12px; }
  body.sdo-landing-page .hm-foot__top { padding-block-end: 10px; }
  body.sdo-landing-page .hm-foot__logo { block-size: 28px; }
  body.sdo-landing-page .hm-foot__grid { grid-template-columns: 1.25fr 1fr; gap: 12px 14px; padding-block: 12px; }
  body.sdo-landing-page .hm-foot__col h2 { margin-block-end: 6px; font-size: 12px; }
  body.sdo-landing-page .hm-foot__col ul { gap: 4px; }
  body.sdo-landing-page .hm-foot__col ul a, body.sdo-landing-page .hm-foot__line { font-size: 12.5px; line-height: 1.5; }
  body.sdo-landing-page .hm-foot__col:first-child ul { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  body.sdo-landing-page .hm-foot__contact { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  body.sdo-landing-page .hm-foot__contact h2 { grid-column: 1 / -1; }
  body.sdo-landing-page .hm-foot__contact .hm-foot__line:nth-of-type(3) { grid-column: 1 / -1; }
  body.sdo-landing-page .hm-foot__social { grid-column: 1 / -1; justify-self: start; margin-block-start: 2px; padding: 5px 12px; font-size: 12px; }
  body.sdo-landing-page .hm-foot__legal { padding-block-start: 10px; font-size: 11px; gap: 4px; }
  body.sdo-landing-page .hm-foot__legal-links { gap: 4px 12px; }
}

/* ── Video on phones: the playlist (site.css) stays; on short phones the heading gives
   up its extras so the three rows keep their room. ── */
@media (max-width: 767.98px) and (max-height: 700px) {
  body.sdo-landing-page .site-reels__meta { display: none; }
  body.sdo-landing-page .site-reels > .site-container { row-gap: 10px; }
}
@media (max-width: 671.98px) and (max-height: 700px) {
  body.sdo-landing-page .site-reels > .site-container { --films-h: calc(3 * (4.6rem + 2 * var(--s2)) + 2 * var(--reels-gap)); }
  body.sdo-landing-page .site-reels__grid { --row-h: clamp(3.25rem, calc((100cqb - 2 * var(--reels-gap)) / 3 - 2 * var(--s2)), 4.6rem); }
  body.sdo-landing-page .site-reel__title, body.sdo-landing-page .site-reels__cell--lead .site-reel__title { font-size: 14px; line-height: 1.5; }
}

/* ═══ Small-screen refinements (from the device audit) ═══ */

/* Services: the pane is as tall as its content; the link follows the cards. */
@media (max-width: 599.98px) {
  body.sdo-landing-page .hm-svc .hm-dpane { grid-template-rows: auto auto; align-content: start; }
  body.sdo-landing-page .hm-svc__more { margin-block-start: 4px; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  body.sdo-landing-page .hm-mgrid { grid-auto-rows: minmax(0, auto); align-content: start; }
  body.sdo-landing-page .hm-mcard > a { min-block-size: 96px; }
  body.sdo-landing-page .hm-svc .hm-dpane { align-content: start; }
}

/* Short screens (phones held sideways, small laptops' split views). */
@media (max-height: 560px) {
  body.sdo-landing-page .hm-mgrid { grid-auto-rows: minmax(44px, auto); }
  body.sdo-landing-page .hm-mcard b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.35;
  }
  body.sdo-landing-page .hm-hero__facts,
  body.sdo-landing-page .hm-hero__lead { display: none; }
  body.sdo-landing-page .hm-problem__copy .hm-pains,
  body.sdo-landing-page .hm-pmetrics,
  body.sdo-landing-page .hm-one__mods,
  body.sdo-landing-page .hm-why__stats,
  body.sdo-landing-page .hm-why__brands,
  body.sdo-landing-page .hm-int__detail,
  body.sdo-landing-page .hm-ai__copy .hm-lead,
  body.sdo-landing-page .hm-plat__points { display: none; }
}
@media (max-height: 560px) and (min-width: 560px) {
  body.sdo-landing-page .hm-foot__inner { padding-block: 14px 10px; }
  body.sdo-landing-page .hm-foot__grid { grid-template-columns: 1.2fr 1fr 1.2fr; gap: 10px 20px; padding-block: 10px; }
  body.sdo-landing-page .hm-foot__contact { grid-column: auto; display: flex; flex-direction: column; gap: 4px; }
  body.sdo-landing-page .hm-foot__col h2 { margin-block-end: 6px; }
  body.sdo-landing-page .hm-foot__col ul { gap: 3px; }
  body.sdo-landing-page .hm-foot__col:first-child ul { grid-template-columns: 1fr 1fr; }
  body.sdo-landing-page .hm-foot__col ul a, body.sdo-landing-page .hm-foot__line { font-size: 12px; line-height: 1.4; }
  body.sdo-landing-page .hm-foot__brand p, body.sdo-landing-page .hm-foot__top-btn span { display: none; }
  body.sdo-landing-page .hm-foot__legal { padding-block-start: 8px; font-size: 11px; }
}
@media (max-height: 640px) and (max-width: 899.98px) {
  body.sdo-landing-page .hm-pmod { min-block-size: 40px; }
  body.sdo-landing-page .hm-plat__presets { gap: 4px; }
}

/* Module cards are as tall as their text needs (a clamp keeps long ones in check). */
body.sdo-landing-page .hm-mcard > a { overflow: visible; }
body.sdo-landing-page .hm-mgrid:not(.hm-mgrid--few) { grid-auto-rows: minmax(auto, min(10.5rem, 21svh)); }
@media (max-width: 599.98px) { body.sdo-landing-page .hm-mgrid:not(.hm-mgrid--few) { grid-auto-rows: minmax(52px, auto); } }
@media (min-width: 600px) and (max-width: 999.98px) { body.sdo-landing-page .hm-mgrid:not(.hm-mgrid--few) { grid-auto-rows: minmax(0, auto); } }
@media (max-height: 560px) { body.sdo-landing-page .hm-mgrid:not(.hm-mgrid--few) { grid-auto-rows: minmax(44px, auto); } }

/* Held sideways on a phone: four text tiles in a 2×2, no pictures (the pictures
   need height the screen does not have). */
@media (max-height: 560px) and (max-width: 999.98px) {
  body.sdo-landing-page .hm-pillars__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px; }
  body.sdo-landing-page .hm-pillar--a, body.sdo-landing-page .hm-pillar--b,
  body.sdo-landing-page .hm-pillar--c, body.sdo-landing-page .hm-pillar--d { grid-column: auto; }
  body.sdo-landing-page .hm-pillars__grid .hm-pillar__vis { display: none; }
  body.sdo-landing-page .hm-pillars__grid .hm-pillar--a p,
  body.sdo-landing-page .hm-pillars__grid .hm-pillar--d p { display: -webkit-box; }
  body.sdo-landing-page .hm-pillar { padding: 10px 12px; gap: 4px; }
  body.sdo-landing-page .hm-pillar h3 { font-size: 14px; }
  body.sdo-landing-page .hm-pillar p { font-size: 12px; -webkit-line-clamp: 2; margin-block-start: 2px; }
}
body.sdo-landing-page .hm-svc__more { line-height: 1.5; padding-block: 2px 5px; }
body.sdo-landing-page .hm-svc__more i { line-height: 1; }
@media (max-height: 600px) and (max-width: 899.98px) {
  body.sdo-landing-page .hm-plat__copy .hm-eyebrow { display: none; }
}

/* ═══ Accessibility pass ═══ */

/* Accent colours used as text: the same hue, darker on the light theme so it reads (≥ 4.5:1). */
body.sdo-landing-page { --hm-green-ink: var(--hm-green); --hm-rose-ink: var(--hm-rose); --hm-amber-ink: var(--hm-amber); }
[data-theme="light"] body.sdo-landing-page { --hm-green-ink: #15803D; --hm-rose-ink: #BE123C; --hm-amber-ink: #B45309; }
[data-theme="light"] body.sdo-landing-page .hm-one__tag { color: #166534; }
[data-theme="light"] body.sdo-landing-page .hm-task__status { color: color-mix(in oklab, var(--c, var(--cyan)) 40%, #0A1B30); }
[data-theme="light"] body.sdo-landing-page .hm-why__brands > p { color: #4A5E75; }

/* Integration tools: a real button laid over the card, so the card itself stays a list item. */
body.sdo-landing-page .hm-hub__nodes li { cursor: default; }
body.sdo-landing-page .hm-node__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
body.sdo-landing-page .hm-hub__nodes li:has(.hm-node__hit:focus-visible) { outline: 2px solid var(--brand-line); outline-offset: 3px; }
body.sdo-landing-page .hm-hub__nodes li:has(.hm-node__hit:hover) { translate: 0 -2px; }
@media (max-width: 899.98px) { body.sdo-landing-page .hm-node__hit { position: absolute; } }

/* The AI areas' panels: the tabpanel is a wrapper, the list inside stays a list. */
body.sdo-landing-page .hm-aipanel-wrap[hidden] { display: none; }

/* Skip link target and focus on the main region. */
body.sdo-landing-page main.sdo-main { display: block; }
body.sdo-landing-page main.sdo-main:focus { outline: none; }
[data-theme="light"] body.sdo-landing-page .tpl-nav > ul > li.is-current > a,
[data-theme="light"] body.sdo-landing-page .tpl-nav > ul > li.is-current > button { color: var(--brand-text); }

/* Reduced motion: everything that moves on its own stops, everything is simply shown. */
@media (prefers-reduced-motion: reduce) {
  body.sdo-landing-page *, body.sdo-landing-page *::before, body.sdo-landing-page *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .hm-sheet, .hm-sheet .hm-mdet { animation: none !important; }
}

/* ── Scroll rows: fade the edge that has more, grab to drag, selected is clear ── */
body.sdo-landing-page .hm-scrollrow {
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
@media (hover: hover) and (pointer: fine) {
  body.sdo-landing-page .hm-scrollrow { cursor: grab; }
  body.sdo-landing-page .hm-scrollrow.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
  body.sdo-landing-page .hm-scrollrow.is-dragging * { pointer-events: none; }
}
/* Rows that fit are plain rows: no fade, no grab. */
body.sdo-landing-page .hm-scrollrow[style*="--fade-l: 0px"][style*="--fade-r: 0px"] { cursor: auto; }

/* The example combinations: the chosen one is clearly chosen. */
body.sdo-landing-page .hm-preset[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--brand-fill-ink);
}
body.sdo-landing-page .hm-preset[aria-pressed="true"]::before { content: "\2713"; margin-inline-end: 6px; font-weight: 900; }
body.sdo-landing-page .hm-preset--reset[aria-pressed="true"] { background: none; color: var(--text-muted); border-style: solid; }
body.sdo-landing-page .hm-preset--reset[aria-pressed="true"]::before { content: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLES — the latest three, every card the same: one picture frame (size set
   once, so every article's picture is cropped the same way), category, title,
   a short excerpt, date and reading time. Cards in a row on wide screens, a
   compact list on phones. No picture: the quiet brand tile (dot grid + SDO).
   ═══════════════════════════════════════════════════════════════════════════ */
body.sdo-landing-page .hm-articles {
  --art-frame: clamp(130px, 34svh, 300px);   /* the one picture height */
}
body.sdo-landing-page .hm-articles__wrap { display: flex; flex-direction: column; gap: clamp(16px, 3.4svh, 40px); justify-content: center; }
body.sdo-landing-page .hm-articles__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
body.sdo-landing-page .hm-articles__head > div { flex: 1; min-inline-size: 0; }
body.sdo-landing-page .hm-articles__head .hm-title { margin-block-end: clamp(4px, 1svh, 10px); }
body.sdo-landing-page .hm-articles__all { flex: none; }

body.sdo-landing-page .hm-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
}
body.sdo-landing-page .hm-articles__grid--n1 { grid-template-columns: minmax(0, 28rem); }
body.sdo-landing-page .hm-articles__grid--n2 { grid-template-columns: repeat(2, minmax(0, 28rem)); }

body.sdo-landing-page .hm-art { position: relative; display: flex; min-inline-size: 0; }
body.sdo-landing-page .hm-art__link {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}
body.sdo-landing-page .hm-art__link:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 6px; border-radius: 6px; }

body.sdo-landing-page .hm-art__media {
  position: relative;
  flex: none;
  block-size: var(--art-frame);
  overflow: hidden;
  border-radius: var(--hm-radius);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hm-line);
}
body.sdo-landing-page .hm-art__media > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transition: scale .7s var(--ease);
}
body.sdo-landing-page .hm-art__link:hover .hm-art__media > img { scale: 1.04; }
/* No picture: the site's own quiet tile. */
body.sdo-landing-page .hm-art__media.is-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(color-mix(in oklab, var(--text-strong) 14%, transparent) 1px, transparent 1.3px) 0 0 / 18px 18px,
    var(--surface-1);
}
body.sdo-landing-page .hm-art__media.is-empty::after {
  content: "SDO";
  font-family: var(--font-mono);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: .14em;
  color: color-mix(in oklab, var(--text-strong) 11%, transparent);
}

body.sdo-landing-page .hm-art__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-block-size: 0; }
body.sdo-landing-page .hm-art__cat { font-size: 13px; font-weight: 700; color: var(--brand-text); }
body.sdo-landing-page .hm-art__title {
  margin: 0;
  font-size: clamp(17px, .5vw + 1.8svh, 22px);
  font-weight: 800;
  line-height: 1.6;
  color: var(--text-strong);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color .25s;
}
body.sdo-landing-page .hm-art__link:hover .hm-art__title { color: var(--brand-text); }
body.sdo-landing-page .hm-art__ex {
  font-size: clamp(13px, .1vw + 1.3svh, 15px);
  line-height: 1.9;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
body.sdo-landing-page .hm-art__meta {
  margin-block-start: auto;
  padding-block-start: 10px;
  display: flex;
  align-items: center;
  gap: 6px 16px;
  border-block-start: 1px solid var(--hm-line);
  font-size: 12.5px;
  color: var(--text-muted);
}
body.sdo-landing-page .hm-art__meta i { margin-inline-end: 6px; font-size: .9em; }
body.sdo-landing-page .hm-art__go { margin-inline-start: auto; color: var(--brand-text); opacity: 0; translate: 6px 0; transition: opacity .25s, translate .3s var(--ease); }
body.sdo-landing-page .hm-art__go i { margin: 0; }
body.sdo-landing-page .hm-art__link:hover .hm-art__go, body.sdo-landing-page .hm-art__link:focus-visible .hm-art__go { opacity: 1; translate: 0 0; }

/* Phones and tablets in portrait: a compact list, the same frame ratio on every row. */
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-articles__head { display: block; }
  body.sdo-landing-page .hm-articles__all { margin-block-start: 14px; inline-size: 100%; }
  body.sdo-landing-page .hm-articles__lead { display: none; }
  body.sdo-landing-page .hm-articles__grid,
  body.sdo-landing-page .hm-articles__grid--n1,
  body.sdo-landing-page .hm-articles__grid--n2 { display: flex; flex-direction: column; gap: 12px; }
  body.sdo-landing-page .hm-art__link { flex-direction: row; align-items: stretch; gap: 14px; padding: 10px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); background: var(--surface-0); }
  [data-theme="light"] body.sdo-landing-page .hm-art__link { background: #fff; }
  body.sdo-landing-page .hm-art__media { flex: 0 0 34%; block-size: auto; aspect-ratio: 4 / 3; border-radius: 12px; align-self: center; }
  body.sdo-landing-page .hm-art__media.is-empty::after { font-size: 22px; }
  body.sdo-landing-page .hm-art__body { justify-content: center; gap: 4px; }
  body.sdo-landing-page .hm-art__title { font-size: 15px; line-height: 1.55; }
  body.sdo-landing-page .hm-art__ex, body.sdo-landing-page .hm-art__go { display: none; }
  body.sdo-landing-page .hm-art__meta { border: 0; padding: 4px 0 0; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  body.sdo-landing-page .hm-art__ex { display: -webkit-box; font-size: 13.5px; }
  body.sdo-landing-page .hm-art__title { font-size: 17px; }
}
@media (max-width: 899.98px) and (min-height: 760px) {
  body.sdo-landing-page .hm-art__ex { display: -webkit-box; font-size: 12.5px; line-height: 1.75; }
  body.sdo-landing-page .hm-art__link { padding: 12px; }
}
/* Short wide screens: the frame gets lower, the excerpt goes first. */
@media (min-width: 900px) and (max-height: 760px) {
  body.sdo-landing-page .hm-articles__lead, body.sdo-landing-page .hm-art__ex { display: none; }
}
@media (max-height: 560px) {
  body.sdo-landing-page .hm-articles__lead, body.sdo-landing-page .hm-art__ex { display: none; }
  body.sdo-landing-page .hm-articles { --art-frame: clamp(90px, 30svh, 160px); }
  body.sdo-landing-page .hm-art__link { padding: 8px; gap: 10px; }
}

/* Articles on phones, tightened so the three rows and the heading share one screen:
   the "all articles" button sits beside the title, rows are lean, the excerpt only
   appears where there is height for it. */
@media (max-width: 899.98px) {
  body.sdo-landing-page .hm-articles__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  body.sdo-landing-page .hm-articles__all { margin: 0; inline-size: auto; min-block-size: 38px; padding-inline: 14px; font-size: 13px; }
  body.sdo-landing-page .hm-articles__head .hm-title { font-size: clamp(22px, 5.4vw, 30px); margin-block-end: 0; }
  body.sdo-landing-page .hm-articles__head .hm-eyebrow { margin-block-end: 6px; }
  body.sdo-landing-page .hm-articles__wrap { gap: 14px; }
  body.sdo-landing-page .hm-articles__grid { gap: 10px; }
  body.sdo-landing-page .hm-art__link { padding: 8px; gap: 12px; }
  body.sdo-landing-page .hm-art__media { flex-basis: 30%; }
  body.sdo-landing-page .hm-art__cat { font-size: 12px; }
  body.sdo-landing-page .hm-art__title { font-size: 14.5px; }
}
@media (max-width: 899.98px) and (min-height: 760px) {
  body.sdo-landing-page .hm-art__ex { display: -webkit-box; }
}
/* A phone held sideways: three columns, a lower frame. */
@media (max-height: 560px) and (min-width: 560px) {
  body.sdo-landing-page .hm-articles__grid, body.sdo-landing-page .hm-articles__grid--n1, body.sdo-landing-page .hm-articles__grid--n2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body.sdo-landing-page .hm-art__link { flex-direction: column; gap: 8px; padding: 8px; }
  body.sdo-landing-page .hm-art__media { flex: none; block-size: clamp(60px, 24svh, 110px); aspect-ratio: auto; inline-size: 100%; }
  body.sdo-landing-page .hm-art__meta { display: none; }
  body.sdo-landing-page .hm-art__title { font-size: 13px; }
  body.sdo-landing-page .hm-articles__head .hm-eyebrow { display: none; }
}

/* The dashboard picture on the light theme: tags and counts need a darker ink. */
[data-theme="light"] body.sdo-landing-page .hm-tag--amber { color: #92400E; }
[data-theme="light"] body.sdo-landing-page .hm-tag--green { color: #166534; }
[data-theme="light"] body.sdo-landing-page .hm-mood b { color: color-mix(in oklab, var(--c) 42%, #0A1B30); }