/* =========================================================================
   SUPER DEAL MAKER -- THE COMPONENTS (Step 105, rule C6). Defined once here;
   every screen uses them. This file holds NO raw values: every colour, size,
   space, radius and shadow is a name from sdm_tokens.css.

   Loaded AFTER Bootstrap, so where the two disagree, this wins. Bootstrap stays
   for its grid and its dropdown behaviour; its colours are overridden below.

   THE PAGE, THEN EACH COMPONENT C6 NAMES, IN ITS ORDER:
     page header (H1 band) · section header (H2 band) · card · table · form
     field · help text · error · button (primary, secondary, danger) · link ·
     badge · empty state · How this works panel · progress meter · upload row
   ========================================================================= */

/* ---- THE PAGE ---------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-white);
}
/* C4: a line of reading text is never longer than the measure. */
p, li, dd, blockquote { max-width: var(--measure); }
/* C7: nothing makes the page scroll sideways; media shrink to fit. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* ---- THE PRINTED PAGE (Step 106 Task 14.5) ------------------------------
   The business plan and both readiness reports are laid out by WeasyPrint
   from pages that inline this sheet. Measured (step106_typography.py), the
   plan set its own page -- A4, 5mm -- and the two reports set none, so they
   fell to WeasyPrint's default 19.8mm margins and a 170mm content width
   against the plan's 200mm; and NONE of the three justified its body text
   (0% of body characters). THE CAUSE is that the page and the alignment
   lived in each document's own <style>, not here. They live here now:

     * ONE page for every document that does not set its own (a document's
       own @page comes later and still wins): A4, 34pt -- the side margin of
       the document base (myapp/document_base.html) and the one the PDF
       geometry check holds every document to. NOT the plan's old 5mm: moved
       onto the reports first, 5mm put their text 14pt from the paper's edge
       and the geometry check failed 24 lines -- the plan had the same fault,
       unmeasured, and now takes this page too. Raw `34pt`, not a token:
       `@page` does not inherit from :root, so var() cannot resolve in it;
     * body text justified and hyphenated in print. Hyphenation needs the
       document's language: every document's <html> carries lang.
   On screen nothing changes: a justified line on a 375px phone opens rivers
   between words, and the reader this platform is built for reads it worse. */
@page { size: A4 portrait; margin: 34pt; }
@media print {
  p, li { text-align: justify; hyphens: auto; }
}

/* ---- HEADINGS (R33) ----------------------------------------------------
   H1: brand text on the ink band. H2: ink text on the brand band. H3 and
   below: plain ink, no band. Centred and bold for the two bands. */
/* THE BAND IS THE ONE STEP 91 SETTLED, AND THE OWNER LOOKED AT IT: uppercase,
   letter-spaced, centred, bold. R33 names its two colourways; the size steps
   down one from H1 to H2 so the two are told apart by more than colour.

   `!important` ON THE BAND'S LOOK, AND WHY. R33 is absolute. Pages written
   before Step 105 style their own headings -- an inline dark colour meant for
   a white page, a `.page-title` class with a gradient -- and a page class
   outranks this element rule. The rendered contrast check (Task 3) caught
   the result: dark text on the ink band (1.00:1) and cyan text on the cyan
   band. So the colours, background, type and alignment of a heading band are
   the system's, and nothing a page says can repaint them. Margins stay the
   page's: where a heading sits is layout, not look.
   SDM 05: NOT on a page drawn from the mock-ups (body.sdm-plain: the public
   pages, the phone screens, the staff shell) -- there the mock-up's own type
   is the rule, and the band would fight it. */
body:not(.sdm-plain) h1, .page-band, .brand-band {
  font-family: var(--font-family) !important;
  font-size: var(--fs-3) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-body) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  color: var(--c-brand) !important;
  background-color: var(--c-ink) !important;
  background-image: none !important;
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  border-radius: var(--radius-sm);
  max-width: none;
}
body:not(.sdm-plain) h1 a, .page-band a, .brand-band a { color: var(--c-brand) !important; }

body:not(.sdm-plain) h2, .section-band {
  font-family: var(--font-family) !important;
  font-size: var(--fs-2) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-body) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  color: var(--c-ink) !important;
  background-color: var(--c-brand) !important;
  background-image: none !important;
  padding: var(--sp-2) var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-3);
  border-radius: var(--radius-sm);
  max-width: none;
}
body:not(.sdm-plain) h2 a, .section-band a { color: var(--c-ink) !important; }

h3, h4, h5, h6 {
  font-family: var(--font-family);
  /* INHERIT, not ink: a plain heading takes the text colour of what it sits
     on -- ink on the page (from body), white in a dark panel. An explicit ink
     here put "Quick Actions" ink-on-ink on the investor dashboard (Step 105
     Task 3, the rendered probe). */
  color: inherit;
  background-color: transparent;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  margin: var(--sp-5) 0 var(--sp-2);
  padding: 0;
  text-align: left;
}
h3 { font-size: var(--fs-3); }
h4, h5, h6 { font-size: var(--fs-2); }

/* ---- CARD -------------------------------------------------------------- */
.sdm-card {
  background-color: var(--c-white);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
/* Bootstrap's `.card` (1,035 uses) takes the system's frame but keeps its own
   padding: its `.card-body` already pads, and padding both would double it. */
.card {
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card-muted { background-color: var(--c-grey-page); }

/* ---- TABLE (C7: scrolls inside its own box on a phone) ----------------- */
table { border-collapse: collapse; width: 100%; }
th, td {
  border: var(--border);
  padding: var(--sp-2) var(--sp-3);
  vertical-align: top;
  text-align: left;
}
th, thead td { background-color: var(--c-grey-page); color: var(--c-ink); font-weight: var(--fw-medium); }
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--sp-4); }
.sdm-flag { color: var(--c-bad); font-weight: var(--fw-medium); } /* PRODREADY: "Add the meeting link" on staff pages */

/* ---- FORM FIELD, HELP TEXT, ERROR (C7: one column on a phone) ---------- */
label { display: block; font-weight: var(--fw-medium); margin: var(--sp-3) 0 var(--sp-1); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=url], input[type=search],
select, textarea {
  font-family: var(--font-family);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-white);
  border: var(--border);
  border-radius: var(--radius-sm);
  min-height: var(--target);
  padding: var(--sp-2) var(--sp-3);
  width: 100%;
  max-width: 100%;
}
textarea { min-height: calc(var(--target) * 2); }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; margin-right: var(--sp-2); }
.help-text, .helptext { display: block; font-size: var(--fs-1); color: var(--c-grey-muted); margin: var(--sp-1) 0 var(--sp-3); }
.error, .errorlist, .field-error {
  color: var(--c-bad);
  font-weight: var(--fw-medium);
  margin: var(--sp-1) 0 var(--sp-3);
  padding: 0;
  list-style: none;
}
.has-error input, .has-error select, .has-error textarea { border: 2px solid var(--c-bad); }

/* ---- BUTTON: primary, secondary, danger (R33: brand, ink text, NOT bold) - */
.btn-primary, .brand-go, .sdm-button, button, input[type=submit], input[type=button],
.cta-button, .submit-button {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  min-height: var(--target);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  color: var(--c-ink);
  background-color: var(--c-brand);
  background-image: none;
  border: var(--border-width) solid var(--c-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.btn-primary:link, .btn-primary:visited, .brand-go:link, .brand-go:visited { color: var(--c-ink); }
.btn-secondary, .brand-leave {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  text-align: center;
  text-decoration: none;
  min-height: var(--target);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  color: var(--c-ink);
  background-color: var(--c-white);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.btn-secondary:link, .btn-secondary:visited, .brand-leave:link, .brand-leave:visited { color: var(--c-ink); }
.btn-danger {
  color: var(--c-white);
  background-color: var(--c-bad);
  border-color: var(--c-bad);
}
.btn-danger:link, .btn-danger:visited { color: var(--c-white); }

/* ---- STEP 108 TASK 6: WHERE A BUTTON SITS, AND WHERE ITS LABEL SITS -------- */
/* 6.4. THE LABEL IS CENTRED ACROSS AND DOWN. An <a> or <button> drawn as a
   button is a flex box that centres its words; `gap` stands in for the space
   a flex box drops between a word and a <span> beside it. An <input>'s label
   is drawn by the browser, centred down already; text-align centres it across. */
a.btn-primary, a.brand-go, a.sdm-button, a.btn-secondary, a.brand-leave, a.btn-danger,
a.cta-button, a.submit-button, button.btn-primary, button.btn-secondary, button.btn-danger,
button.sdm-button, button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25em;
  text-align: center;
  vertical-align: middle;
}
input[type=submit], input[type=button], input[type=reset] { text-align: center; }

/* 6.2 / 6.3. A ROW OF PAGE- OR CARD-LEVEL ACTIONS, CENTRED. What a table that
   held nothing but a button became (step108_buttons_markup.py), and any line
   of buttons a page wants centred. */
.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-4) 0;
  text-align: center;
}
.action-row > *, .action-row form > * { margin-left: 0; margin-right: 0; }

/* 6.3. A BLOCK THAT HOLDS NOTHING BUT BUTTONS centres them -- in the page, or
   in the card it sits in -- and a form that is only a button centres it.
   Blocks with words in them are not touched (an action in a list row or a
   sentence stays where it is), nor is a row of a data table: `td` is not in
   the list. `:has()` -- where a browser lacks it, the buttons simply stay
   where they were. */
:is(p, div, section, li, footer.card-footer):has(> :is(a.btn-primary, a.btn-secondary, a.brand-go, a.brand-leave, a.btn-danger, button, input[type=submit])):not(:has(> :not(a.btn-primary, a.btn-secondary, a.brand-go, a.brand-leave, a.btn-danger, button, input[type=submit], input[type=hidden], br, script, style))):not(.dd-nav, .dd-nav-steps, .area-head, .navbar, nav) {
  text-align: center;
}
form:not(:has(:not(a.btn-primary, a.btn-secondary, a.brand-go, a.brand-leave, a.btn-danger, button, input[type=submit], input[type=hidden], br, span))) {
  text-align: center;
}
/* BOOTSTRAP'S COLOUR UTILITIES, still in 42 places (15 bg-*, 27 text-*), each onto the palette
   colour it means. Bootstrap's own: its blue as text 3.98:1, its green as text
   3.13:1, white on its blue 3.98:1 -- all fail C3. The primary
   colour is the brand, which is never text (R33), so text-primary is ink and
   bg-primary carries ink text. Bootstrap marks these !important; so do we,
   and this sheet loads after it. Step 105 Task 3.3. */
.bg-primary, .bg-primary.text-white { background-color: var(--c-brand) !important; color: var(--c-ink) !important; }
.bg-success { background-color: var(--c-ok) !important; }
.bg-warning, .bg-warning.text-white { background-color: var(--c-warn) !important; color: var(--c-ink) !important; }
.bg-danger { background-color: var(--c-bad) !important; }
.bg-secondary { background-color: var(--c-grey-muted) !important; }
.bg-dark { background-color: var(--c-ink) !important; }
.text-primary, .text-warning { color: var(--c-ink) !important; }
.text-success { color: var(--c-ok) !important; }
.text-danger { color: var(--c-bad) !important; }
.text-muted { color: var(--c-grey-muted) !important; }
/* TRAFFIC LIGHT TONES (law 4), from `|score_tone`: ready / almost / not-yet.
   As TEXT the almost tone is ink -- yellow text on white is unreadable --
   and the light is carried by the bar or badge beside it. As a FILL, all
   three colours. Step 105 Task 3.3. */
.tone-text-ready { color: var(--c-ok) !important; }
.tone-text-almost { color: var(--c-ink) !important; }
.tone-text-not-yet { color: var(--c-bad) !important; }
.tone-fill-ready { background-color: var(--c-ok) !important; }
.tone-fill-almost { background-color: var(--c-warn) !important; }
.tone-fill-not-yet { background-color: var(--c-bad) !important; }
/* A READINESS BAND IN A FUNDER'S TABLE, from `{% band_tone %}` /
   `{% reader_band_tone %}`: a tone NAME, never a colour computed in a tag.
   Dark text on every fill. Step 105 Task 9. */
.band-cell { padding: var(--sp-1) var(--sp-2); text-align: center;
             font-weight: var(--fw-bold); color: var(--c-ink); }
.band-cell a { color: var(--c-ink); }
.band-fill-excellent { background-color: var(--c-band-excellent); }
.band-fill-good { background-color: var(--c-band-good); }
.band-fill-average { background-color: var(--c-band-average); }
.band-fill-below-average { background-color: var(--c-band-below-average); }
.band-fill-poor { background-color: var(--c-band-poor); }
.band-fill-unverified { background-color: var(--c-band-unverified); }
/* ---- A PUBLIC PAGE: one readable column, a lead line (Step 105 Task 4) --- */
.sdm-page { max-width: 820px; margin: 0 auto; padding: var(--sp-4); }
.lead { font-size: var(--fs-3); line-height: var(--lh-body); }
.sdm-list { padding-left: var(--sp-5); }
/* Cards side by side where there is room, one column on a phone (C7). */
.sdm-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.sdm-grid > * { flex: 1 1 220px; margin: 0; }
.sdm-list li { margin: 0 0 var(--sp-2); }

