/* Home page: white, Google Sans, soft elevation. One 8px spacing scale, one 1240px grid shared with the header.
   Loaded last; /classic/ never renders .hm. */
body:has(.hm) .wrap { max-width: 1240px; padding-inline: clamp(16px, 3vw, 32px); }
.hm {
  --hm-ink: var(--ds-ink); --hm-ink-2: var(--ds-ink-2); --hm-ink-3: var(--ds-ink-3); --hm-blue: var(--ds-primary); --hm-blue-d: var(--ds-primary-hover);
  --hm-surface: var(--ds-surface); --hm-line: var(--ds-line); --hm-line-2: var(--ds-line-2); --hm-ok: var(--ds-ok);
  --hm-r: var(--r-l); --hm-r-s: var(--r-m);
  --hm-e1: var(--e1);
  --hm-e2: var(--e2);
  --hm-e3: var(--e3);
  --hm-ease: var(--ease);
  background: #fff; color: var(--hm-ink);
}
.hm :is(dd, .hm-ck-v, .hm-course-meta, .hm-index b, .hm-first-t) { font-variant-numeric: tabular-nums lining-nums; }
.hm :is(h1, h2, h3) { font-family: var(--f-hero); text-wrap: balance; }
.hm a:focus-visible, .hm button:focus-visible, .hm select:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--r-s); }

/* small sentence-case eyebrow, no numbering */
.hm-mark { margin: 0; font: 500 var(--fs-body-s)/1.4 var(--f-body); color: var(--hm-blue); }

