/* =========================================================================
   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 { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--sp-4); }

/* ---- 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) {
  .btn-primary, .btn-secondary, .brand-go, .brand-leave, button, 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); }
.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); }
.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; }
.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)); }