/* ---- CLAUSES: numbered legal text, 1. and 1.1. (the privacy policy) -----
   The numbers were drawn by the page's own counters; they are the system's
   now, so the numbers a person reads did not change (Step 105 Task 4). */
.clauses { counter-reset: clause; }
.clauses h2 { counter-reset: subclause; text-align: left !important; }
.clauses h2::before { counter-increment: clause; content: counter(clause) ". "; }
.clauses h3::before { counter-increment: subclause; content: counter(clause) "." counter(subclause) ". "; }

/* ---- PATH STEP: one row of the guided road (CLAUDE.md s13) --------------
   Now: the one to do, framed. Done: ticked. Skipped: can still be done.
   Locked: VISIBLE BUT GREYED, with the one line that unlocks it. The mark
   before each is text, not colour alone. */
.path-step {
  display: block;
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-2);
  background-color: var(--c-white);
  color: var(--c-ink);
}
.path-step--now { border: var(--border-strong); font-weight: var(--fw-medium); }
.path-step--done { background-color: var(--c-grey-page); }
.path-step--locked { background-color: var(--c-grey-page); color: var(--c-grey-muted); }
.path-step .path-why { display: block; font-size: var(--fs-1); color: var(--c-grey-muted); margin-top: var(--sp-1); }
.path-step .path-mark { display: inline-block; min-width: 1.5em; font-weight: var(--fw-bold); }

/* TEXT BUTTON: a button that reads as a link -- the "Not sure" answer on a
   one-question screen (law 2). Ink and underlined like every link (T71),
   still a 48px target (law 8). Added in Step 105 Task 3.3 for
   training/screens/ask.html, whose blue-link button had no component. */
button.sdm-text-button, .sdm-text-button {
  min-height: var(--target);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  color: var(--c-ink);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
button.sdm-text-button:hover, .sdm-text-button:hover { color: var(--c-ink); background: var(--c-grey-page); }
/* Bootstrap's other variants, still in 17 places: each takes the look of the
   one of the three it means. btn-outline-warning was yellow on white, 1.63:1
   (Step 105 Task 3, the training probe); btn-success is a primary action. */
.btn-outline-warning, .btn-outline-info, .btn-outline-primary,
.btn-outline-warning:link, .btn-outline-info:link, .btn-outline-primary:link {
  color: var(--c-ink);
  background-color: var(--c-white);
  border: var(--border-strong);
}
.btn-outline-danger, .btn-outline-danger:link {
  color: var(--c-bad);
  background-color: var(--c-white);
  border: var(--border-width) solid var(--c-bad);
}
.btn-success, .btn-warning, .btn-success:link, .btn-warning:link {
  color: var(--c-ink);
  background-color: var(--c-brand);
  border: var(--border-width) solid var(--c-ink);
  font-weight: var(--fw-regular);
}
/* C8: hover, focus (a ring, not only a colour), disabled -- for every control */
.btn-primary:hover, .brand-go:hover, button:hover, input[type=submit]:hover,
.cta-button:hover, .submit-button:hover {
  color: var(--c-brand);
  background-color: var(--c-ink);
}
.btn-secondary:hover, .brand-leave:hover { background-color: var(--c-grey-page); }
.btn-danger:hover { color: var(--c-white); background-color: var(--c-ink); border-color: var(--c-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
button:disabled, input:disabled, select:disabled, textarea:disabled,
.btn-primary[aria-disabled=true], .btn-secondary[aria-disabled=true] {
  color: var(--c-grey-muted);
  background-color: var(--c-grey-page);
  border-color: var(--c-grey-line);
  cursor: not-allowed;
}

/* ---- LINK -------------------------------------------------------------- */
/* A BARE `a`, ON PURPOSE (Step 89 Task 12, T71). `a:link` would sit at
   specificity (0,1,1) and outrank a page's own `.btn-primary` (0,1,0), turning
   every button-shaped link back into a text link. At (0,0,1) any class wins. */
a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
/* on the ink band, links take the brand colour (12.87:1) */
/* Only the footers this sheet PUTS on the ink (see THE FRAME below). A bare
   `footer a` also caught a page's own white `<footer>` -- "Back to top" on the
   post-investment dashboard, cyan on white, 1.54:1 (Step 105 Task 3 probe). */
.on-ink a, .on-ink a:link, .on-ink a:visited,
footer.footer a, footer.footer a:link, footer.footer a:visited,
footer.bg-dark a, footer.bg-dark a:link, footer.bg-dark a:visited { color: var(--c-brand); }

/* ---- BADGE (state only, C2) -------------------------------------------- */
.badge {
  display: inline-block;
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  background-color: var(--c-grey-page);
  border: var(--border);
}
.badge-ok, .band-ready { color: var(--c-white); background-color: var(--c-ok); border-color: var(--c-ok); }
.badge-warn, .band-almost { color: var(--c-ink); background-color: var(--c-warn); border-color: var(--c-warn-ink); }
.badge-bad, .band-not-yet { color: var(--c-white); background-color: var(--c-bad); border-color: var(--c-bad); }

/* ---- AREA CARDS: a readiness lens and its parts (Step 106 T220) ---------- */
/* listing/_lens_boxes.html, on both readiness screens. Was a copy of the same
   ~20 rules in each page's own <style>, with red written into the markup. */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: var(--sp-5); margin: var(--sp-5) 0; }
.area-card { background-color: var(--c-white); border: var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden; }
.area-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2); background-color: var(--c-brand); color: var(--c-ink); padding: var(--sp-4) var(--sp-5); }
.area-title { margin: 0; font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--c-ink); }
.area-why, .area-todo { margin: var(--sp-3) var(--sp-5); }
.area-parts { list-style: none; margin: 0; padding: 0; }
.area-parts li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2); min-height: var(--target); padding: var(--sp-2) var(--sp-5);
  border-top: var(--border); font-size: var(--fs-2); }

/* ---- DD SCREEN NAVIGATION (Step 108 Task 3) ------------------------------ */
/* listing/_dd_header.html, on all 69 DD screens: Back to the report, where the
   screen sits, Previous and Next. Each a plain ink link at the touch size. */
.dd-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--fs-2); }
.dd-nav a { display: inline-flex; align-items: center; min-height: var(--target); }
.dd-nav-where { color: var(--c-grey-muted); }
.dd-nav-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

/* ---- A QUESTION LINE THAT OPENS ITS ANSWER (Step 108 Task 4) -------------- */
/* listing/_dd_answers.html: the whole line is one link to the edit screen at
   that question. It must not read as a text link -- no underline, ink text --
   and says it is clickable by the cursor and a lift on hover. The keyboard
   gets the same lift and the system's focus ring. */
.area-parts li.dd-q { padding: 0; }
.dd-q-line, .dd-q-line:link, .dd-q-line:visited, .dd-q-line:hover, .dd-q-line:focus {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2); width: 100%; min-height: var(--target); padding: var(--sp-2) var(--sp-5);
  color: var(--c-ink); text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.dd-q-line:hover, .dd-q-line:focus-visible {
  transform: translateY(-2px);
  background-color: var(--c-grey-page);
  box-shadow: var(--shadow-card);
}
.dd-q-line:focus-visible { outline: none; box-shadow: var(--shadow-card), var(--focus-ring); }
/* the answer it lands on sits clear of the sticky navigation bar */
.form-row input, .form-row select, .form-row textarea, #from-your-plan { scroll-margin-top: var(--sp-16); }

/* ---- A DD TOPIC'S LESSON (Step 108 Task 5) --------------------------------- */
/* listing/_dd_guidance.html: text in a card, the handbook as a download. */
.dd-guide { background-color: var(--c-white); border: var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 0 var(--sp-5) var(--sp-4); margin: var(--sp-6) 0 var(--sp-4);
  font-size: var(--fs-2); line-height: var(--lh-body); }
.dd-guide > h2 { margin: 0 calc(-1 * var(--sp-5)) var(--sp-3); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.dd-guide-questions { padding-left: var(--sp-6); }
.dd-guide-questions li { margin: 0 0 var(--sp-3); }
.dd-guide-questions p { margin: 0 0 var(--sp-1); }
/* a screen's name is read aloud and matched to the report: never hyphenated */
.keep-together { white-space: nowrap; hyphens: manual; -webkit-hyphens: manual; }

/* ---- EMPTY STATE, LOADING, ERROR PANEL (C9) ----------------------------- */
.empty-state {
  background-color: var(--c-grey-page);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-4);
  margin: 0 0 var(--sp-4);
  text-align: center;
}
.empty-state p { margin-left: auto; margin-right: auto; }
.working { color: var(--c-grey-muted); }
.working::before { content: "\2026 "; }
.panel-error {
  border-left: 4px solid var(--c-bad);
  background-color: var(--c-grey-page);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
}

/* ---- THE HOW THIS WORKS PANEL ------------------------------------------ */
details.how-this-works {
  background-color: var(--c-grey-page);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-4);
}
details.how-this-works > summary {
  min-height: var(--target);
  display: flex;
  align-items: center;
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* ---- PROGRESS METER ----------------------------------------------------- */
.progress-meter { margin: 0 0 var(--sp-4); }
.progress-meter progress, progress.progress-meter {
  width: 100%;
  height: 12px;
  accent-color: var(--c-ink);
}
.progress-meter .progress-words { font-size: var(--fs-1); color: var(--c-grey-muted); }

/* ---- FILE UPLOAD ROW ---------------------------------------------------- */
.upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-3);
}
.upload-row .upload-name { flex: 1 1 200px; font-weight: var(--fw-medium); }
.upload-row .upload-state { font-size: var(--fs-1); color: var(--c-grey-muted); }

/* ---- THE FRAME: navigation and footer, on the ink token ------------------
   Bootstrap's `.bg-dark` is its own grey; the frame is the H1 band's ink.
   The navigation's own controls (the phone menu toggle, the dropdown arrows,
   a dismiss cross) are NOT buttons in the C6 sense and must not become brand
   pills, so the element rule above is undone for them here. */
.navbar.bg-dark, footer.footer, footer.bg-dark { background-color: var(--c-ink) !important; color: var(--c-white); }
.navbar-dark .site-nav .nav-link, .navbar-dark .navbar-nav .nav-link { color: var(--c-white) !important; }
.navbar-dark .site-nav .nav-link:hover, .navbar-dark .site-nav .nav-link:focus { color: var(--c-brand) !important; }
.dropdown-menu a, .dropdown-menu a:link, .dropdown-menu a:visited { color: var(--c-ink); text-decoration: none; }
.site-frame-nav { font-weight: var(--fw-bold); }
/* The acting-as-a-client banner: the brand band with ink text (R33). */
.banner-client-mode {
  background-color: var(--c-brand);
  color: var(--c-ink);
  padding: var(--sp-3);
  text-align: center;
  font-weight: var(--fw-medium);
}
.banner-client-mode a { color: var(--c-ink); margin-left: var(--sp-5); text-decoration: underline; }
.navbar-toggler, .nav-more, button.close, .dropdown-toggle.nav-more {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: var(--radius-sm);
  min-height: var(--target);
  min-width: var(--target);
  margin: 0;
  padding: 0 var(--sp-2);
  color: var(--c-white);
}
.navbar-toggler:hover, .nav-more:hover { color: var(--c-brand); background-color: transparent; }
.messages, .messagelist { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.messagelist li, .messages li {
  max-width: none;
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-2);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--c-ink);
  background-color: var(--c-grey-page);
}
.messagelist li.success, .messages li.success { border-left-color: var(--c-ok); }
.messagelist li.warning, .messages li.warning { border-left-color: var(--c-warn-ink); }
.messagelist li.error, .messages li.error { border-left-color: var(--c-bad); }

/* ---- THE STYLE GUIDE'S OWN SAMPLES (/styleguide/) -----------------------
   A swatch or a space bar takes its value from the token it shows, so the
   style guide has no style attribute and no colour of its own. */