/* ---------- hero ---------- */
/* white at the top, the page's own surface at the foot, one hairline to the first section: no glows */
.hm-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 64px); background: linear-gradient(180deg, #fff 0%, #fff 44%, var(--hm-surface) 100%); border-bottom: 1px solid var(--hm-line); }
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.hm-copy { min-width: 0; }
.hm-title { margin: 16px 0 0; font: 500 clamp(36px, 3.9vw, 56px)/1.1 var(--f-hero); letter-spacing: -0.02em; color: var(--hm-ink); max-width: 17ch; }
:lang(de) .hm-title, :lang(fr) .hm-title, :lang(es) .hm-title, :lang(ru) .hm-title, :lang(pt) .hm-title, :lang(it) .hm-title { font-size: clamp(32px, 3.4vw, 50px); max-width: 18ch; }
:is(:lang(ar), :lang(fa), :lang(ur), :lang(he)) .hm-title { letter-spacing: 0; line-height: 1.3; }
:is(:lang(zh), :lang(ja), :lang(ko)) .hm-title { letter-spacing: 0; line-height: 1.25; }
.hm-title { text-wrap: balance; }
:lang(ja) :is(.hm-title, .hm-sub) { word-break: auto-phrase; line-break: strict; }
:lang(ko) :is(.hm-title, .hm-sub) { word-break: keep-all; }
:lang(zh) :is(.hm-title, .hm-sub) { line-break: strict; }
.hm-sub { margin: 20px 0 0; max-width: 52ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--hm-ink-2); }
.hm-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.hm-btn { display: inline-flex; align-items: center; gap: 12px; min-height: var(--btn-h); padding: 0 24px; background: var(--ds-primary); color: var(--ds-on-primary); border-radius: var(--r-full); font: var(--btn-font); text-decoration: none; box-shadow: none; transition: background 200ms var(--hm-ease), box-shadow 200ms var(--hm-ease), transform 120ms var(--hm-ease); }
.hm-btn span { transition: transform 200ms var(--hm-ease); }
.hm-btn:hover { background: var(--hm-blue-d); color: #fff; box-shadow: var(--hm-e2); }
.hm-btn:hover span { transform: translateX(3px); }
.hm-btn:active { transform: scale(0.98); box-shadow: var(--hm-e1); }
.hm a.hm-btn:focus-visible { outline-offset: var(--ring-offset); border-radius: var(--r-full); }
[dir="rtl"] .hm-btn:hover span { transform: translateX(-3px); }
.hm-link { display: inline-flex; align-items: center; min-height: var(--btn-h); padding: 0 24px; border: 0; border-radius: var(--r-full); background: var(--ds-primary-tonal); color: var(--ds-primary-hover); font: var(--btn-font); text-decoration: none; transition: background 200ms var(--hm-ease), border-color 200ms var(--hm-ease); }
.hm-link:hover { background: var(--ds-primary-tonal-hover); color: var(--ds-primary-hover); }
.hm-link:active { background: var(--ds-primary-tonal-hover); transform: scale(0.98); }
.hm a.hm-link:focus-visible { border-radius: var(--r-full); }
.hm-note { margin: 16px 0 0; font-size: var(--fs-body-s); line-height: 1.5; color: var(--hm-ink-3); max-width: 52ch; }

/* product shot: the ERP screen in a rounded window, the task check floating over it */
.hm-shot { margin: 0; min-width: 0; position: relative; }
.hm-dim { display: flex; align-items: center; gap: 8px; height: 36px; padding-inline: 16px; background: var(--ds-surface-2); border: 1px solid var(--hm-line); border-bottom: 0; border-radius: var(--hm-r) var(--hm-r) 0 0; }
.hm-dim::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ds-line-2); box-shadow: 16px 0 0 var(--ds-line-2), 32px 0 0 var(--ds-line-2); margin-inline-end: 40px; flex: none; }
.hm-dim span { font: 500 var(--fs-label-s)/1 var(--f-body); color: var(--hm-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-frame { position: relative; }
/* the estimate screen, cropped to the rows that can be read at this size, never the whole 1440 at once */
.hm-frame-in { overflow: hidden; aspect-ratio: 1202 / 720; background: #fff; border: 1px solid var(--hm-line); border-radius: var(--r-xl); box-shadow: var(--hm-e3); }
.hm-frame-in img { display: block; width: 100%; height: auto; }
.hm-shot figcaption { margin-top: 16px; max-width: calc(100% - min(320px, 58%) - 16px); font-size: var(--fs-label); line-height: 1.5; color: var(--hm-ink-3); }

/* The check card: the ERP reading the priced positions back off the screen beside it. Every figure is in the
   markup at rest (videos.js checkCard), so the card is complete and correct with no script and with reduced
   motion; the sequence below only replays it. Nothing here is absolutely positioned inside the frame, so a
   new screenshot changes nothing. */
.hm-ck { position: absolute; inset-inline-end: -20px; bottom: -112px; width: min(272px, 48%); background: #fff; color: var(--hm-ink); border: 1px solid var(--hm-line); border-radius: var(--hm-r); box-shadow: var(--hm-e3); padding: 14px 16px; font-size: var(--fs-body-s); }
.hm-ck p { margin: 0; max-width: none; }
.hm-ck-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; font: 500 var(--fs-label)/1.3 var(--f-body); color: var(--hm-ink-3); }
.hm-ck-gb { display: inline-flex; align-items: baseline; gap: 2px; color: var(--hm-blue); }
.hm-ck-q { font: 500 var(--fs-title-s)/1 var(--f-hero); min-width: 2ch; text-align: end; direction: ltr; unicode-bidi: isolate; }
.hm-ck-q::after { content: "/100"; font: 400 var(--fs-label-s)/1 var(--f-body); color: var(--hm-ink-3); }
.hm-ck-rows { list-style: none; margin: 0; padding: 0; }
.hm-ck-row { --i: 4; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hm-line); }
.hm-ck-code { font: 400 var(--fs-label-s)/1.2 var(--f-body); color: var(--hm-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; unicode-bidi: isolate; }
.hm-ck-v { font: 500 var(--fs-body-s)/1.2 var(--f-body); }
.hm-ck-v.is-count { display: inline-grid; }
.hm-ck-v.is-count > * { grid-area: 1 / 1; text-align: end; font: inherit; font-style: normal; }
.hm-ck-v.is-count > i { visibility: hidden; }
.hm-ck-row.is-warn .hm-ck-v { color: var(--ds-warn); }
.hm-ck-row.is-sum { border-top: 1px solid var(--hm-ink); padding-top: 10px; }
.hm-ck-row.is-sum .hm-ck-code { font: 500 var(--fs-label)/1.2 var(--f-body); color: var(--hm-ink); }
.hm-ck-row.is-sum .hm-ck-v { font-size: var(--fs-body); font-weight: 600; }
.hm-ck-ok, .hm-ck-no { width: 18px; height: 18px; border-radius: 50%; position: relative; display: inline-block; flex: none; }
.hm-ck-ok { background: var(--hm-ok); }
.hm-ck-ok::after { content: ""; position: absolute; inset-inline-start: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hm-ck-no { background: var(--ds-warn); }
.hm-ck-no::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--f-body); color: #fff; }
.hm-ck-line { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; padding: 8px 12px; border-radius: var(--hm-r-s); background: var(--ds-warn-tonal); font-weight: 500; font-size: var(--fs-label); color: var(--ds-warn); }
.hm-ck-line::before { content: ""; flex: none; width: 0; height: 0; border: 6px solid transparent; border-bottom-color: currentColor; margin-top: -3px; }
@media (prefers-reduced-motion: no-preference) {
  /* One step of the check per --beat: the row lights, its figure is read back, the mark lands; the sum and
     the warning count come last. The whole sequence hangs off a class on <body> that videos.js sets when it
     mounts the home page, so the CSS clock and the two counters it runs start together - and so that nothing
     inside .hm-hero is ever touched (tools/prerender_home.py snapshots that subtree and hydration compares
     it byte for byte). Neither the picture nor the heading moves, so the largest paint is not delayed. */
  body.hm-run .hm-ck-row::before { content: ""; position: absolute; inset: 0 -8px; border-radius: var(--r-xs); background: var(--ds-primary-tonal); opacity: 0; animation: hm-ck-lit calc(var(--beat) * 2) var(--ease-std) calc(100ms + var(--i) * var(--beat)) both; }
  body.hm-run .hm-ck-row .hm-ck-v { animation: hm-in var(--dur-m) var(--ease-out) calc(160ms + var(--i) * var(--beat)) both; }
  body.hm-run .hm-ck-row :is(.hm-ck-ok, .hm-ck-no) { animation: hm-pop var(--dur-m) var(--ease-out) calc(240ms + var(--i) * var(--beat)) both; }
  body.hm-run .hm-ck-q { animation: hm-in var(--dur-m) var(--ease-out) 200ms both; }
  body.hm-run .hm-ck-line { animation: hm-in var(--dur-l) var(--ease-out) 1700ms both; }
}
@keyframes hm-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes hm-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes hm-ck-lit { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* facts: one quiet strip, numbers at body weight */
.hm-facts { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr; margin: clamp(44px, 4.5vw, 64px) 0 0; padding: 0; background: none; border: 0; border-top: 1px solid var(--hm-line); }
.hm-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 24px 24px 0 0; min-width: 0; }
.hm-fact + .hm-fact { border-inline-start: 1px solid var(--hm-line); padding-inline-start: 24px; }
.hm-fact dd { margin: 0; font: 500 clamp(26px, 2.4vw, 34px)/1.1 var(--f-hero); white-space: nowrap; color: var(--hm-ink); }
.hm-fact dd small { font-size: 0.55em; color: var(--hm-ink-3); margin-inline-start: 2px; }
.hm-fact dt { font-size: var(--fs-body-s); line-height: 1.4; color: var(--hm-ink-2); }
.hm-fact-k { display: none; }
.hm-fact .hm-fact-x { order: -1; font-weight: 400; line-height: 1.4; white-space: normal; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: var(--fs-label); color: var(--hm-ink-3); }
.hm-fact-x span { display: inline-flex; align-items: center; gap: 8px; }
.hm-fact-x img, .hm-course-top img, .hm-cc img { object-fit: cover; border-radius: var(--r-xs); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.hm-fact-x img { width: 16px; height: 11px; }

/* ---------- sections ---------- */
.hm-sec { padding-top: var(--section); }
.hm-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px clamp(32px, 4vw, 64px); align-items: end; margin-bottom: 32px; }
.hm-head .hm-mark { grid-column: 1 / -1; }
.hm-head h2 { margin: 0; font: 500 var(--fs-h2)/1.2 var(--f-hero); letter-spacing: -0.01em; color: var(--hm-ink); }
.hm-lead { margin: 0; max-width: 60ch; font-size: var(--fs-body-l); line-height: 1.6; color: var(--hm-ink-2); }
.hm-more { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-body)/1.4 var(--f-body); color: var(--hm-blue); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 160ms; }
.hm-more:hover { color: var(--hm-blue-d); text-decoration-color: currentColor; }

/* cards: white, hairline, lift on hover */
.hm-how, .hm-courses, .hm-cc { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.hm-how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-how li { padding: 24px; background: var(--hm-surface); border-radius: var(--hm-r); }
.hm-how-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: var(--hm-e1); font: 500 var(--fs-body-s)/1 var(--f-body); color: var(--hm-blue); }
.hm-how h3 { margin: 16px 0 8px; font: 500 var(--fs-title)/1.3 var(--f-hero); color: var(--hm-ink); }
.hm-how p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--hm-ink-2); max-width: 44ch; }