.swatch { display: inline-block; width: var(--sp-12); height: var(--sp-8); border: var(--border); border-radius: var(--radius-sm); }
.swatch--brand { background-color: var(--c-brand); }
.swatch--ink { background-color: var(--c-ink); }
.swatch--white { background-color: var(--c-white); }
.swatch--grey-line { background-color: var(--c-grey-line); }
.swatch--grey-muted { background-color: var(--c-grey-muted); }
.swatch--grey-page { background-color: var(--c-grey-page); }
.swatch--ok { background-color: var(--c-ok); }
.swatch--warn { background-color: var(--c-warn); }
.swatch--bad { background-color: var(--c-bad); }
.sg-type--1 { font-size: var(--fs-1); }
.sg-type--2 { font-size: var(--fs-2); }
.sg-type--3 { font-size: var(--fs-3); }
.sg-space { display: inline-block; height: var(--sp-3); background-color: var(--c-ink); }
.sg-space--sp-0 { width: 0; }
.sg-space--sp-1 { width: var(--sp-1); }
.sg-space--sp-2 { width: var(--sp-2); }
.sg-space--sp-3 { width: var(--sp-3); }
.sg-space--sp-4 { width: var(--sp-4); }
.sg-space--sp-5 { width: var(--sp-5); }
.sg-space--sp-6 { width: var(--sp-6); }
.sg-space--sp-8 { width: var(--sp-8); }
.sg-space--sp-10 { width: var(--sp-10); }
.sg-space--sp-12 { width: var(--sp-12); }
.sg-space--sp-16 { width: var(--sp-16); }
.sg-form { max-width: 480px; }

/* ---- THE PHONE (C7) ---------------------------------------------------- */
@media (max-width: 480px) {
  /* RMK-CONNECT-ANDROID: not the RMK Connect shell's own buttons (rmk_ui), which stretched the HoneyGuide button. */
  .btn-primary, .btn-secondary, .brand-go, .brand-leave, button:not([class*="rmk-"]), input[type=submit] { width: 100%; margin-right: 0; }
  /* ...but not the navigation's own controls: a full-width menu toggle
     pushed itself onto a line below the logo (seen in Task 3's pictures). */
  .navbar-toggler, .nav-more, button.close { width: auto; }
  th, td { padding: var(--sp-2); }
}

/* ---- THE READINESS LENSES (Step 106, R41/R42) --------------------------- */
/* A lens's row never splits across a printed page: the first picture of the
   funding report put "Financial structure, affordability and security" on
   page 4 and its score on page 3. Scoped to the lens section, so no other
   document's page count moves. */
.lens-report tr, .lens-report h3, .lens-report h4 { break-inside: avoid; page-break-inside: avoid; }
.lens-report h3, .lens-report h4 { break-after: avoid; page-break-after: avoid; }

/* ---- BOOTSTRAP AND LEGACY CLASSES, ON THE NEW LOOK (old pages, unedited) -- */
.container, .container-fluid { max-width: var(--container); }
.btn { border-radius: var(--radius-btn) !important; min-height: var(--target); font-family: var(--font-family); }
.btn-info, .btn-light, .btn-default, .btn-outline-secondary, .btn-outline-dark { color: var(--c-black) !important; background-color: var(--c-white) !important; border: 2px solid var(--c-black) !important; }
.btn-dark { color: var(--c-white) !important; background-color: var(--c-black) !important; border-color: var(--c-black) !important; }
.btn-link { color: var(--c-black) !important; background: transparent !important; border: 0 !important; text-decoration: underline; }
.card { border-radius: var(--radius-card) !important; border: var(--border) !important; }
.card-header { background-color: var(--c-grey) !important; border-bottom: var(--border) !important; }
.alert { border-radius: var(--radius-md) !important; color: var(--c-black) !important; }
.alert-success { background-color: var(--c-ok-tint) !important; border-color: var(--c-ok) !important; }
.alert-info, .alert-primary, .alert-secondary, .alert-light { background-color: var(--c-brand-tint) !important; border-color: var(--c-brand-hover) !important; }
.alert-warning { background-color: var(--c-warn-tint) !important; border-color: var(--c-warn-ink) !important; }
.alert-danger { background-color: var(--c-bad-tint) !important; border-color: var(--c-bad) !important; }
.badge-success { background-color: var(--c-ok) !important; color: var(--c-white) !important; }
.badge-danger { background-color: var(--c-bad) !important; color: var(--c-white) !important; }
.badge-warning { background-color: var(--c-warn-tint) !important; color: var(--c-black) !important; }
.badge-info, .badge-primary { background-color: var(--c-brand) !important; color: var(--c-black) !important; }
.table { width: 100%; }
.table thead th, .thead-dark th { background-color: var(--c-black) !important; color: var(--c-white) !important; }
.jumbotron { background-color: var(--c-grey) !important; border-radius: var(--radius-card) !important; }
.text-primary, .text-info { color: var(--c-black) !important; }
.bg-primary, .bg-info { background-color: var(--c-brand) !important; color: var(--c-black) !important; }
.bg-light { background-color: var(--c-grey) !important; }

/* SDM 04 (owner decision 5): the three band words. */
.band-fill-ready { background-color: var(--c-ok-tint); }
.band-fill-almost { background-color: var(--c-warn-tint); }
.band-fill-not-yet { background-color: var(--c-bad-tint); }
.band-fill-not-started { background-color: var(--c-grey); }

/* =========================================================================
   SDM 05. THE MOCK-UPS, AS CLASSES (docs/design/sdm-mockups/*.dc.html).
   Every repeated inline style in the nine mock-ups is one class here, with
   the mock-up's own number. Every colour is a token (sdm_tokens.css). The
   mock-up wins over anything older in this file: where SDM 03 drew the
   public pages differently, its rules were removed, not overridden.
   Names: sdm-header, sdm-nav, sdm-btn(--…), sdm-hero, sdm-pill, sdm-eyebrow,
   sdm-h1, sdm-h2, sdm-card(--…), sdm-band-card, sdm-step, sdm-stat, sdm-faq,
   sdm-cta-band, sdm-footer, sdm-phone-*, sdm-staff-*, sdm-table, sdm-form.
   ========================================================================= */

/* ---- THE PAGE: Plus Jakarta Sans, grey, 1.5 ----------------------------- */
body { font-family: var(--font-family); color: var(--c-black); background-color: var(--c-white);
       font-size: var(--fs-2); line-height: var(--lh-body); margin: 0; }
body.sdm-public, body.sdm-app { background-color: var(--c-grey); }
.sdm-public p, .sdm-public li { max-width: none; }
.sdm-public a { color: var(--c-black); }
.sdm-public a:hover { color: var(--c-leave); }
/* RMK-CONNECT-ANDROID: the RMK Connect tab bar keeps its own colours (black links were invisible on the black bar). */
.sdm-public .rmk-tabbar a:not(.is-active) { color: var(--rmk-muted-dark); }
.sdm-public .rmk-tabbar a:not(.is-active):hover { color: var(--rmk-white); }
.sdm-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
.sdm-container--narrow { max-width: 860px; }
@media (max-width: 600px) { .sdm-container { padding: 0 var(--gutter-phone); } }
.sdm-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sdm-skip:focus { position: static; width: auto; height: auto; clip: auto; background: var(--c-brand); color: var(--c-black); padding: var(--sp-2) var(--sp-4); }
.sdm-svg { flex-shrink: 0; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sdm-accent { color: var(--c-brand); }

/* ---- HEADER (Main.dc.html) --------------------------------------------- */
.sdm-header { background-color: var(--c-black); border-bottom: 1px solid var(--c-line-on-black-2); }
.sdm-header__inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; flex-wrap: wrap;
                     align-items: center; justify-content: space-between; gap: var(--sp-4); box-sizing: border-box; }
.sdm-brand, .sdm-public .sdm-brand, .sdm-brand:link, .sdm-brand:visited { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-white); }
.sdm-mark { width: 40px; height: 40px; border-radius: 10px; background-color: var(--c-brand); color: var(--c-black); display: flex;
            align-items: center; justify-content: center; font-weight: var(--fw-heavy); font-size: 15px; flex-shrink: 0; }
.sdm-mark--sm { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }
.sdm-brand__name { font-weight: var(--fw-bold); font-size: 19px; }
.sdm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.sdm-nav a, .sdm-public .sdm-nav a, .sdm-nav a:link, .sdm-nav a:visited { color: var(--c-border); text-decoration: none; font-size: 15px; padding: 12px; }
.sdm-nav a:hover { color: var(--c-white); }
.sdm-nav a[aria-current="page"], .sdm-public .sdm-nav a[aria-current="page"] { color: var(--c-brand); font-weight: var(--fw-medium); }
.sdm-header__actions { display: flex; gap: 10px; align-items: center; }
.sdm-btn-signin, .sdm-public .sdm-btn-signin, .sdm-btn-signin:link, .sdm-btn-signin:visited {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid var(--c-brand);
  border-radius: 10px; color: var(--c-brand); background: transparent; text-decoration: none; font-size: 15px; }
.sdm-btn-register, .sdm-public .sdm-btn-register, .sdm-btn-register:link, .sdm-btn-register:visited {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; background-color: var(--c-brand); border: 0;
  border-radius: 10px; color: var(--c-black); text-decoration: none; font-size: 15px; font-weight: var(--fw-medium); }
.sdm-menu-toggle { display: none; min-height: 44px; padding: 0 18px; background: transparent; color: var(--c-white);
                   border: 1px solid var(--c-line-on-black); border-radius: 10px; font: inherit; font-size: 15px; cursor: pointer; }
@media (max-width: 900px) {
  .sdm-menu-toggle { display: inline-flex; align-items: center; }
  .sdm-header .sdm-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; }
  .sdm-header .sdm-nav.is-open { display: flex; }
  .sdm-header__actions { width: 100%; }
}
/* the signed-in tool menu, a second black bar under the header (app pages) */
.sdm-appbar { background-color: var(--c-black); border-top: 1px solid var(--c-line-on-black); }
.sdm-appbar .site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: var(--sp-1) 0; list-style: none; }
.sdm-appbar .nav-link, .sdm-appbar .nav-link:link, .sdm-appbar .nav-link:visited { color: var(--c-brand) !important; text-decoration: none !important; }
.sdm-appbar .nav-link:hover { color: var(--c-white) !important; }

/* ---- SECTIONS ------------------------------------------------------------ */
.sdm-section { background-color: var(--c-white); }
.sdm-section > .sdm-container { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
.sdm-section--white { background-color: var(--c-white); }
.sdm-section--grey { background-color: var(--c-grey); }
.sdm-section--black { background-color: var(--c-black); color: var(--c-white); }
.sdm-section--black a { color: var(--c-brand); }
.sdm-row { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.sdm-row--56 { gap: 56px; }
.sdm-row--top { align-items: flex-start; }
.sdm-col { flex: 1 1 460px; min-width: 0; }
.sdm-col--side { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.sdm-col--form { flex: 1 1 380px; min-width: 0; }

/* ---- TYPE ---------------------------------------------------------------- */
.sdm-h1 { margin: 0 0 20px; font-size: var(--fs-hero); line-height: 1.05; font-weight: var(--fw-heavy); letter-spacing: var(--ls-hero); }
.sdm-h1--directory { font-size: 48px; line-height: 1.08; letter-spacing: -1.4px; margin: 0 0 16px; }
.sdm-h1--wide { max-width: 900px; }
.sdm-h2 { margin: 0 0 40px; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-h2); font-weight: var(--fw-heavy); }
.sdm-h2--intro { margin-bottom: 12px; }
.sdm-h2--16 { margin-bottom: 16px; }
.sdm-h2--20 { margin-bottom: 20px; }
.sdm-h2--32 { margin-bottom: 32px; }
.sdm-h2--48 { margin-bottom: 48px; }
.sdm-h2--measure { max-width: 760px; }
.sdm-h2--measure-sm { max-width: 720px; }
.sdm-h3 { margin: 0 0 8px; font-size: 19px; font-weight: var(--fw-bold); }
.sdm-eyebrow { margin: 0 0 8px; font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-muted); }
.sdm-section--black .sdm-eyebrow { color: var(--c-brand); }
.sdm-lead { margin: 0 0 32px; font-size: var(--fs-lead); color: var(--c-muted-on-black); max-width: 560px; }
.sdm-lead--580 { max-width: 580px; }
.sdm-lead--600 { max-width: 600px; }
.sdm-lead--640 { max-width: 640px; }
.sdm-lead--flush { margin-bottom: 0; font-size: var(--fs-3); }
.sdm-intro { margin: 0 0 40px; color: var(--c-muted); font-size: var(--fs-3); max-width: 760px; }
.sdm-intro--32 { margin-bottom: 32px; }
.sdm-intro--24 { margin-bottom: 24px; }
.sdm-intro--flush { margin-bottom: 0; }
.sdm-section--black .sdm-intro { color: var(--c-muted-on-black); }
.sdm-muted { color: var(--c-muted); }
.sdm-note { margin: 24px 0 0; color: var(--c-muted); font-size: 15px; }
.sdm-note--20 { margin-top: 20px; }
.sdm-addlink { margin: 24px 0 0; font-size: 17px; }
.sdm-addlink--20 { margin-top: 20px; }
.sdm-addlink a { font-weight: var(--fw-bold); text-underline-offset: 3px; }
.sdm-crumb { margin: 0 0 12px; font-size: var(--fs-1); color: var(--c-muted-on-black); }
.sdm-crumb a, .sdm-public .sdm-crumb a { color: var(--c-muted-on-black); }
@media (max-width: 600px) {
  .sdm-h1 { font-size: 38px; letter-spacing: -1px; }
  .sdm-h1--directory { font-size: 34px; }
  .sdm-h2 { font-size: 30px; }
}

/* ---- HERO ---------------------------------------------------------------- */
.sdm-hero { background-color: var(--c-black); color: var(--c-white); }
.sdm-hero__inner { max-width: var(--container); margin: 0 auto; padding: 72px var(--gutter) var(--sp-section); display: flex;
                   flex-wrap: wrap; gap: 56px; align-items: center; box-sizing: border-box; }
.sdm-hero__inner--stack { display: block; }
.sdm-hero__inner--directory { padding: 56px var(--gutter) 64px; gap: 40px; align-items: flex-end; justify-content: space-between; }
.sdm-hero__copy { flex: 1 1 520px; min-width: 0; }
.sdm-hero__aside { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.sdm-hero__grid { flex: 1 1 380px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sdm-pill { margin: 0 0 20px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--c-line-on-black);
            border-radius: var(--radius-round); color: var(--c-muted-on-black); font-size: var(--fs-1); }
.sdm-pill__dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--c-brand); }
.sdm-trust { display: flex; flex-wrap: wrap; gap: 24px; color: var(--c-muted-on-black); font-size: 15px; }
.sdm-trust > span { display: inline-flex; align-items: center; gap: 8px; }
.sdm-trust .sdm-svg { color: var(--c-brand); }
@media (max-width: 600px) {
  .sdm-hero__inner { padding: 48px var(--gutter-phone) 64px; gap: 40px; }
  .sdm-hero__inner--directory { padding: 40px var(--gutter-phone) 48px; }
  .sdm-section > .sdm-container { padding-top: 64px; padding-bottom: 64px; }
}