.hm-courses { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.hm-course, .hm-cc li { min-width: 0; }
.hm-course a, .hm-cc a { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-r); color: var(--hm-ink); text-decoration: none; transition: box-shadow var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out); }
.hm-course a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 24px; overflow: hidden; }
.hm-course a:hover, .hm-cc a:hover { border-color: var(--ds-line); box-shadow: var(--card-hover); }
/* Hover and keyboard focus are one and the same state: the card is picked, the way a position is picked in
   the bill - a rule down the leading edge and the title in the accent colour. Nothing lifts, nothing glows. */
.hm-course a, .co-card a { position: relative; }
.hm-course a::before, .co-card a::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; pointer-events: none;
  border-start-start-radius: inherit; border-end-start-radius: inherit; background: var(--ds-primary);
  opacity: 0; transition: opacity var(--dur-s) var(--ease-out);
}
:is(.hm-course, .co-card) a:is(:hover, :focus-visible)::before { opacity: 1; }
.hm-course a:is(:hover, :focus-visible) .hm-course-t, .co-card a:is(:hover, :focus-visible) .co-card-t { color: var(--hm-blue-d); }
.hm-course a:active, .hm-cc a:active { transform: none; box-shadow: var(--hm-e1); }
.hm-course a:focus-visible, .hm-cc a:focus-visible { border-radius: var(--hm-r); }
.hm-course-top { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 500; color: var(--hm-ink-2); }
.hm-course-top img { width: 20px; height: 14px; }
.hm-course-no { display: none; }
.hm-course-lang { margin-inline-start: auto; font: 500 var(--fs-label-s)/1 var(--f-body); color: var(--hm-ink-3); background: var(--hm-surface); border-radius: var(--r-full); padding: 4px 8px; }
.hm-course-t { font: 500 var(--fs-title)/1.3 var(--f-hero); }
.hm-course-s { font-size: var(--fs-body); line-height: 1.55; color: var(--hm-ink-2); flex: 1 1 auto; }
.hm-course-bar { display: flex; gap: 4px; }
.hm-course-bar i { flex: 1 1 0; height: 6px; border-radius: var(--r-xs); background: #e6ebf2; }
.hm-course-bar i.is-free { background: var(--hm-blue); }
.hm-course-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-label); color: var(--hm-ink-3); }
.hm-course-meta span + span::before { content: "·"; margin-inline: 8px; }
.hm-course-go { font-weight: 500; font-size: var(--fs-body); color: var(--hm-blue); padding-top: 4px; }
.hm-course a:hover .hm-course-go { text-decoration: underline; text-underline-offset: 4px; }