/* ---- BUTTONS: 56px, radius 12 ------------------------------------------ */
.sdm-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sdm-btn-row--hero { margin-bottom: 36px; }
.sdm-btn, .sdm-public .sdm-btn, .sdm-btn:link, .sdm-btn:visited {
  min-height: var(--target-main); display: inline-flex; align-items: center; justify-content: center; padding: 0 28px;
  border-radius: var(--radius-btn); text-decoration: none; font-size: var(--fs-3); font-family: inherit; cursor: pointer;
  border: 0; background: transparent; box-sizing: border-box; }
.sdm-btn--main, .sdm-public .sdm-btn--main, .sdm-btn--main:link, .sdm-btn--main:visited { background-color: var(--c-brand); color: var(--c-black); font-weight: var(--fw-medium); }
.sdm-btn--main:hover { background-color: var(--c-brand-hover); color: var(--c-black); }
.sdm-btn--ghost, .sdm-public .sdm-btn--ghost, .sdm-btn--ghost:link, .sdm-btn--ghost:visited { border: 1px solid var(--c-white); color: var(--c-white); }
.sdm-btn--ghost:hover { color: var(--c-brand); border-color: var(--c-brand); }
.sdm-btn--black, .sdm-public .sdm-btn--black, .sdm-btn--black:link, .sdm-btn--black:visited { background-color: var(--c-black); color: var(--c-brand); font-weight: var(--fw-medium); }
.sdm-btn--black:hover { color: var(--c-white); }
/* RMK-CONNECT-PLAYREADY A7b. A BUTTON KEEPS ITS OWN TEXT COLOUR ON HOVER AND FOCUS.
   `.sdm-public a:hover` and `.rmk-body a:hover` (0,2,1) beat `.sdm-btn--main:hover` (0,2,0), so
   "Start free" turned link-blue on hover/focus: 3.14:1 on cyan, 3.10:1 on ink (WCAG AA
   fails). Ink on cyan-hover (--c-brand-hover) is 9.75:1; white on ink 19.8:1; cyan on ink 12.9:1. */
a.sdm-btn--main:hover, a.sdm-btn--main:focus, a.sdm-btn--main:active,
.sdm-public a.sdm-btn--main:hover, .sdm-public a.sdm-btn--main:focus, .rmk-body a.sdm-btn--main:hover, .rmk-body a.sdm-btn--main:focus {
  background-color: var(--c-brand-hover); color: var(--c-black); }
a.sdm-btn--black:hover, a.sdm-btn--black:focus, a.sdm-btn--black:active,
.sdm-public a.sdm-btn--black:hover, .sdm-public a.sdm-btn--black:focus, .rmk-body a.sdm-btn--black:hover, .rmk-body a.sdm-btn--black:focus {
  background-color: var(--c-black); color: var(--c-white); }
a.sdm-btn--ghost:hover, a.sdm-btn--ghost:focus, .sdm-public a.sdm-btn--ghost:hover, .sdm-public a.sdm-btn--ghost:focus,
.rmk-body a.sdm-btn--ghost:hover, .rmk-body a.sdm-btn--ghost:focus { color: var(--c-brand); border-color: var(--c-brand); }
a.sdm-btn--outline:hover, a.sdm-btn--outline:focus, .sdm-public a.sdm-btn--outline:hover, .sdm-public a.sdm-btn--outline:focus,
.rmk-body a.sdm-btn--outline:hover, .rmk-body a.sdm-btn--outline:focus { color: var(--c-black); }
.sdm-btn--outline, .sdm-public .sdm-btn--outline, .sdm-btn--outline:link, .sdm-btn--outline:visited { border: 2px solid var(--c-black); color: var(--c-black); }
.sdm-btn--choice { padding: 0 24px; }
.sdm-btn--submit { font-weight: var(--fw-regular); }
.sdm-btn--block { display: flex; width: 100%; min-height: 52px; font-size: 17px; font-weight: var(--fw-medium); }
.sdm-btn--search { min-height: 50px; font-size: 17px; font-weight: var(--fw-regular); }
.sdm-btn--sm { min-height: 52px; padding: 0 24px; font-size: 17px; }

/* ---- CARDS --------------------------------------------------------------- */
.sdm-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sdm-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sdm-grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sdm-grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sdm-grid--340 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.sdm-grid--16 { gap: 16px; }
.sdm-grid--mb20 { margin-bottom: 20px; }
@media (max-width: 400px) { .sdm-grid, .sdm-grid--240, .sdm-grid--260, .sdm-grid--220, .sdm-grid--340 { grid-template-columns: minmax(0, 1fr); } }
.sdm-card { border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 24px; background-color: var(--c-white); color: var(--c-black); box-shadow: none; margin: 0; }
.sdm-card--28 { padding: 28px; }
.sdm-card--plain { border: 0; }
.sdm-card--grey { border: 0; background-color: var(--c-grey); }
.sdm-card__title { font-size: 19px; font-weight: var(--fw-bold); margin: 0 0 6px; }
.sdm-card__title--21 { font-size: 21px; margin-bottom: 8px; }
.sdm-card__label { font-weight: var(--fw-bold); margin: 0 0 4px; }
.sdm-card p { margin: 0; color: var(--c-muted); }
.sdm-card__small { font-size: 15px; color: var(--c-muted); }
.sdm-card strong { color: var(--c-black); }
.sdm-card--dark { grid-column: 1 / -1; background-color: var(--c-black); color: var(--c-white); border: 0; border-radius: var(--radius-card-lg);
                  padding: 36px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; text-decoration: none; }
a.sdm-card--dark, .sdm-public a.sdm-card--dark { color: var(--c-white); }
.sdm-card--dark-40 { padding: 40px; gap: 40px; justify-content: flex-start; }
.sdm-card--dark p { color: var(--c-muted-on-black); }
.sdm-card--dark .sdm-card__body { flex: 1 1 420px; min-width: 0; display: block; }
.sdm-card--dark .sdm-card__side { flex: 1 1 360px; min-width: 0; }
.sdm-card__big { display: block; font-size: 30px; font-weight: var(--fw-heavy); letter-spacing: -0.6px; margin: 0 0 8px; }
.sdm-card__lead { display: block; color: var(--c-muted-on-black); font-size: var(--fs-3); margin: 0; }
.sdm-tag { display: inline-block; background-color: var(--c-brand); color: var(--c-black); border-radius: var(--radius-round); padding: 4px 12px;
           font-size: 13px; font-weight: var(--fw-bold); margin: 0 0 14px; }
.sdm-card--line { background: transparent; border: 1px solid var(--c-line-on-black); border-radius: var(--radius-card); padding: 24px; color: var(--c-white); }
.sdm-card--line-22 { padding: 22px; }
.sdm-card--line p { margin: 0; color: var(--c-border); }
.sdm-stat { font-size: 32px; font-weight: var(--fw-heavy); color: var(--c-brand); margin: 0 0 6px; line-height: 1.2; }
.sdm-stat--28 { font-size: 28px; }
/* LAYOUTFIX: a long word ("Polokwane") in a half-width stat card on a 360 px phone ran past the screen edge */
@media (max-width: 400px) { .sdm-stat--28 { font-size: 24px; overflow-wrap: anywhere; } }
.sdm-stat--24 { font-size: 24px; }
.sdm-stat--20 { font-size: 20px; margin-bottom: 4px; }
/* a "who are you" door card (Main.dc.html "Find your place") */
.sdm-door-card, .sdm-public .sdm-door-card { text-decoration: none; color: var(--c-black); border: 1px solid var(--c-border); border-radius: var(--radius-card);
                 padding: 28px; display: flex; flex-direction: column; gap: 12px; background-color: var(--c-white); }