/* home courses: one country course per card with its real ERP screen, the shared four-step chain said once, the professional programme beside */
.hm-cg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.hm-cg-h h3, .hm-pro-t { margin: 0; font: 500 var(--fs-title)/1.3 var(--f-hero); color: var(--hm-ink); }
.hm-cg-h b, .hm-pro-t b { font-weight: 500; color: var(--hm-ink-3); font-variant-numeric: tabular-nums; margin-inline-start: 4px; }
.hm-cg-h p { margin: 0; flex: 1 1 360px; font-size: var(--fs-body); line-height: 1.55; color: var(--hm-ink-2); }
.hm-chain { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.hm-chain li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; background: var(--hm-surface); border-radius: var(--r-m); font-size: var(--fs-label); line-height: 1.35; color: var(--hm-ink-2); overflow-wrap: anywhere; }
.hm-chain .hm-how-n { flex: none; width: 24px; height: 24px; font-size: var(--fs-label-s); }
.hm-courses.is-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-shots .hm-course a { padding: 0; gap: 0; }
.hm-course-img, .hm-pro-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hm-surface); border-bottom: 1px solid var(--hm-line); }
.hm-course-img, .hm-pro-img { position: relative; }
/* the ERP screen is read at its top-left corner (project, bill, first rows), not shrunk to an unreadable full window */
.hm-course-img img, .hm-pro-img img { position: absolute; inset-block-start: 0; left: 0; display: block; width: 175%; max-width: none; height: auto; transform-origin: left top; transition: transform 320ms var(--hm-ease); }
.hm-pro-img img { width: 130%; }
.hm-course a:hover .hm-course-img img, .hm-pro:hover .hm-pro-img img { transform: scale(1.03); }
.hm-course-b { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 16px; min-width: 0; }
.is-shots .hm-course-top { font-size: var(--fs-label-s); }
.is-shots .hm-course-t { font-size: var(--fs-title-s); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.is-shots .hm-course-meta { margin-top: auto; padding-top: 4px; font-size: var(--fs-label-s); }
.hm-course.is-all a { justify-content: center; align-items: center; gap: 8px; padding: 24px; min-height: 160px; background: var(--hm-surface); border-style: dashed; text-align: center; }
.hm-course.is-all .hm-c-alln { font: 500 var(--fs-title-s)/1.3 var(--f-hero); color: var(--hm-blue); }
.hm-course.is-all .hm-course-go { font-size: var(--fs-title); padding: 0; }
.hm-pro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin-top: 24px; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-r); color: var(--hm-ink); text-decoration: none; overflow: hidden; transition: box-shadow 220ms var(--hm-ease), border-color 220ms var(--hm-ease); }
.hm-pro:hover { border-color: var(--ds-line); box-shadow: var(--card-hover); }
.hm-pro-img { aspect-ratio: auto; min-height: 280px; border-bottom: 0; border-inline-end: 1px solid var(--hm-line); }
.hm-pro-b { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 32px); min-width: 0; }
.hm-pro-s { font-size: var(--fs-body); line-height: 1.55; color: var(--hm-ink-2); }
.hm-pro-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-pro-areas span { padding: 4px 12px; border: 1px solid var(--hm-line); border-radius: var(--r-full); font-size: var(--fs-label-s); line-height: 1.4; color: var(--hm-ink-2); overflow-wrap: anywhere; }
.hm-pro .hm-course-go { margin-top: auto; }
.hm-pro:hover .hm-course-go { text-decoration: underline; text-underline-offset: 4px; }
.hm-tag { font: 500 var(--fs-label-s)/1 var(--f-body); padding: 4px 8px; border-radius: var(--r-full); }
.hm-tag.is-pro { color: var(--hm-blue-d); background: rgba(26, 102, 232, 0.08); }
@media (max-width: 1099px) {
  .hm-courses.is-shots, .hm-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .hm-pro { grid-template-columns: minmax(0, 1fr); }
  .hm-pro-img { aspect-ratio: 16 / 10; min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--hm-line); }
}
@media (max-width: 599px) {
  .hm-chain { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hm-chain li { padding: 8px 12px; }
  .hm-courses.is-shots { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .is-shots .hm-course a { flex-direction: row; }
  .is-shots .hm-course-img { flex: none; width: 112px; aspect-ratio: auto; min-height: 88px; border-bottom: 0; border-inline-end: 1px solid var(--hm-line); }
  .is-shots .hm-course-b { padding: 12px; gap: 4px; }
  .is-shots .hm-course-t { -webkit-line-clamp: 3; }
  .hm-course.is-all a { min-height: 0; flex-direction: row; padding: 16px; }
}

.hm-lib:focus { outline: none; }
.hm-lib .vsearch { margin: 0; max-width: 720px; border-radius: var(--r-full); border: 1px solid var(--hm-line-2); box-shadow: var(--hm-e1); transition: box-shadow 200ms var(--hm-ease); }
.hm-lib .vsearch:hover { box-shadow: var(--hm-e2); }
.hm-lib .vsearch:focus-within { box-shadow: var(--hm-e2), 0 0 0 3px rgba(26, 102, 232, 0.2); border-color: var(--hm-blue); }
.hm-lib .vasks { justify-content: flex-start; margin: 16px 0 0; padding: 0; gap: 8px; }
.hm .vask { border-radius: var(--r-full); background: #fff; border-color: var(--hm-line-2); color: var(--hm-ink-2); font-weight: 500; transition: background 160ms, border-color 160ms; }
.hm .vask:hover { border-color: var(--hm-blue); background: rgba(26, 102, 232, 0.06); color: var(--hm-blue-d); }

.hm :is(.vfeat, .vposter, .vpath-card, .vtopic, .vcard .vthumb, .vthumb img) { border-radius: var(--r-m); }
.hm .vbtn.is-big { border-radius: var(--r-full); }
.hm .vfeat-kick { font: 500 var(--fs-label)/1 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--hm-blue); background: transparent; padding: 0; }
.hm .vsec h2 { font-weight: 500; letter-spacing: -0.01em; }

/* ---------- before you start, task index, path, series, countries, teams ---------- */
.hm-first { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 24px 0 0; font-size: var(--fs-body-s); color: var(--hm-ink-3); max-width: 52ch; }
.hm-first a { display: inline-flex; align-items: center; gap: 8px; color: var(--hm-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--hm-line-2); text-underline-offset: 4px; }
.hm-first a:hover { color: var(--hm-blue); text-decoration-color: currentColor; }
.hm-first-t { font: 500 var(--fs-label-s)/1 var(--f-body); color: var(--hm-ink-3); background: var(--hm-surface); border-radius: var(--r-full); padding: 4px 8px; }

.hm-sec-tight { padding-top: 40px; }
.hm-sub-h { margin: 0 0 8px; font: 500 var(--fs-title-s)/1.4 var(--f-hero); color: var(--hm-ink); }
.hm-index { list-style: none; margin: 0; padding: 0; columns: 3 240px; column-gap: 32px; }
.hm-index li { break-inside: avoid; }
.hm-index a { display: flex; align-items: baseline; gap: 8px; padding: 12px 8px; margin-inline: -8px; border-radius: var(--hm-r-s); color: var(--hm-ink); text-decoration: none; font-size: var(--fs-body); transition: background 160ms; }
.hm-index i { flex: 1 1 auto; border-bottom: 1px dotted var(--hm-line-2); transform: translateY(-4px); min-width: 12px; }
.hm-index b { font: 500 var(--fs-body-s)/1 var(--f-body); color: var(--hm-ink-3); }
.hm-index a:hover { background: var(--hm-surface); color: var(--hm-blue); }
.hm-index a:hover b { color: var(--hm-blue); }

.hm-path { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); }
.hm-path-pick { display: grid; gap: 16px; align-content: start; }
.hm-path-pick label { display: grid; gap: 8px; font: 500 var(--fs-body-s)/1.3 var(--f-body); color: var(--hm-ink-2); }
.hm-path-pick select { font: 400 var(--fs-body-l)/1.3 var(--f-body); color: var(--hm-ink); padding: 12px 16px; border: 1px solid var(--hm-line-2); border-radius: var(--r-m); background: #fff; width: 100%; transition: border-color 160ms; }
.hm-path-pick select:hover { border-color: var(--hm-ink-3); }
.hm-path-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-path-list a { display: grid; gap: 4px; color: var(--hm-ink); text-decoration: none; }
.hm-path-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hm-surface); border-radius: var(--r-m); margin-bottom: 8px; transition: box-shadow 220ms var(--hm-ease), transform 220ms var(--hm-ease); }
.hm-path-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-path-list a:hover .hm-path-thumb { box-shadow: var(--hm-e2); transform: translateY(-2px); }
.hm-path-n { display: none; }
.hm-path-t { font: 500 var(--fs-body-l)/1.35 var(--f-hero); }
.hm-path-m { font-size: var(--fs-label); color: var(--hm-ink-3); }
.hm-path-list a:hover .hm-path-t { color: var(--hm-blue); }
.hm-path-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 24px 0 0; }
.hm-path-course { display: grid; gap: 2px; text-decoration: none; color: var(--hm-ink); padding: 12px 16px; background: var(--hm-surface); border-radius: var(--r-m); }
.hm-path-course span { font: 400 var(--fs-label)/1.3 var(--f-body); color: var(--hm-ink-3); }
.hm-path-course b { font-weight: 500; }
.hm-path-course:hover b { color: var(--hm-blue); }
.hm-path-foot .hm-more { margin-inline-start: auto; }