.sdm-door-card:hover { border-color: var(--c-black); color: var(--c-black); }
.sdm-icon-box { width: 52px; height: 52px; border-radius: 14px; background-color: var(--c-black); color: var(--c-brand); display: flex; align-items: center; justify-content: center; }
.sdm-door-card__title { font-size: 21px; font-weight: var(--fw-bold); }
.sdm-door-card__text { color: var(--c-muted); }
.sdm-door-card__go { margin-top: auto; font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
/* a card with a black head (Entrepreneurs "Three ways", Consultants, Work with RMK) */
.sdm-band-card { border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; background-color: var(--c-white); display: flex; flex-direction: column; }
.sdm-band-card__head { background-color: var(--c-black); color: var(--c-brand); padding: 18px 24px; font-weight: var(--fw-bold); font-size: 19px; margin: 0; }
.sdm-band-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.sdm-band-card__body p { margin: 0; color: var(--c-muted); }
.sdm-band-card__body .sdm-band-card__small { font-size: var(--fs-1); }
.sdm-band-card__body strong { color: var(--c-black); }

/* ---- STEPS 01-04 --------------------------------------------------------- */
.sdm-step { background-color: var(--c-white); border: 0; border-radius: var(--radius-card); padding: 28px; border-top: 4px solid var(--c-brand); color: var(--c-black); }
.sdm-step__n { display: block; font-size: 44px; font-weight: var(--fw-heavy); line-height: 1; margin: 0 0 16px; }
.sdm-step p { margin: 0; color: var(--c-muted); }
.sdm-step--sm { padding: 24px; }
.sdm-step--sm .sdm-step__n { font-size: 40px; margin-bottom: 12px; }
.sdm-step__title { font-weight: var(--fw-bold); margin: 0 0 6px; }
.sdm-step--grey { background-color: var(--c-grey); }

/* ---- TICK LISTS ---------------------------------------------------------- */
.sdm-ticks { display: flex; flex-direction: column; gap: 12px; color: var(--c-border); font-size: 17px; margin: 0; padding: 0; list-style: none; }
.sdm-ticks--14 { gap: 14px; }
.sdm-ticks--mb { margin-bottom: 28px; }
.sdm-ticks > li, .sdm-ticks > span { display: flex; gap: 12px; }
.sdm-ticks .sdm-svg { color: var(--c-brand); }
.sdm-ticks--light { gap: 16px; color: var(--c-black); }
.sdm-ticks--light .sdm-svg { color: var(--c-ok); }
.sdm-ticks--light > span { gap: 14px; }

/* ---- THE PHONE DRAWING (Entrepreneurs.dc.html "Your business, on your phone") */
.sdm-phone-frame { width: 300px; max-width: 100%; border-radius: 36px; background-color: var(--c-black); padding: 12px; box-shadow: 0 30px 60px var(--c-shadow-strong); box-sizing: border-box; }
.sdm-phone-frame__screen { background-color: var(--c-grey); border-radius: 26px; overflow: hidden; }
.sdm-phone-frame__top { background-color: var(--c-black); color: var(--c-white); padding: 18px; }
.sdm-phone-frame__hello { color: var(--c-muted-on-black); font-size: 12px; }
.sdm-phone-frame__name { font-weight: var(--fw-heavy); font-size: var(--fs-3); margin: 0 0 10px; }
.sdm-phone-frame__journey { background-color: var(--c-line-on-black-2); border-radius: var(--radius-btn); padding: 10px 12px; }
.sdm-phone-frame__small { font-size: 11px; color: var(--c-muted-on-black); }
.sdm-phone-frame__stage { color: var(--c-brand); font-weight: var(--fw-heavy); font-size: 20px; }
.sdm-phone-frame__bar { height: 6px; background-color: var(--c-line-on-black); border-radius: var(--radius-round); margin-top: 6px; }
.sdm-phone-frame__bar > span { display: block; height: 6px; background-color: var(--c-brand); border-radius: var(--radius-round); }
.sdm-phone-frame__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sdm-phone-frame__next { background-color: var(--c-white); border: 2px solid var(--c-black); border-radius: var(--radius-btn); padding: 12px; }
.sdm-phone-frame__next .sdm-phone-next__chip { padding: 1px 8px; font-size: 11px; }
.sdm-phone-frame__next-title { font-weight: var(--fw-bold); font-size: var(--fs-1); }
.sdm-phone-frame__do { margin-top: 8px; background-color: var(--c-brand); border-radius: var(--radius-md); padding: 8px; text-align: center; font-size: 13px; }
.sdm-phone-frame__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sdm-phone-frame__tiles > div { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px; font-size: 13px; font-weight: var(--fw-bold); }

/* ---- EXAMPLE CARDS IN A HERO (always labelled "Example") ---------------- */
.sdm-example { width: 100%; max-width: 420px; background-color: var(--c-white); color: var(--c-black); border-radius: var(--radius-card-lg);
               padding: 28px; box-shadow: var(--shadow-hero); }
.sdm-example--440 { max-width: 440px; }
.sdm-example--grey { background-color: var(--c-grey); box-shadow: none; }
.sdm-example--soft { box-shadow: 0 30px 60px var(--c-shadow); }
.sdm-example__head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; gap: 12px; }
.sdm-example__head--16 { margin-bottom: 16px; }
.sdm-example__title { font-weight: var(--fw-bold); font-size: var(--fs-3); }
.sdm-example__sub { margin: 0 0 22px; color: var(--c-muted); font-size: var(--fs-1); }
.sdm-example__sub--18 { margin-bottom: 18px; }
.sdm-example__label { font-size: 13px; color: var(--c-muted); }
.sdm-timeline { display: flex; flex-direction: column; margin: 0 0 22px; }
.sdm-timeline__row { display: flex; gap: 14px; }
.sdm-timeline__mark { display: flex; flex-direction: column; align-items: center; }
.sdm-timeline__dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.sdm-timeline__dot--done { background-color: var(--c-ok); color: var(--c-white); }
.sdm-timeline__dot--now { background-color: var(--c-brand); border: 2px solid var(--c-black); }
.sdm-timeline__dot--later { border: 2px solid var(--c-border); }
.sdm-timeline__line { width: 2px; height: 22px; background-color: var(--c-border); }
.sdm-timeline__line--done { background-color: var(--c-ok); }
.sdm-timeline__text { font-weight: var(--fw-medium); font-size: 15px; }
.sdm-timeline__text--now { font-weight: var(--fw-bold); }
.sdm-timeline__text--later { font-weight: var(--fw-regular); color: var(--c-muted); }
.sdm-example__foot { border-top: 1px solid var(--c-border); padding-top: 16px; }
.sdm-example__foot-label { font-size: 13px; color: var(--c-muted); margin: 0 0 8px; }
.sdm-example__action { min-height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--c-brand); border-radius: 10px; font-size: 15px; }
.sdm-example__chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.sdm-example__list { display: flex; flex-direction: column; gap: 12px; }
.sdm-example__list--8 { gap: 8px; font-size: 15px; }
.sdm-example__match { border: 1px solid var(--c-border); border-radius: var(--radius-btn); padding: 14px 16px; }
.sdm-example__match-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: var(--fw-bold); }
.sdm-example__match-text { font-size: var(--fs-1); color: var(--c-muted); margin-top: 4px; }
.sdm-example__line { background-color: var(--c-white); border-radius: 10px; padding: 12px 14px; display: flex; justify-content: space-between; }
.sdm-example__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.sdm-example__kpi { background-color: var(--c-white); border-radius: var(--radius-btn); padding: 14px; border-top: 4px solid var(--c-brand); }
.sdm-example__kpi-n { font-size: 28px; font-weight: var(--fw-heavy); }
.sdm-example__rows { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.sdm-example__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.sdm-example__rows .sdm-example__total { border-top: 1px solid var(--c-border); padding-top: 10px; }

/* ---- STATE CHIPS: Ready / Almost / Not yet (never a percentage alone) --- */
.sdm-chip { display: inline-block; border-radius: var(--radius-round); padding: 4px 12px; font-size: 13px; font-weight: var(--fw-medium); border: 1px solid transparent; white-space: nowrap; }
.sdm-chip--sm { padding: 2px 10px; }
.sdm-chip--xs { padding: 1px 8px; font-size: 12px; font-weight: var(--fw-bold); margin-right: 8px; }
.sdm-chip--bold { font-weight: var(--fw-bold); }
.sdm-chip--flat { border: 0; padding: 3px 10px; font-weight: var(--fw-regular); }
.sdm-chip--ready { background-color: var(--c-ok-tint); border-color: var(--c-ok); }
.sdm-chip--almost { background-color: var(--c-warn-tint); border-color: var(--c-warn-ink); }
.sdm-chip--not-yet { background-color: var(--c-bad-tint); border-color: var(--c-bad); }
.sdm-chip--fixing { background-color: var(--c-brand-tint); border-color: var(--c-brand-hover); }
.sdm-chip--not-started { background-color: var(--c-grey); border-color: var(--c-border); }

/* ---- PRICES -------------------------------------------------------------- */
.sdm-price-card { border: 1px solid var(--c-border); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 10px; background-color: var(--c-white); }
.sdm-price-card--featured { border: 2px solid var(--c-black); }
.sdm-price-card__name { font-weight: var(--fw-bold); font-size: 19px; }
.sdm-price-card__amount { font-size: 36px; font-weight: var(--fw-heavy); letter-spacing: -1px; }
.sdm-price-card__text { color: var(--c-muted); }

/* ---- FAQ ----------------------------------------------------------------- */
.sdm-faq { display: flex; flex-direction: column; gap: 12px; }
.sdm-faq details { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; padding: 0 22px; }
.sdm-faq summary { min-height: 60px; display: flex; align-items: center; font-weight: var(--fw-bold); font-size: 17px; cursor: pointer; }
.sdm-faq details p { margin: 0 0 20px; color: var(--c-muted); }

/* ---- CTA BAND (cyan) ------------------------------------------------------ */
.sdm-cta-band { background-color: var(--c-brand); color: var(--c-black); }
.sdm-cta-band__inner { max-width: var(--container); margin: 0 auto; padding: 64px var(--gutter); display: flex; flex-wrap: wrap; gap: 24px;
                       align-items: center; justify-content: space-between; box-sizing: border-box; }
.sdm-cta-band__copy { flex: 1 1 420px; min-width: 0; }
.sdm-cta-band__title { margin: 0 0 8px; font-size: 36px; line-height: var(--lh-tight); font-weight: var(--fw-heavy); }
.sdm-cta-band p { margin: 0; font-size: var(--fs-3); }
@media (max-width: 600px) { .sdm-cta-band__title { font-size: 28px; } .sdm-cta-band__inner { padding: 48px var(--gutter-phone); } }
/* the "Do you work at a funder?" band (black) */
.sdm-claim-band__inner { max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter); display: flex; flex-wrap: wrap; gap: 20px;
                         align-items: center; justify-content: space-between; box-sizing: border-box; }
.sdm-claim-band__title { font-size: 22px; font-weight: var(--fw-heavy); margin: 0 0 4px; }