.hm-series { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.hm-series .hm-course a:has(.hm-series-art) { padding-top: 0; }
.hm-series-art { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin: 0 -24px 4px; background: var(--hm-surface); }
.hm-series-art img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; transition: transform 400ms var(--hm-ease); }
.hm-series .hm-course a:hover .hm-series-art img { transform: scale(1.03); }
.hm-series .hm-course-t { font-size: var(--fs-title-s); }
.hm-series .hm-course-s { font-size: var(--fs-label); flex: 0 0 auto; }
.hm-series .hm-course-meta { margin-top: auto; }

.hm-cc { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.hm-cc a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 16px 16px; border-radius: var(--r-m); }
.hm-cc img, .hm-cc-any { width: 22px; height: 15px; grid-row: span 2; }
.hm-cc-any { display: block; border-radius: var(--r-xs); background: linear-gradient(135deg, var(--ds-primary), var(--ds-ink)); opacity: 0.5; }
.hm-cc-name { font-weight: 500; font-size: var(--fs-body); }
.hm-cc-n { font-size: var(--fs-label); color: var(--hm-ink-3); }
.hm-cc-n b { font-weight: 500; color: var(--hm-ink-2); }
.hm-cc-tag { color: var(--hm-blue); font-weight: 500; }

.hm-teams { margin-top: clamp(64px, 7vw, 104px); }
.hm-teams-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 20px 24px; background: var(--hm-surface); border-radius: var(--hm-r); font-size: var(--fs-body-l); color: var(--hm-ink-2); }
body:has(.hm) .hm-teams .wrap.hm-teams-row { max-width: calc(1240px - 2 * clamp(16px, 3vw, 32px)); width: calc(100% - 2 * clamp(16px, 3vw, 32px)); padding: 20px 24px; }
.hm-teams a { font-weight: 500; color: var(--hm-blue); text-underline-offset: 4px; }