/* ---- FORMS (label above, 50px fields, cyan 56px button) ----------------- */
.sdm-form { background-color: var(--c-white); color: var(--c-black); border-radius: var(--radius-card-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.sdm-form__title { margin: 0 0 6px; font-size: 24px; font-weight: var(--fw-heavy); }
.sdm-form label, .sdm-field > label { display: block; font-weight: var(--fw-medium); margin: 0 0 6px; }
.sdm-form input[type=text], .sdm-form input[type=tel], .sdm-form input[type=email], .sdm-form input[type=search], .sdm-form input[type=password],
.sdm-form input[type=number], .sdm-form select, .sdm-form textarea, .sdm-field input, .sdm-field select, .sdm-field textarea, .sdm-input {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; border: 1px solid var(--c-muted); border-radius: 10px; font: inherit;
  background-color: var(--c-white); color: var(--c-black); max-width: none; }
.sdm-form .sdm-check, .sdm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--c-muted); font-weight: var(--fw-regular); margin: 0; }
.sdm-check input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
.sdm-search { background-color: var(--c-white); border-radius: var(--radius-card-lg); padding: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.sdm-search--filter { border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 20px; gap: 14px; margin: 0 0 28px; }
.sdm-search__wide { flex: 1 1 360px; min-width: 0; }
.sdm-search__wide--280 { flex-basis: 280px; }
.sdm-search__narrow { flex: 0 1 220px; min-width: 0; }
.sdm-search__narrow--200 { flex-basis: 200px; }
.sdm-error-summary { background-color: var(--c-bad-tint); border: 2px solid var(--c-bad); border-radius: 10px; padding: var(--sp-4); margin: 0 0 var(--sp-5); color: var(--c-black); }

/* ---- FUNDERS DIRECTORY (FundersDirectory.dc.html) ----------------------- */
.sdm-counts { display: flex; gap: 12px; flex-wrap: wrap; }
.sdm-count { border: 1px solid var(--c-line-on-black); border-radius: 14px; padding: 14px 20px; min-width: 110px; }
.sdm-count__n { font-size: 28px; font-weight: var(--fw-heavy); color: var(--c-brand); }
.sdm-count__label { color: var(--c-border); font-size: var(--fs-1); }
.sdm-product { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.sdm-product__head { padding: 22px 24px; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sdm-product__kind { font-size: 13px; color: var(--c-muted); }
.sdm-product__name { margin: 2px 0 0; font-size: 21px; font-weight: var(--fw-heavy); }
.sdm-product__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; color: var(--c-muted); font-size: 15px; }
.sdm-product__body strong { color: var(--c-black); }
.sdm-product__line { display: flex; gap: 10px; }
.sdm-product__line .sdm-svg--ok { color: var(--c-ok); }
.sdm-product__line .sdm-svg--warn { color: var(--c-warn-ink); }
.sdm-product__line .sdm-svg--bad { color: var(--c-bad); }
.sdm-product__foot { padding: 0 24px 22px; }

/* ---- FOOTER (Main.dc.html) ---------------------------------------------- */
.sdm-footer { background-color: var(--c-black); color: var(--c-muted-on-black); }
.sdm-footer__inner { max-width: var(--container); margin: 0 auto; padding: 64px var(--gutter) 32px; box-sizing: border-box; }
.sdm-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin: 0 0 40px; }
.sdm-footer__brand { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.sdm-footer__brand-name { font-weight: var(--fw-bold); font-size: var(--fs-3); color: var(--c-white); }
.sdm-footer p { margin: 0; font-size: 15px; color: var(--c-muted-on-black); }
.sdm-footer__title { color: var(--c-white); font-weight: var(--fw-bold); margin: 0 0 12px; }
.sdm-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.sdm-footer a, .sdm-public .sdm-footer a, .sdm-footer a:link, .sdm-footer a:visited { color: var(--c-brand); text-decoration: none; }
.sdm-footer a:hover { color: var(--c-white); }
.sdm-footer__legal { border-top: 1px solid var(--c-line-on-black); padding-top: 24px; font-size: var(--fs-1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.ncr-line { font-size: var(--fs-1); color: var(--c-muted); }
.credit-cost { background-color: var(--c-grey); border-left: 4px solid var(--c-black); padding: var(--sp-3) var(--sp-4); }

/* ---- THE PHONE: register, sign in, role homes, payment (phone first) ----- */
.sdm-phone { width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; background-color: var(--c-grey); color: var(--c-black);
             display: flex; flex-direction: column; box-sizing: border-box; }
body.sdm-phone-page { background-color: var(--c-black); }
.sdm-phone-head { background-color: var(--c-black); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
.sdm-phone-back, .sdm-phone-back:link, .sdm-phone-back:visited { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--c-brand); }
.sdm-phone-brand { color: var(--c-white); font-weight: var(--fw-bold); font-size: 17px; }
.sdm-phone-spacer { width: 44px; }
.sdm-phone-intro { padding: 22px 20px 0; }
.sdm-phone-title { margin: 0 0 6px; font-size: 26px; font-weight: var(--fw-heavy); letter-spacing: -0.5px; }
.sdm-phone-lead { margin: 0 0 18px; color: var(--c-muted); font-size: 15px; }
.sdm-phone-list { padding: 0 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sdm-phone-foot { padding: 16px 20px 24px; background-color: var(--c-grey); }
.sdm-phone-foot__after { margin: 12px 0 0; text-align: center; font-size: 15px; color: var(--c-muted); }
.sdm-phone-foot__after a { color: var(--c-black); font-weight: var(--fw-medium); }
.sdm-phone-btn, .sdm-phone-btn:link, .sdm-phone-btn:visited { width: 100%; min-height: var(--target-main); display: flex; align-items: center; justify-content: center;
  background-color: var(--c-brand); border: 0; border-radius: var(--radius-btn); color: var(--c-black); text-decoration: none; font: inherit; font-size: var(--fs-3); cursor: pointer; }
.sdm-phone-btn--sm { min-height: 48px; border-radius: 10px; font-size: var(--fs-2); }
.sdm-phone-btn--outline { background: transparent; border: 2px solid var(--c-black); }
/* the "I am a" choice */
.sdm-role, .sdm-role:link, .sdm-role:visited { display: flex; align-items: center; gap: 14px; background-color: var(--c-white); border: 1px solid var(--c-border);
            border-radius: 14px; padding: 12px 14px; text-decoration: none; color: var(--c-black); cursor: pointer; margin: 0; font-weight: var(--fw-regular); }
.sdm-role input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sdm-role:has(input:checked), .sdm-role--chosen { border: 2px solid var(--c-black); box-shadow: 0 0 0 3px var(--c-brand); }
.sdm-role:has(input:focus-visible) { outline: 3px solid var(--c-black); outline-offset: 2px; }
.sdm-role__icon { width: 44px; height: 44px; border-radius: var(--radius-btn); background-color: var(--c-black); color: var(--c-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sdm-role__text { flex: 1; }
.sdm-role__name { display: block; font-weight: var(--fw-bold); font-size: var(--fs-2); }
.sdm-role__sub { display: block; color: var(--c-muted); font-size: 13px; }
.sdm-phone-form { padding: 0 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sdm-phone-form .sdm-field > label { margin-bottom: 6px; }
/* the role home (EntrepreneurHome.dc.html) */
.sdm-phone-top { background-color: var(--c-black); padding: 16px 20px 22px; color: var(--c-white); }
.sdm-phone-bar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.sdm-phone-icon-btn, .sdm-phone-icon-btn:link, .sdm-phone-icon-btn:visited { width: 44px; height: 44px; border-radius: var(--radius-btn); background-color: var(--c-line-on-black-2);
  border: 0; display: flex; align-items: center; justify-content: center; color: var(--c-brand); }
.sdm-phone-hello { margin: 0; color: var(--c-muted-on-black); font-size: var(--fs-1); }
.sdm-phone-h1 { margin: 0 0 16px; font-size: 24px; font-weight: var(--fw-heavy); letter-spacing: -0.4px; }
.sdm-phone-journey { background-color: var(--c-line-on-black-2); border-radius: 14px; padding: 14px 16px; }
.sdm-phone-journey__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--c-muted-on-black); margin: 0 0 8px; }
.sdm-phone-journey__figure { font-size: 26px; font-weight: var(--fw-heavy); color: var(--c-brand); margin: 0 0 10px; line-height: 1.2; }
.sdm-phone-journey__figure--text { font-size: 20px; }
.sdm-phone-progress { height: 8px; border-radius: var(--radius-round); background-color: var(--c-line-on-black); overflow: hidden; }
.sdm-phone-progress > span { display: block; height: 100%; background-color: var(--c-brand); }
.sdm-phone-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sdm-phone-next { background-color: var(--c-white); border: 2px solid var(--c-black); border-radius: var(--radius-card); padding: 16px; }
.sdm-phone-next__chip { display: inline-block; background-color: var(--c-warn-tint); border: 1px solid var(--c-warn-ink); border-radius: var(--radius-round);
                        padding: 2px 10px; font-size: 12px; font-weight: var(--fw-bold); margin: 0 0 6px; }
.sdm-phone-next__title { font-weight: var(--fw-bold); font-size: 17px; margin: 0 0 4px; }
.sdm-phone-next__text { margin: 0 0 12px; color: var(--c-muted); font-size: var(--fs-1); }
.sdm-phone-next__help { margin: 10px 0 0; font-size: var(--fs-1); }
.sdm-phone-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sdm-phone-tile, .sdm-phone-tile:link, .sdm-phone-tile:visited { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; padding: 16px;
  text-decoration: none; color: var(--c-black); display: flex; flex-direction: column; gap: 10px; min-height: 96px; box-sizing: border-box; }
.sdm-phone-tile:hover { border-color: var(--c-black); color: var(--c-black); }
.sdm-phone-tile__title { font-weight: var(--fw-bold); font-size: 15px; }
.sdm-phone-tile__text { color: var(--c-muted); font-size: 13px; }
.sdm-phone-row, .sdm-phone-row:link, .sdm-phone-row:visited { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; padding: 14px 16px;
  text-decoration: none; color: var(--c-black); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; box-sizing: border-box; }
.sdm-phone-row__title { display: block; font-weight: var(--fw-bold); font-size: 15px; }
.sdm-phone-row__text { display: block; color: var(--c-muted); font-size: 13px; }
.sdm-phone-section-title { margin: 6px 0 0; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted); }
.sdm-phone-nav { background-color: var(--c-black); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 8px 14px; position: sticky; bottom: 0; }
.sdm-phone-nav a, .sdm-phone-nav a:link, .sdm-phone-nav a:visited { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--c-muted-on-black); text-decoration: none; font-size: 12px; }
.sdm-phone-nav a[aria-current="page"] { color: var(--c-brand); font-weight: var(--fw-medium); }
/* payment, success and cancel: the same phone card */
.sdm-phone-card { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 20px; }
.sdm-phone-card--strong { border: 2px solid var(--c-black); }
.sdm-phone-card__title { margin: 0 0 6px; font-size: 20px; font-weight: var(--fw-heavy); }
.sdm-phone-card dl { display: grid; grid-template-columns: auto auto; gap: 8px 12px; margin: 0; font-size: 15px; }
.sdm-phone-card dt { color: var(--c-muted); }
.sdm-phone-card dd { margin: 0; text-align: right; font-weight: var(--fw-bold); }

/* ---- THE STAFF SHELL (StaffDashboard.dc.html) ----------------------------- */
.sdm-staff-top { background-color: var(--c-black); color: var(--c-white); padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sdm-staff-top__brand { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-bold); }
.sdm-staff-top__brand span.sdm-staff-top__area { color: var(--c-muted-on-black); font-weight: 500; }
.sdm-staff-top__who { display: flex; align-items: center; gap: 14px; color: var(--c-muted-on-black); font-size: var(--fs-1); }
.sdm-staff-top a, .sdm-staff-top a:link, .sdm-staff-top a:visited { color: var(--c-brand); text-decoration: none; }
.sdm-staff { display: flex; flex-wrap: wrap; background-color: var(--c-grey); line-height: 1.45; }
.sdm-staff__side { flex: 0 1 248px; min-width: 220px; background-color: var(--c-white); border-right: 1px solid var(--c-border); padding: 18px 12px; box-sizing: border-box; }
.sdm-staff__nav { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.sdm-staff__nav a, .sdm-staff__nav a:link, .sdm-staff__nav a:visited { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  border-radius: 10px; color: var(--c-black); text-decoration: none; }
.sdm-staff__nav a:hover { background-color: var(--c-grey); }
.sdm-staff__nav a[aria-current="page"] { background-color: var(--c-black); color: var(--c-brand); font-weight: var(--fw-medium); }
.sdm-staff__nav a.sdm-staff__leave { color: var(--c-leave); }
.sdm-staff__group { margin: 14px 14px 4px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted); }
.sdm-staff__count { background-color: var(--c-brand); color: var(--c-black); border-radius: var(--radius-round); padding: 0 8px; font-size: 12px; font-weight: var(--fw-bold); }
.sdm-staff__main { flex: 999 1 560px; min-width: 0; padding: 28px; box-sizing: border-box; }
@media (max-width: 700px) { .sdm-staff__side { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--c-border); } .sdm-staff__main { padding: 20px var(--gutter-phone); } }
.sdm-staff-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 20px; }
.sdm-staff-h1 { margin: 0; font-size: 30px; font-weight: var(--fw-heavy); letter-spacing: -0.6px; }
.sdm-staff-sub { margin: 4px 0 0; color: var(--c-muted); }
.sdm-staff-alert { background-color: var(--c-bad-tint); border: 1px solid var(--c-bad); border-radius: var(--radius-btn); padding: 14px 18px; margin: 0 0 20px;
                   display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.sdm-staff-alert--ok { background-color: var(--c-ok-tint); border-color: var(--c-ok); }
.sdm-staff-btn, .sdm-staff-btn:link, .sdm-staff-btn:visited { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; background-color: var(--c-black);
  color: var(--c-brand); border-radius: var(--radius-md); text-decoration: none; font-size: var(--fs-1); }
.sdm-staff-btn--cyan, .sdm-staff-btn--cyan:link, .sdm-staff-btn--cyan:visited { background-color: var(--c-brand); color: var(--c-black); }
.sdm-staff-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 0 0 20px; }
.sdm-staff-kpi { background-color: var(--c-white); border: 1px solid var(--c-border); border-top: 4px solid var(--c-brand); border-radius: 14px; padding: 18px; }
.sdm-staff-kpi__label { color: var(--c-muted); font-size: var(--fs-1); }
.sdm-staff-kpi__n { font-size: 28px; font-weight: var(--fw-heavy); }
.sdm-staff-kpi__sub { color: var(--c-muted); font-size: 13px; }
.sdm-staff-row { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 20px; }
.sdm-panel { flex: 2 1 480px; min-width: 0; background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.sdm-panel--side { flex: 1 1 280px; padding: 18px 20px; }
.sdm-panel__head { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--c-border); }
.sdm-panel__title { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-bold); }
.sdm-panel--side .sdm-panel__title { margin-bottom: 16px; }
.sdm-meter { margin: 0 0 18px; }
.sdm-meter__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-1); margin: 0 0 6px; }
.sdm-meter__bar { height: 10px; background-color: var(--c-border); border-radius: var(--radius-round); overflow: hidden; }
.sdm-meter__bar > span { display: block; height: 100%; background-color: var(--c-ok); }
.sdm-meter__bar > span.sdm-meter__fill--warn { background-color: var(--c-warn-ink); }
.sdm-meter__bar > span.sdm-meter__fill--brand { background-color: var(--c-brand); }
.sdm-pct-0 { width: 0; } .sdm-pct-10 { width: 10%; } .sdm-pct-20 { width: 20%; } .sdm-pct-30 { width: 30%; }
.sdm-pct-40 { width: 40%; } .sdm-pct-50 { width: 50%; } .sdm-pct-60 { width: 60%; } .sdm-pct-70 { width: 70%; }
.sdm-pct-80 { width: 80%; } .sdm-pct-90 { width: 90%; } .sdm-pct-100 { width: 100%; }

/* ---- TABLES: black head, cyan text, alternate rows, own scroll box -------- */
.sdm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.sdm-table { width: 100%; border-collapse: collapse; font-size: 15px; background-color: var(--c-white); }
.sdm-table thead tr { background-color: var(--c-black); color: var(--c-brand); text-align: left; }
.sdm-table th { padding: 10px 16px; text-align: left; font-weight: var(--fw-bold); background-color: var(--c-black); color: var(--c-brand); }
.sdm-table td { padding: 12px 16px; border-top: 1px solid var(--c-border); vertical-align: top; }
.sdm-table tbody tr:nth-child(even) { background-color: var(--c-grey); }
.sdm-table td.sdm-table__due { color: var(--c-muted); }
.sdm-table td.sdm-table__act { text-align: right; }

/* ---- INNER APP PAGES: black top bar, white cards on grey ----------------- */
.sdm-appbar-top { background-color: var(--c-black); }
.sdm-appbar-top__inner { max-width: var(--container); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; }
.sdm-app-main { max-width: var(--container); margin: 0 auto; padding: 24px var(--gutter) 64px; box-sizing: border-box; }
@media (max-width: 600px) { .sdm-app-main { padding: 16px var(--gutter-phone) 48px; } }
.sdm-app .sdm-card, .sdm-app .card { border-radius: var(--radius-card); border: 1px solid var(--c-border); background-color: var(--c-white); padding: 24px; margin: 0 0 20px; box-shadow: none; }
.sdm-app .sdm-page { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 24px; margin: 0 0 20px; }
.sdm-app .sdm-page .sdm-card { border-radius: 14px; }
.sdm-app input[type=text], .sdm-app input[type=email], .sdm-app input[type=tel], .sdm-app input[type=number], .sdm-app input[type=date],
.sdm-app input[type=password], .sdm-app input[type=search], .sdm-app select, .sdm-app textarea, .sdm-app .form-control {
  min-height: 50px; border: 1px solid var(--c-muted); border-radius: 10px; padding: 12px 14px; font: inherit; width: 100%; max-width: 640px; box-sizing: border-box; }
.sdm-app input[type=checkbox], .sdm-app input[type=radio] { width: 22px; height: 22px; min-height: 0; }
.sdm-app label { display: block; font-weight: var(--fw-medium); margin: 16px 0 6px; }
.sdm-app button[type=submit], .sdm-app input[type=submit], .sdm-app .btn-primary {
  min-height: var(--target-main); padding: 0 28px; background-color: var(--c-brand) !important; color: var(--c-black) !important; border: 0 !important;
  border-radius: var(--radius-btn) !important; font: inherit; font-size: var(--fs-3) !important; font-weight: var(--fw-medium); cursor: pointer; }
.sdm-app table { border-collapse: collapse; }
.sdm-app .table thead th, .sdm-app table thead th { background-color: var(--c-black) !important; color: var(--c-brand) !important; padding: 10px 16px; text-align: left; }
.sdm-app table td { padding: 12px 16px; border-top: 1px solid var(--c-border); }
.sdm-app table tbody tr:nth-child(even) { background-color: var(--c-grey); }
.sdm-app .table-wrap, .sdm-app .table-responsive { overflow-x: auto; max-width: 100%; }
.sdm-app .messagelist { list-style: none; margin: 0 0 20px; padding: 0; }
.sdm-app .messagelist li { background-color: var(--c-ok-tint); border: 1px solid var(--c-ok); border-radius: 10px; padding: 12px 16px; margin: 0 0 8px; }
.sdm-app .messagelist li.error { background-color: var(--c-bad-tint); border-color: var(--c-bad); }

/* ---- OLDER NAMES, kept for the pages that still use them ---------------- */
.sdm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.sdm-tile { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 28px; background-color: var(--c-white); color: var(--c-black); text-decoration: none; }
a.sdm-tile:link, a.sdm-tile:visited { color: var(--c-black); text-decoration: none; }
.sdm-tile__title { font-size: 21px; font-weight: var(--fw-bold); }
.sdm-tile__text { color: var(--c-muted); }
.sdm-tile__go { margin-top: auto; font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.sdm-tile--dark { grid-column: 1 / -1; background-color: var(--c-black); color: var(--c-white); border-color: var(--c-black); border-radius: var(--radius-card-lg); padding: 36px; }
.sdm-tile--dark .sdm-tile__text { color: var(--c-muted-on-black); }
.sdm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.sdm-btn-main, .sdm-btn-main:link, .sdm-btn-main:visited { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-main); padding: 0 28px;
  background-color: var(--c-brand); color: var(--c-black); border: 0; border-radius: var(--radius-btn); text-decoration: none; font-size: var(--fs-3); font-weight: var(--fw-medium); }
.sdm-btn-main:hover { background-color: var(--c-brand-hover); }
.sdm-btn-ghost, .sdm-btn-ghost:link, .sdm-btn-ghost:visited { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-main); padding: 0 28px;
  background: transparent; color: var(--c-white); border: 1px solid var(--c-white); border-radius: var(--radius-btn); text-decoration: none; font-size: var(--fs-3); }
.sdm-btn-outline-black, .sdm-btn-outline-black:link, .sdm-btn-outline-black:visited { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-main);
  padding: 0 28px; background: transparent; color: var(--c-black); border: 2px solid var(--c-black); border-radius: var(--radius-btn); text-decoration: none; font-size: var(--fs-3); }
.sdm-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: start; }
.sdm-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.sdm-price { border: 1px solid var(--c-border); border-radius: 18px; padding: 28px; background-color: var(--c-white); }
.sdm-price__amount { display: block; font-size: 36px; font-weight: var(--fw-heavy); letter-spacing: -1px; }
.sdm-price__term { color: var(--c-muted); }
.sdm-next-card { background-color: var(--c-white); border: 2px solid var(--c-black); border-radius: var(--radius-card); padding: 16px; margin: 0 0 20px; }
.sdm-pill-amber { display: inline-block; background-color: var(--c-warn-tint); color: var(--c-black); border: 1px solid var(--c-warn-ink); border-radius: var(--radius-round); padding: 2px 10px; font-size: 12px; font-weight: var(--fw-bold); }
.sdm-placeholder { background-color: var(--c-warn-tint); padding: 0 var(--sp-1); }
label.sdm-inline, .sdm-inline label { display: inline; }

/* ---- SDM 05: small helpers the rebuilt pages use ------------------------- */
a.sdm-step--link, .sdm-public a.sdm-step--link { display: block; color: var(--c-black); text-decoration: none; }
a.sdm-step--link:hover { box-shadow: 0 0 0 2px var(--c-black); }
.sdm-grid--mb40 { margin-bottom: 40px; }
.sdm-eyebrow--gap { margin-top: 40px; }
.sdm-message { margin: 16px 0; }
.sdm-btn.sdm-btn--submit { font-weight: var(--fw-regular); }
.sdm-form .sdm-muted { margin: 0; }

/* ---- THE DOOR FORMS (register, sign in, password screens), phone card ---- */
.sdm-fieldset { border: 0; margin: 0; min-width: 0; }
.sdm-door .field, .sdm-door .sdm-field { margin: 0; }
.sdm-door label { display: block; font-weight: var(--fw-medium); margin: 0 0 6px; }
.sdm-door label.sdm-check { display: flex; font-weight: var(--fw-regular); margin: 0; }
.sdm-door input[type=text], .sdm-door input[type=email], .sdm-door input[type=tel], .sdm-door input[type=password], .sdm-door select {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; border: 1px solid var(--c-muted); border-radius: 10px; font: inherit; background-color: var(--c-white); }
.sdm-door .help, .sdm-help { margin: 6px 0 0; color: var(--c-muted); font-size: 13px; }
.sdm-door .why, .sdm-field-error { margin: 6px 0 0; background-color: var(--c-bad-tint); border: 1px solid var(--c-bad); border-radius: 10px; padding: 10px 12px; font-size: var(--fs-1); }
.sdm-door .why p, .sdm-field-error p { margin: 0; }
.sdm-door button[type=submit], .sdm-door .login_btn { width: 100%; min-height: var(--target-main); background-color: var(--c-brand); border: 0; border-radius: var(--radius-btn);
  color: var(--c-black); font: inherit; font-size: var(--fs-3); cursor: pointer; margin-top: 8px; }
.sdm-phone-foot--flush { padding: 8px 0 24px; }
.sdm-phone-step { display: flex; flex-direction: column; flex: 1; }
.sdm-phone-foot__after p { margin: 4px 0; }
.sdm-staff-top__brand, .sdm-staff-top__brand:link, .sdm-staff-top__brand:visited { color: var(--c-white) !important; }
.sdm-appbar-top__out, .sdm-appbar-top__out:link, .sdm-appbar-top__out:visited { color: var(--c-brand); text-decoration: none; font-size: 15px; padding: 0 8px; }
.sdm-staff__main h1:not(.sdm-staff-h1) { margin: 0 0 20px; font-size: 30px; font-weight: var(--fw-heavy); letter-spacing: -0.6px; }
.sdm-staff__main h2 { font-size: var(--fs-3); font-weight: var(--fw-bold); margin: 20px 0 12px; }
.sdm-staff__main table { width: 100%; border-collapse: collapse; background-color: var(--c-white); font-size: 15px; }
.sdm-staff__main table th { background-color: var(--c-black); color: var(--c-brand); padding: 10px 16px; text-align: left; }
.sdm-staff__main table td { padding: 12px 16px; border-top: 1px solid var(--c-border); }
.sdm-staff__main table tbody tr:nth-child(even) { background-color: var(--c-grey); }
a.sdm-staff-kpi, a.sdm-staff-kpi:link, a.sdm-staff-kpi:visited { display: block; color: var(--c-black); text-decoration: none; }

/* =========================================================================
   SDM 05B PART 1. ONE CARD SYSTEM, SITE-WIDE.
   Every card that names a service, a tool, an offer or an audience is ONE
   link (<a> around the whole card) with an action line at the bottom, a
   hover lift and a visible focus ring. Only purely informational cards
   (the 01-04 steps, stat cards, company details) stay unclickable.
     a) sdm-card--core    black, cyan pill: the entrepreneur (was --dark)
     b) sdm-card--accent  cyan background, black text, black icon tile with a
                          cyan line icon, black underlined action line --
                          every secondary service or audience card
     c) sdm-band-card     black head with a cyan title, white body
     d) sdm-card          white with a border, for neutral lists
   ========================================================================= */
.sdm-card--core { grid-column: 1 / -1; background-color: var(--c-black); color: var(--c-white); border: 0; border-radius: var(--radius-card-lg);
                  padding: 36px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; text-decoration: none; }
.sdm-card--core .sdm-card__body { flex: 1 1 420px; min-width: 0; display: block; }
a.sdm-card--core, .sdm-public a.sdm-card--core, a.sdm-card--core:hover { color: var(--c-white); }
/* SDM 05D: accent cards now look like the business opportunities cards
   (myapp/dashboard_identify_business_opportunities.html .qualification-card): white, a grey
   line border, 8px radius, the card shadow, and a 5px cyan bar down the left edge that widens
   to 8px on hover. Cyan is only ever a bar or the icon on black -- never text on white. */
.sdm-card--accent { background-color: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-grey-line); border-radius: var(--radius-md);
                    box-shadow: var(--shadow-card); padding: var(--sp-6) var(--sp-6) var(--sp-6) calc(var(--sp-6) + 5px);
                    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.sdm-card--accent::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background-color: var(--c-brand); transition: width .3s ease; }