/* closer: a rounded navy panel inside the grid, not a full-bleed band */
.hm .vcta { margin: clamp(48px, 5vw, 72px) auto clamp(48px, 5vw, 72px); width: calc(100% - 2 * clamp(16px, 3vw, 32px)); max-width: calc(1240px - 2 * clamp(16px, 3vw, 32px)); border-radius: var(--r-xl); background: radial-gradient(600px 300px at 85% 0%, rgba(26, 102, 232, 0.45), transparent 70%), var(--hm-ink); padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px); overflow: hidden; }
.hm .vcta .wrap { padding-inline: 0; max-width: none; }
.hm .vcta h2 { font-weight: 500; letter-spacing: -0.01em; font-size: var(--fs-h2); line-height: 1.2; max-width: 20ch; }
.hm .vcta p { color: rgba(255, 255, 255, 0.75); }
.hm .vcta .vbtn { border-radius: var(--r-full); box-shadow: none; font-weight: 500; transition: background 200ms, transform 120ms; }
.hm .vcta .vbtn:active { transform: scale(0.98); }
.hm .vbtn.is-light { background: #fff; color: var(--hm-ink); }
.hm .vbtn.is-light:hover { background: var(--ds-primary-tonal); }
.hm .vbtn.is-yt { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
.hm .vbtn.is-yt:hover { background: rgba(255, 255, 255, 0.1); }

/* globe */
.hm .home-world { background: #fff; padding-top: var(--section); padding-bottom: 0; }
.hm .home-world .sec-head { justify-items: start; text-align: start; max-width: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px clamp(32px, 4vw, 64px); align-items: end; }
.hm .home-world .sec-head h2 { margin: 0; font: 500 var(--fs-h2)/1.2 var(--f-hero); letter-spacing: -0.01em; color: var(--hm-ink); }
.hm .home-world .sec-head p { margin: 0; font-size: var(--fs-body-l); line-height: 1.6; color: var(--hm-ink-2); }
.hm .country-panel { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-r); box-shadow: var(--hm-e2); }
.hm .cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm .cp-stats div { border-radius: var(--r-m); background: var(--hm-surface); border: 0; }
.hm .country-panel .btn { border-radius: var(--r-full); background: var(--hm-blue); box-shadow: none; }
.hm .country-panel .btn:hover { background: var(--hm-blue-d); }
.hm .country-panel .chip, .hm .hw-cc { border-radius: var(--r-full); }
.hm-fact dd, .hm-ck-v { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .hm-fact dd { text-align: right; }


@media (max-width: 1100px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-title { max-width: 20ch; }
  .hm-shot { margin-inline-end: 20px; max-width: 760px; }
  .hm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-fact:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .hm-fact:nth-child(n + 3) { border-top: 1px solid var(--hm-line); margin-top: 8px; }
  .hm-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hm-path { grid-template-columns: minmax(0, 1fr); }
  .hm-path-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-path-list a { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: start; }
  .hm-path-thumb { grid-row: 1 / 3; margin: 0; }
}
@media (max-width: 760px) {
  .hm-head, .hm .home-world .sec-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
  .hm-more { grid-column: 1; }
  .hm-shot { margin-inline-end: 0; padding-bottom: 0; }
  /* the whole estimate is unreadable at phone width: show the first rows of the bill, nothing else */
  .hm-frame-in { border-radius: var(--r-l); }
  .hm-ck { position: relative; inset: auto; width: auto; margin: -32px 8px 0; }
  .hm-shot figcaption { max-width: none; }
  .hm-ctas > * { flex: 1 1 100%; justify-content: center; }
  .hm .vcta { border-radius: var(--r-xl); }
}
@media (max-width: 480px) {
  .hm-title { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.15; }
  .hm-fact { padding: 16px 12px 0 0; }
  .hm-fact + .hm-fact { padding-inline-start: 12px; }
  .hm-fact dd { font-size: var(--fs-headline); }
  .hm-course a { padding: 20px; }
  .hm-series-art { margin-inline: -20px; }
  .hm-how li { padding: 20px; }
  .hm-dim::before { margin-inline-end: 32px; }
}

/* ---------- header on narrow screens: one Menu button instead of a sideways-scrolling row ---------- */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  body:not(.is-classic) .topbar-row { flex-wrap: nowrap; gap: 8px; min-height: 56px; padding-top: 0; position: static; }
  body:not(.is-classic) .topbar { position: sticky; }
  body:not(.is-classic) .wordmark { min-width: 0; flex: 1 1 auto; }
  body:not(.is-classic) .wordmark span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not(.is-classic) .topbar-end { margin-inline-start: 0; gap: 8px; flex: none; }
  body:not(.is-classic) .nav-toggle:not([hidden]) { display: inline-flex; order: 2; align-items: center; gap: 8px; flex: none; font-family: inherit; font-size: var(--fs-label); line-height: 1; padding: 8px 12px; border: 1px solid var(--rule-2, rgba(11, 27, 54, 0.2)); border-radius: var(--r-full); background: #fff; color: var(--ink, var(--ds-ink)); cursor: pointer; }
  body:not(.is-classic) .nav-toggle::before { content: ""; width: 14px; height: 9px; border-block: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
  body:not(.is-classic) .nav { display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 60; width: auto; margin: 0; padding: 4px 24px 16px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid rgba(11, 27, 54, 0.14); box-shadow: var(--e2); -webkit-mask-image: none; mask-image: none; overflow: visible; }
  body.nav-open:not(.is-classic) .nav { display: flex; }
  body:not(.is-classic) .nav a { padding: 12px 4px; border-radius: 0; border-bottom: 1px solid rgba(11, 27, 54, 0.08); font-size: var(--fs-body-l); background: none; }
  body:not(.is-classic) .nav a[aria-current] { color: var(--accent); background: none; }
  body:not(.is-classic) .nav .erp-long { display: inline; }
  body:not(.is-classic) .topbar-end { order: 3; }
}
@media (max-width: 480px) {
  body:not(.is-classic) .wordmark span { display: grid; white-space: normal; font-size: var(--fs-label-s); line-height: 1.12; letter-spacing: -0.01em; }
  body:not(.is-classic) .wordmark span b { display: block; }
}
@media (max-width: 420px) {
  body:not(.is-classic) .wm-logo { width: 26px; height: 26px; }
  body:not(.is-classic) .wordmark { font-size: var(--fs-body-s); gap: 8px; }
  body:not(.is-classic) .acct-link { padding: 8px 8px; }
  body:not(.is-classic) .langsel summary { padding-inline: 8px; gap: 4px; }
  body:not(.is-classic) .langsel summary > span { display: none; }
  body:not(.is-classic) .wordmark span { overflow: visible; }
}

/* ---------- region note: one quiet line ---------- */
.lang-note { background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); font-size: var(--fs-label); }
.lang-note-row { padding-block: 2px; gap: 4px 12px; }
.lang-note-x { min-width: 32px; min-height: 32px; font-size: var(--fs-title-s); border-radius: var(--r-xs); }
@media (max-width: 600px) {
  .lang-note-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}



/* ---------- how a course works: the four steps read down the left, their screen fills the stage beside them.
   All four texts stay on the page; only the picture changes, so the section works with the script off and the
   right half is never empty. Below 900px the stage goes away and each step keeps its own screen. ---------- */
.hm-flow { --fl-col: 38%; --fl-gap: clamp(32px, 4vw, 64px); }
.hm-flow-grid { position: relative; display: grid; grid-template-columns: minmax(0, var(--fl-col)) minmax(0, 1fr); column-gap: var(--fl-gap); align-items: start; }
.hm-flow-steps { grid-column: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; --rail-x: 35px; }
[dir="rtl"] .hm-flow-steps { --rail-x: calc(100% - 37px); }
.hm-fs { position: static; max-width: none; padding: 16px 20px; border-radius: var(--r-m); }
.hm-fs-h { margin: 0; }
.hm-fs-b { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 0; background: none; border: 0; text-align: start; color: var(--hm-ink-2); font: 500 var(--fs-title)/1.3 var(--f-hero); letter-spacing: -0.01em; cursor: pointer; transition: color var(--dur-s) var(--ease-out); }
.hm-fs-b > span:last-child { text-wrap: balance; }
.hm-fs.is-on .hm-fs-b { color: var(--hm-ink); }
.hm-fs .hm-how-n { flex: none; background: var(--ds-surface-2); box-shadow: none; color: var(--hm-ink-3); transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
.hm-fs.is-on .hm-how-n { background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: 0 0 0 4px var(--ds-primary-tonal); }
.hm-fs-p { margin: 10px 0 0; padding-inline-start: 46px; max-width: none; font-size: var(--fs-body); line-height: 1.6; color: var(--hm-ink-2); }
.hm-fs-more { margin: 10px 0 0; margin-inline-start: 46px; }
.hm-flow-stage { grid-column: 2; grid-row: 1; align-self: start; aspect-ratio: 16 / 10; margin-bottom: 56px; }
.hm-fs-fig { position: absolute; top: 0; inset-inline-end: 0; width: calc(100% - var(--fl-col) - var(--fl-gap)); margin: 0; }
.hm-fs-fig picture { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--hm-line); border-radius: var(--r-l); box-shadow: var(--hm-e3); }
.hm-fs-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hm-fs-fig.is-cert picture { background: var(--hm-surface); }
.hm-fs-fig.is-cert img { object-fit: contain; padding: 16px; }
.hm-fs-fig figcaption { margin-top: 14px; font-size: var(--fs-label); line-height: 1.5; color: var(--hm-ink-3); }
@media (min-width: 901px) {
  /* Four steps, one rail. The active step is marked by its number - filled, with a tonal ring - and by the
     rail being drawn up to it, not by a panel behind the text: a background block turns each step into its
     own card and the 1-2-3-4 reading is exactly what has to survive. The rail is a background line at the
     number's centre, so no step needs to be positioned (the stage figure is absolute against the grid). */
  .hm-fs { background-repeat: no-repeat; background-origin: border-box; background-image: linear-gradient(var(--ds-primary) 0 0); background-size: 2px 100%; background-position: var(--rail-x) 0; }
  .hm-fs:first-child { background-size: 2px calc(100% - 32px); background-position: var(--rail-x) 32px; }
  .hm-fs.is-on { background-image: linear-gradient(var(--ds-primary) 0 0), linear-gradient(var(--ds-line-2) 0 0); background-size: 2px 32px, 2px calc(100% - 32px); background-position: var(--rail-x) 0, var(--rail-x) 32px; }
  .hm-fs.is-on:first-child { background-image: linear-gradient(var(--ds-line-2) 0 0); background-size: 2px calc(100% - 32px); background-position: var(--rail-x) 32px; }
  .hm-fs.is-on ~ .hm-fs { background-image: linear-gradient(var(--ds-line-2) 0 0); background-size: 2px 100%; background-position: var(--rail-x) 0; }
  .hm-fs:last-child { background-size: 2px 32px; background-position: var(--rail-x) 0; }
  .hm-fs-b:hover { color: var(--hm-blue); }
  .hm-fs-fig { opacity: 0; visibility: hidden; transition: opacity var(--dur-l) var(--ease-out), visibility var(--dur-l); }
  .hm-fs.is-on .hm-fs-fig { opacity: 1; visibility: visible; }
}
@media (max-width: 900px) {
  .hm-flow-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-flow-stage { display: none; }
  .hm-fs { padding: 0; }
  .hm-fs + .hm-fs { margin-top: 36px; }
  .hm-fs-b { cursor: default; }
  .hm-fs-p, .hm-fs-more { padding-inline-start: 0; margin-inline-start: 0; }
  .hm-fs-fig { position: static; width: auto; margin-top: 16px; }
}
.hm-first-t { font-variant-numeric: tabular-nums; }

/* ---------- processes by stage ---------- */
.hm-proc { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 24px 32px; }
.hm-proc h3 { margin: 0 0 8px; font: 500 var(--fs-label)/1.4 var(--f-body); color: var(--hm-ink-3); }
.hm-proc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hm-proc a { display: block; padding: 8px 0; font-size: var(--fs-body); line-height: 1.4; color: var(--hm-ink); text-decoration: none; }
.hm-proc a:hover { color: var(--hm-blue); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- videos and running the ERP: two plain links ---------- */
.hm-go { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hm-go-card { position: relative; display: grid; align-content: start; gap: 4px; padding: 20px 56px 20px 24px; border: var(--card-border); border-radius: var(--card-r); color: inherit; text-decoration: none; transition: border-color 160ms, box-shadow 160ms; }
[dir="rtl"] .hm-go-card { padding: 20px 24px 20px 56px; }
.hm-go-card:hover { border-color: var(--ds-line); box-shadow: var(--card-hover); }
.hm-go-card b { font: 500 var(--fs-title-s)/1.3 var(--f-hero); color: var(--hm-ink); }
.hm-go-card span { font-size: var(--fs-body-s); line-height: 1.5; color: var(--hm-ink-2); }
.hm-go-card .hm-run-v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-weight: 500; color: var(--hm-ink); }
.hm-go-card i { position: absolute; inset-inline-end: 24px; top: 50%; translate: 0 -50%; font-style: normal; color: var(--hm-blue); }
[dir="rtl"] .hm-go-card i { transform: scaleX(-1); }

/* ---------- closing call ---------- */
.hm-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: clamp(64px, 7vw, 104px); padding: clamp(32px, 4vw, 48px); background: var(--hm-surface); border-radius: var(--r-xl); }
.hm-end h2 { margin: 0 0 8px; font: 500 var(--fs-h2)/1.2 var(--f-hero); color: var(--hm-ink); }
.hm-end p { margin: 0; max-width: 56ch; font-size: var(--fs-body-l); line-height: 1.6; color: var(--hm-ink-2); }
.hm-who { margin: 12px 0 0; max-width: 52ch; font-size: var(--fs-body); line-height: 1.55; color: var(--hm-ink-2); }
.hm-trust h2, .hm-faq h2 { margin: 0 0 12px; font: 500 var(--fs-h2)/1.2 var(--f-hero); color: var(--hm-ink); }

/* ---------- who builds it ---------- */
.hm-trust { max-width: 760px; }
.hm-trust p { margin: 0; font-size: var(--fs-body-l); line-height: 1.6; color: var(--hm-ink-2); }
.hm-trust-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px !important; }
.hm-trust-links a { font-weight: 500; color: var(--hm-blue); text-underline-offset: 4px; }

/* ---------- FAQ ---------- */
.hm-faq { max-width: 760px; }
.hm-faq details { border-bottom: 1px solid var(--hm-line); }
.hm-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; font: 500 var(--fs-title-s)/1.4 var(--f-hero); color: var(--hm-ink); }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: "+"; flex: none; font: 400 var(--fs-title-l)/1 var(--f-body); color: var(--hm-ink-3); }
.hm-faq details[open] summary::after { content: "−"; }
.hm-faq details p a { color: var(--hm-blue); font-weight: 500; text-underline-offset: 4px; }
.hm-faq details p { margin: 0 0 16px; max-width: 68ch; font-size: var(--fs-body); line-height: 1.6; color: var(--hm-ink-2); }
@media (max-width: 760px) {
  .hm-go { grid-template-columns: minmax(0, 1fr); }
  /* a whole 1440 screen is unreadable at phone width: zoom into the part the caption names */
  .hm-fs-fig:is(.is-acct, .is-task, .is-check) picture { aspect-ratio: 4 / 3; border-radius: var(--r-m); box-shadow: var(--hm-e2); direction: ltr; }
  .hm-fs-fig:is(.is-acct, .is-task, .is-check) img { width: auto; max-width: none; height: auto; object-fit: fill; }
  .hm-fs-fig.is-acct img { width: 190%; margin: -9% 0 0 -32%; }
  .hm-fs-fig.is-task img { width: 280%; margin: -8% 0 0 -178%; }
  .hm-fs-fig.is-check img { width: 280%; margin: -100% 0 0 -178%; }
  .hm-fs-fig.is-cert picture { aspect-ratio: 1200 / 849; }
  .hm-fs-fig.is-cert img { padding: 0; }
  .hm-end { padding: 24px; border-radius: var(--r-xl); }
  .hm-end .hm-btn { flex: 1 1 100%; justify-content: center; }
}