a.sdm-card--accent:hover::before { width: 8px; }
a.sdm-card--accent, .sdm-public a.sdm-card--accent, a.sdm-card--accent:hover, a.sdm-card--accent:visited { color: var(--c-ink); text-decoration: none; }
.sdm-card--accent .sdm-card__title, .sdm-card--accent .sdm-door-card__title { color: var(--c-ink); font-size: var(--fs-4); font-weight: var(--fw-bold); margin: 0; }
.sdm-card--accent p, .sdm-card--accent .sdm-card__text { color: var(--c-grey-muted); font-size: var(--fs-2); line-height: var(--lh-body); margin: 0; }
.sdm-card--accent .sdm-icon-box { background-color: var(--c-black); color: var(--c-brand); }
.sdm-card__go { margin-top: auto; font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; display: inline-block; }
.sdm-card--accent .sdm-card__go { color: var(--c-ink); text-decoration: none; }
.sdm-card--core .sdm-card__go, .sdm-band-card__head + .sdm-band-card__body .sdm-card__go { text-decoration: underline; }
.sdm-card--core .sdm-card__go { color: var(--c-brand); }
a.sdm-band-card, .sdm-public a.sdm-band-card, a.sdm-band-card:visited, a.sdm-band-card:hover { color: var(--c-black); text-decoration: none; }
a.sdm-band-card .sdm-band-card__body { flex: 1; }
a.sdm-card, .sdm-public a.sdm-card, a.sdm-card:visited, a.sdm-card:hover { color: var(--c-black); text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
a.sdm-card--line, .sdm-public a.sdm-card--line, a.sdm-card--line:visited { color: var(--c-white); text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
a.sdm-card--line .sdm-card__go { color: var(--c-brand); }
.sdm-card-link, a.sdm-card, a.sdm-card--accent, a.sdm-card--core, a.sdm-card--dark, a.sdm-band-card, a.sdm-card--line, a.sdm-door-card,
a.sdm-phone-tile, a.sdm-staff-kpi, a.sdm-step--link, a.sdm-price-card {
  transition: transform .15s ease, box-shadow .15s ease; }
a.sdm-card:hover, a.sdm-card--accent:hover, a.sdm-card--core:hover, a.sdm-card--dark:hover, a.sdm-band-card:hover, a.sdm-card--line:hover,
a.sdm-door-card:hover, a.sdm-phone-tile:hover, a.sdm-staff-kpi:hover, a.sdm-step--link:hover, a.sdm-price-card:hover {
  transform: translateY(-3px); box-shadow: 0 12px 28px var(--c-shadow); }
a.sdm-card:focus-visible, a.sdm-card--accent:focus-visible, a.sdm-card--core:focus-visible, a.sdm-card--dark:focus-visible,
a.sdm-band-card:focus-visible, a.sdm-card--line:focus-visible, a.sdm-door-card:focus-visible, a.sdm-phone-tile:focus-visible,
a.sdm-staff-kpi:focus-visible, a.sdm-step--link:focus-visible, a.sdm-price-card:focus-visible {
  outline: 3px solid var(--c-black); outline-offset: 3px; box-shadow: 0 0 0 6px var(--c-brand); }
@media (prefers-reduced-motion: reduce) { a.sdm-card:hover, a.sdm-card--accent:hover, a.sdm-card--core:hover, a.sdm-band-card:hover { transform: none; } }
a.sdm-price-card, .sdm-public a.sdm-price-card, a.sdm-price-card:visited, a.sdm-price-card:hover { color: var(--c-black); text-decoration: none; }
.sdm-hero-meta { margin: 0 0 28px; color: var(--c-border); font-size: 17px; }
.sdm-hero-meta a { color: var(--c-brand); }
/* SDM 05E: the Standard Account card (a black core card that is not itself a link), its upgrades row,
   and the numbered sections of "The report you get". */
.sdm-offer { margin: 0; }
.sdm-offer .sdm-card__big { color: var(--c-white); }
.sdm-offer__ticks { margin: var(--sp-5) 0 0; }
.sdm-offer__buy { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.sdm-offer__price { margin: 0; font-size: var(--fs-4); font-weight: var(--fw-bold); color: var(--c-white); }
.sdm-offer__more { margin-top: var(--sp-6); }
.sdm-offer__more > .sdm-card { align-self: start; }
.sdm-report-list { margin: 0 0 var(--sp-6); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-3); }
/* SDM 05F: a course card on /services/training/ (a neutral card with a link line inside it). */
.sdm-course-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.sdm-course-card__list { margin: 0; padding-left: var(--sp-5); }
/* SDM 05F: a role on /work-with-rmk/ (a <details> that ?role= opens) and the eligibility checklist. */
.sdm-role__summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: var(--sp-2); min-height: 48px; }
.sdm-role__summary::-webkit-details-marker { display: none; }
.sdm-role__more { font-weight: var(--fw-medium); text-decoration: underline; }
.sdm-role[open] .sdm-role__more { display: none; }
.sdm-role__grid { margin-top: var(--sp-6); }
.sdm-role__list { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.sdm-role__head { margin: var(--sp-8) 0 var(--sp-4); }
.sdm-role__apply { margin-top: var(--sp-8); }
.sdm-checklist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.sdm-checklist__list li { display: flex; gap: var(--sp-2); align-items: center; min-height: var(--sp-8); }
.sdm-checklist__list .sdm-svg { color: var(--c-ok); }
.sdm-checklist__box { width: var(--sp-5); height: var(--sp-5); border: 2px solid var(--c-grey-muted); border-radius: var(--radius-md); flex: 0 0 auto; }

/* ---- SDM 05B PART 3. THE TOOL STATUS STRIP ------------------------------ */
.sdm-tool-strip { background-color: var(--c-black); color: var(--c-white); border-radius: var(--radius-card); padding: 20px 24px; margin: 0 0 20px;
                  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.sdm-tool-strip__main { flex: 1 1 360px; min-width: 0; }
.sdm-tool-strip__name { margin: 0 0 4px; font-size: 22px; font-weight: var(--fw-heavy); color: var(--c-brand); max-width: none; }
.sdm-tool-strip__gives { margin: 0 0 6px; color: var(--c-border); max-width: none; }
.sdm-tool-strip__gives strong { color: var(--c-white); }
.sdm-tool-strip__progress { margin: 0; color: var(--c-muted-on-black); font-size: var(--fs-1); }
.sdm-tool-strip__act { flex: 0 1 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sdm-tool-strip__btn, .sdm-tool-strip__btn:link, .sdm-tool-strip__btn:visited { min-height: var(--target-main); display: inline-flex; align-items: center; padding: 0 24px;
  background-color: var(--c-brand); color: var(--c-black) !important; border-radius: var(--radius-btn); text-decoration: none !important; font-size: 17px; font-weight: var(--fw-medium); }
.sdm-tool-strip__btn--outline, .sdm-tool-strip__btn--outline:link, .sdm-tool-strip__btn--outline:visited { background: transparent; color: var(--c-white) !important; border: 1px solid var(--c-white); }
.sdm-tool-strip__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sdm-tool-strip__ready { margin: 0; font-weight: var(--fw-heavy); color: var(--c-brand); }
.sdm-tool-strip__links { margin: 0; font-size: var(--fs-1); }
.sdm-tool-strip__links a, .sdm-tool-strip__links a:link, .sdm-tool-strip__links a:visited { color: var(--c-brand) !important; }
/* empty states inside a tool: what to do first, with one button */
.sdm-empty { background-color: var(--c-grey); border: 1px dashed var(--c-muted); border-radius: 14px; padding: 20px; margin: 12px 0; }
.sdm-empty p { margin: 0 0 12px; }

/* ---- SDM 05B PART 4. THE HELP CENTRE AND THE GUIDE PAGE ----------------- */
.sdm-help-search { display: flex; flex-wrap: wrap; gap: 12px; max-width: 720px; }
.sdm-help-search input { flex: 1 1 320px; min-width: 0; min-height: 56px; padding: 12px 16px; border: 0; border-radius: var(--radius-btn); font: inherit; font-size: var(--fs-3); }
.sdm-help-search .sdm-btn--search { min-height: 56px; }
.sdm-help-role { margin: 8px 0 16px; font-size: 21px; }
.sdm-faq--group { margin: 0 0 32px; }
.sdm-guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sdm-guide-step { background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 20px 22px; }
.sdm-guide-step p { margin: 8px 0 0; }
.sdm-guide-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sdm-guide-step__n { width: 40px; height: 40px; border-radius: 50%; background-color: var(--c-black); color: var(--c-brand); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-heavy); font-size: var(--fs-3); flex-shrink: 0; }
.sdm-guide-step__of { font-size: var(--fs-1); color: var(--c-muted); font-weight: var(--fw-medium); }
.sdm-guide-chip { display: inline-block; background-color: var(--c-grey); border: 1px solid var(--c-border); border-radius: var(--radius-round); padding: 4px 12px; font-size: var(--fs-1); font-weight: var(--fw-medium); }
.sdm-guide-chip--tap { background-color: var(--c-black); color: var(--c-brand); border-color: var(--c-black); font-size: 15px; }
.sdm-guide-step__wrong { background-color: var(--c-warn-tint); border-radius: 10px; padding: 10px 12px; }

/* ---- SDM 05B PART 5. ABOUT: the compact trust line; a "go elsewhere" link ---- */
.sdm-trust-line { background-color: var(--c-white); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.sdm-trust-line p { margin: 0; padding: 14px 0; font-size: var(--fs-1); color: var(--c-muted); text-align: center; }
.sdm-card__go--leave { color: var(--c-leave); text-decoration: none; }

/* ---- SDM 05B Part 7: six menu items on one header row; five cards on one row ---- */
.sdm-header__inner { flex-wrap: nowrap; }
.sdm-header .sdm-nav { flex: 1 1 auto; justify-content: center; flex-wrap: nowrap; }
.sdm-header .sdm-nav a { padding: 12px 10px; white-space: nowrap; }
@media (max-width: 1100px) { .sdm-header__inner { flex-wrap: wrap; } .sdm-header .sdm-nav { flex-wrap: wrap; } }
.sdm-grid--five { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---- LAYOUTFIX (rmk_ui 1.4.0): SDM'S OWN HEADER UNDER THE RMK CONNECT BAR ----------------------------------
   myapp/_sdm_site_header.html (sdm_look.sdm_site_header), with RMK_CONNECT_UI on. rmk_ui's components.css makes
   .rmk-siteheader sticky and folds [data-rmk-drawer] behind the Menu button below 900 px; the drawer's colours are
   SDM's: white on black, the current page cyan (--c-brand on --c-black, 12.87:1). On a desktop the nav's three groups
   sit in the header's own rows (display: contents): the public links beside the mark, the tool menu as the second
   black band (each heading's list opens under it on hover or keyboard focus), the account group only in the drawer. */
.sdm-siteheader { --rmk-drawer-bg: var(--c-black); --rmk-drawer-ink: var(--c-white); --rmk-drawer-current: var(--c-brand);
                  color: var(--c-white); }
.sdm-siteheader .sdm-header__inner { position: relative; }
.sdm-siteheader .sdm-nav a { text-decoration: none; }
.sdm-sitenav__public { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.sdm-sitenav__note { display: block; font-size: var(--fs-1); font-weight: var(--fw-regular); color: var(--c-muted); }
/* the "You are working on ..." banner (accounts/_acting_banner.html) is sticky on its own; under SDM's sticky header
   it would slide over it, so here it scrolls with the page, straight under the header. */
.sdm-siteheader ~ .sdm-acting { position: relative !important; }
.sdm-client-mode { background-color: var(--c-brand-tint); color: var(--c-black); padding: var(--sp-2) 0; }
@media (min-width: 900px) {
  .sdm-siteheader .sdm-header__inner { flex-wrap: wrap; row-gap: 0; }
  .sdm-siteheader .sdm-sitenav { display: contents; }
  .sdm-siteheader .sdm-brand { order: 1; }
  .sdm-siteheader .sdm-sitenav__public { order: 2; flex: 1 1 auto; justify-content: center; }
  .sdm-siteheader .sdm-header__actions { order: 3; }
  .sdm-siteheader .sdm-sitenav__tools { order: 4; flex: 1 1 100%; border-top: 1px solid var(--c-line-on-black); margin-top: 10px; }
  .sdm-siteheader .sdm-sitenav__label, .sdm-siteheader .sdm-sitenav__account { display: none; }
  .sdm-sitenav__list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 2px 0 0; list-style: none; }
  .sdm-sitenav__item { position: relative; list-style: none; }
  .sdm-sitenav__item--desk { margin-left: auto; }
  .sdm-siteheader .sdm-sitenav__item > a, .sdm-siteheader .sdm-sitenav__item > a:link, .sdm-siteheader .sdm-sitenav__item > a:visited {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px; color: var(--c-brand); font-size: 15px; }
  .sdm-siteheader .sdm-sitenav__item > a:hover, .sdm-siteheader .sdm-sitenav__item > a:focus-visible { color: var(--c-white); }
  .sdm-siteheader .sdm-sitenav__item > a[aria-current="page"] { color: var(--c-white); font-weight: var(--fw-bold); }
  .sdm-sitenav__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 260px; max-width: min(360px, 90vw);
                      max-height: 70vh; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none; background-color: var(--c-white);
                      border: 1px solid var(--c-border); border-radius: 10px; box-shadow: 0 12px 28px var(--c-shadow-strong); }
  .sdm-sitenav__item--desk .sdm-sitenav__sub { left: auto; right: 0; }
  .sdm-sitenav__item:hover > .sdm-sitenav__sub, .sdm-sitenav__item:focus-within > .sdm-sitenav__sub { display: block; }
  .sdm-siteheader .sdm-sitenav__sub a, .sdm-siteheader .sdm-sitenav__sub a:link, .sdm-siteheader .sdm-sitenav__sub a:visited {
    display: block; min-height: 44px; padding: 10px 16px; color: var(--c-black); font-size: 15px; white-space: normal; }
  .sdm-siteheader .sdm-sitenav__sub a:hover, .sdm-siteheader .sdm-sitenav__sub a:focus-visible { background-color: var(--c-brand-tint); color: var(--c-black); }
}
@media (max-width: 899px) {
  .sdm-siteheader .sdm-header__inner { flex-wrap: nowrap; padding: 10px var(--gutter-phone, 16px); gap: 12px; }
  .sdm-siteheader .sdm-brand__name { font-size: 17px; }
  .sdm-siteheader .sdm-header__actions { display: none; }
  .sdm-siteheader .rmk-drawer-toggle { color: var(--c-white); border-color: var(--c-brand); }
  .sdm-siteheader .sdm-sitenav__item--desk { display: none; }
  .sdm-siteheader [data-rmk-drawer].is-open .sdm-sitenav__public { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  /* one column that scrolls: the older ".sdm-header .sdm-nav" wrap/centre rules (SDM 05B) made a second column */
  .sdm-siteheader [data-rmk-drawer].is-open { flex-wrap: nowrap; justify-content: flex-start; }
  .sdm-siteheader [data-rmk-drawer].is-open a { padding: 12px 20px; white-space: normal; }
  .sdm-siteheader [data-rmk-drawer].is-open .sdm-sitenav__list { margin: 0; padding: 0; }
  .sdm-siteheader [data-rmk-drawer].is-open .sdm-sitenav__caret { display: none; }
  .sdm-siteheader [data-rmk-drawer].is-open .sdm-sitenav__sub a { padding-left: 40px; min-height: 48px; font-size: 16px; font-weight: 500;
    flex-direction: column; align-items: flex-start; justify-content: center; }
  .sdm-siteheader [data-rmk-drawer].is-open .sdm-sitenav__note { color: var(--c-muted-on-black); }
  .sdm-siteheader [data-rmk-drawer].is-open .sdm-sitenav__label { color: var(--c-muted-on-black); opacity: 1; }
}
@media (max-width: 360px) { .sdm-siteheader .sdm-brand__name { font-size: 15px; } .sdm-siteheader .sdm-mark { width: 36px; height: 36px; } }