/* ============================================================
   VoiceInsights Africa — Wave 3 trust, procurement and documentation
   ------------------------------------------------------------
   Trust Center, subprocessor register, Procurement Center, the
   governed document pack, the Help Center and the role guides.

   THIS EXTENDS THE WAVE 2 SYSTEM RATHER THAN REPLACING IT.

   wave2-public.css already carries the capability ledger — a row with a
   status rule down its left edge, its status in a word, and its limits
   inline at full weight. That is exactly the right shape for a trust
   claim and a procurement document, both of which are "here is a thing,
   here is how sure we are, here is what you should know".

   So Wave 3 pages load both stylesheets and reuse `.w2-row`,
   `.w2-status`, `.w2-limits` and `.w2-matrix` unchanged. Inventing a
   second visual language for the same idea would give a buyer two
   grammars to learn on one site.

   THE `w2-` PREFIX ON WAVE 3 PAGES IS A NAMING WART AND IS DELIBERATE.
   Renaming a shipped, gate-verified stylesheet across seven stamped
   pages to tidy a prefix is exactly the churn that trades real
   regression risk for a cosmetic gain. Recorded as debt instead.

   WHAT THIS FILE ADDS, because Wave 3 has shapes Wave 2 did not:
     the document row        a procurement artefact with its governance
     the evidence table      claim / status / verification, dense
     the doc-page frame      a governed document that prints cleanly
     the Help Center shell   sidebar, search, article, screenshot
     the screenshot figure   a product capture inside instructions
   ============================================================ */

/* ---------- Document rows -------------------------------------------------
   A procurement document is not a download link. It is an artefact with
   an owner, an audience, a classification and a state — and the state a
   buyer most needs to see is the one that says somebody else has to
   produce it. */

.w3-doc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem 1.25rem 1.75rem;
}
.w3-doc + .w3-doc { margin-top: .75rem; }
.w3-doc::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--border-strong);
}
.w3-doc[data-state="PUBLISHED"]::before { background: var(--accent); }
.w3-doc[data-state="AVAILABLE_ON_REQUEST"]::before { background: var(--accent-2); }
.w3-doc[data-state="IN_PREPARATION"]::before {
  background: repeating-linear-gradient(180deg, var(--accent-warm) 0 8px, transparent 8px 14px);
}
/* An item nobody here can produce reads as a boundary, not a to-do. */
.w3-doc[data-state="EXTERNAL_EVIDENCE_REQUIRED"]::before,
.w3-doc[data-state="NOT_YET_AVAILABLE"]::before {
  background: repeating-linear-gradient(135deg, var(--border-strong) 0 4px, transparent 4px 8px);
}

.w3-doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  margin-bottom: .4rem;
}
.w3-doc-head h3 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }
.w3-doc-purpose { margin: 0 0 .75rem; font-size: .94rem; line-height: 1.55; color: var(--text-muted); max-width: 74ch; }

.w3-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.6;
}
.w3-doc-meta b { color: var(--text-muted); font-weight: 600; }

.w3-doc-note {
  margin: .75rem 0 0;
  padding: .6rem .85rem;
  border-left: 3px solid var(--accent-warm);
  background: var(--vi-champagne-100);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text);
}

/* ---------- The readiness matrix ------------------------------------------
   A requirement is a different object from a document: it is a QUESTION a
   review team asks, with the documents that answer it underneath. So it
   is drawn as a question with its evidence rather than as another card in
   the document list — a buyer scanning for "can they clear our security
   assessment" should not have to reassemble the answer from a pack.

   The states reuse the shared status pill so a buyer learns one grammar
   across the whole site, and the rule down the left edge carries the same
   meanings as `.w3-doc`: solid where it is answered, dashed where nobody
   here can answer it. */

.w3-readiness-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
.w3-readiness-summary > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .9rem 1rem;
}
.w3-readiness-summary dt {
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.w3-readiness-summary dd {
  margin: .25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text);
}

.w3-reqs { display: grid; gap: .75rem; }

.w3-req {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem 1.15rem 1.75rem;
}
.w3-req::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--border-strong);
}
.w3-req[data-status="LIVE"]::before { background: var(--accent); }
.w3-req[data-status="SUPPORTED"]::before { background: var(--accent-2); }
.w3-req[data-status="NOT_AVAILABLE"]::before {
  background: repeating-linear-gradient(135deg, var(--border-strong) 0 4px, transparent 4px 8px);
}

.w3-req-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  margin-bottom: .3rem;
}
.w3-req-head h3 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }

/* The reviewer's own words, so they can find their line on our page. */
.w3-req-question {
  margin: 0 0 .9rem;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 74ch;
}

.w3-req-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem 1.75rem;
}
.w3-req-body h4 {
  margin: 0 0 .35rem;
  font-size: var(--text-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.w3-req-body p { margin: 0; font-size: .92rem; line-height: 1.6; }
.w3-req-owner { margin-top: .4rem !important; font-size: var(--text-xs) !important; color: var(--text-dim); }
.w3-req-owner b { color: var(--text-muted); font-weight: 600; }

.w3-ev { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.6; }
.w3-ev li + li { margin-top: .2rem; }
.w3-ev-state {
  display: inline-block;
  margin-left: .35rem;
  font-size: var(--text-xs);
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---------- Evidence table ------------------------------------------------
   Denser than the ledger, because a security reviewer reads fourteen
   claims in one pass and does not want fourteen cards. */

.w3-evidence caption { text-align: left; }
.w3-evidence td b { font-weight: 600; color: var(--text); }
.w3-evidence .w3-claim { max-width: 52ch; }
.w3-evidence .w3-verify { font-size: var(--text-xs); color: var(--text-dim); }


/* ---------- A matrix inside a governed document -------------------------
   The document frame is 720px because that is a reading measure for
   prose. The capability summary is a three-column matrix that needs
   about 1000px, so inside the frame its third column — the one that says
   what each number MEANS — was clipped mid-word at every desktop width,
   with no scrollbar and no fade to say so.

   Nothing caught it. The page reports zero horizontal overflow, because
   the scroll region contains it; axe reports nothing, because a clipped
   cell is not a violation; and the region is keyboard-reachable, so the
   content was technically available. It was simply invisible, which is
   the same class of defect as an unloaded stylesheet.

   So the matrix breaks the measure on viewports that have the room. The
   negative inline margin is symmetric, so the table stays centred on the
   column it came from. */
@media (min-width: 900px) {
  .w3-docframe .w2-matrix-scroll {
    --w3-matrix-width: min(1040px, calc(100vw - 5rem));
    width: var(--w3-matrix-width);
    margin-inline: calc((100% - var(--w3-matrix-width)) / 2);
  }
}

/* ---------- Every governed state gets its own treatment -----------------
   Wave 2 shipped a page whose entire argument was that a language can be
   Validated for one capability and In validation for another, while four
   of that vocabulary's five states rendered as identical transparent
   pills. G-PUBLIC-TRUTH-3 was written after it.

   Wave 3 introduced two more vocabularies and reproduced the defect: five
   document states and four readiness states mapped onto three pill
   treatments, so "Not yet available" and "Requires an independent party"
   looked the same — on the page whose whole point is that those two are
   different problems with different owners.

   The pills below key off the GOVERNED state rather than the mapped
   status, so a state added to either registry has to be styled here or
   G-PUBLIC-TRUTH-3 fails. */

/* Nobody here can produce it: an outward boundary, not a to-do. */
.w2-status[data-state="EXTERNAL_EVIDENCE_REQUIRED"],
.w2-status[data-readiness="REQUIRES_INDEPENDENT_PARTY"] {
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--text-muted);
  background: transparent;
}

/* It does not exist yet, and it is ours to make exist. */
.w2-status[data-state="NOT_YET_AVAILABLE"],
.w2-status[data-readiness="NOT_AVAILABLE"] {
  border-style: solid;
  border-color: var(--border-strong);
  color: var(--text-dim);
  background: var(--surface-2);
}

/* Being written — the same "in motion" language the document rule uses. */
.w2-status[data-state="IN_PREPARATION"] {
  border-color: var(--accent-warm);
  /* --accent-warm is the decorative marigold and fails contrast as TEXT at
   * 2.95:1 on the ivory ground; --accent-warm-text exists for exactly this
   * and carries 5.72:1. Caught by axe against the deployed origin, not by
   * reading the stylesheet. */
  color: var(--accent-warm-text);
  background: transparent;
  border-style: dashed;
}

/* It exists; the gate is an NDA rather than the work. */
.w2-status[data-state="AVAILABLE_ON_REQUEST"] {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: transparent;
}

/* Every document this requirement rests on is published or available today.
   Stated explicitly rather than inherited from the shared LIVE pill, because
   G-PUBLIC-TRUTH-3 requires a rule per governed VALUE — a state that renders
   correctly only by borrowing another vocabulary's treatment is a state
   nobody will notice losing it. */
.w2-status[data-readiness="READY"] {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Partly answered. Distinct from both "ready" and "nobody has done it". */
.w2-status[data-readiness="PARTIAL"] {
  border-color: var(--accent-warm);
  color: var(--accent-warm-text);
  background: transparent;
}


/* ---------- The five integration states, told apart ---------------------
   G-INTEGRATION-1 exists to hold one distinction: implementing a format
   is not integrating with a system. The ledger rendered "Configurable"
   and "Format implemented" as the same pill, and "Designed" and "Not
   available" as another same pill — so the page whose entire argument is
   that distinction showed a reader two pairs of identical badges.

   The label was always right. The treatment was not, which is the exact
   shape of the Wave 2 language-state defect. */

/* Moving data today. */
.w2-status[data-integration-state="LIVE"] {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Real, and set up with your team during implementation. */
.w2-status[data-integration-state="CONFIGURABLE"] {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: transparent;
}

/* We can read or write the format and have contacted no such server. The
   dashed edge is the same signal the procurement pack uses for "somebody
   else has to close this" — here, the somebody else is your deployment. */
.w2-status[data-integration-state="FORMAT_IMPLEMENTED"] {
  border-style: dashed;
  border-color: var(--accent-warm);
  color: var(--accent-warm-text);
  background: transparent;
}

/* Specified, not built. */
.w2-status[data-integration-state="DESIGNED"] {
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--text-muted);
  background: transparent;
}

/* Neither format support nor a client. */
.w2-status[data-integration-state="NOT_AVAILABLE"] {
  border-color: var(--border-strong);
  color: var(--text-dim);
  background: var(--surface-2);
}


/* ---------- Target size where a link is not inline -----------------------
   WCAG 2.2 2.5.8 exempts a target inside a run of text, and most links on
   these pages are exactly that. These are not: a link that is the sole
   content of a list item, of a paragraph, or of a breadcrumb step is a
   target in a list of targets, which is the case the criterion is aimed at.

   Measured at 19–20px against the deployed origin. Padding rather than a
   min-height alone, so the row keeps its rhythm rather than growing a gap
   the reader can see. */
.w3-ev a,
.w3-req-body a,
.w3-track-guide a,
.w3-session-covers a,
.w2-page .w2-section-intro > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: .15rem;
}

/* ---------- Training tracks -----------------------------------------------
   A track is a sequence, and unlike most numbered lists on this site it
   genuinely is one: session two assumes session one happened. So the
   numbering here is information, not decoration — which is the only
   condition under which it earns its place.

   The session is drawn as a small record rather than a card: a trainer
   reads down a column checking off what was covered and what the trainee
   could do at the end, and cards force that reading sideways. */

.w3-track {
  margin: 2rem 0;
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.w3-track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1rem;
}
.w3-track-head h3 { margin: 0; font-size: 1.12rem; letter-spacing: -.01em; }
.w3-track-time {
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: .04em;
  white-space: nowrap;
}
.w3-track-audience { margin: .45rem 0 .2rem; font-size: .95rem; line-height: 1.6; }
.w3-track-format,
.w3-track-prereq {
  margin: .2rem 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.w3-track-prereq b { color: var(--text); font-weight: 600; }
.w3-track-guide { margin: 1rem 0 0; font-size: .9rem; }

.w3-session {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.w3-session-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem .9rem;
}
.w3-session-head h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
/* The number carries the order, and the order is real: session two assumes
   session one happened. */
.w3-session-n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--vi-champagne-100, var(--surface-2));
  border: 1px solid var(--border);
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  color: var(--text-muted);
}
.w3-session-time { font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; }

.w3-session-covers {
  margin: .4rem 0 .6rem 2.05rem;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.w3-session-body {
  margin: 0 0 0 2.05rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .5rem 1.5rem;
}
.w3-session-body dt {
  font-size: var(--text-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.w3-session-body dd { margin: .2rem 0 0; font-size: .92rem; line-height: 1.6; }

@media (max-width: 600px) {
  .w3-session-covers, .w3-session-body { margin-left: 0; }
}

/* ---------- The governed document frame -----------------------------------
   A procurement document is going to be printed, saved and attached to a
   tender. It needs a masthead a reader can cite and a print rendering
   that does not carry navigation into a PDF. */

.w3-docframe {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 3rem var(--w2-gutter, 5vw) 4rem;
}
.w3-masthead {
  border-top: 3px solid var(--accent);
  padding-top: 1.25rem;
  margin-bottom: 2rem;
}
.w3-masthead h1 { font-size: var(--text-xl); margin: 0 0 .6rem; }
.w3-masthead-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .6rem 1.5rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.w3-masthead-meta dt { color: var(--text-dim); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.w3-masthead-meta dd { margin: .15rem 0 0; color: var(--text); }

.w3-docframe h2 { font-size: 1.25rem; margin: 2.25rem 0 .7rem; }
.w3-docframe h3 { font-size: 1.02rem; margin: 1.5rem 0 .5rem; }
.w3-docframe p, .w3-docframe li { line-height: 1.7; }
.w3-docframe ul, .w3-docframe ol { padding-left: 1.2rem; }
.w3-docframe li + li { margin-top: .35rem; }

@media print {
  .pub-nav, .pub-footer, .public-trust-strip, .skip-link, .w3-print-hide { display: none !important; }
  .w3-docframe { max-width: none; padding: 0; }
  a[href^="/"]::after { content: " (voiceinsightsafrica.com" attr(href) ")"; font-size: .8em; color: #555; }
  .w3-masthead { border-top-color: #000; }
}

/* ---------- Help Center ---------------------------------------------------
   Product documentation, not a marketing page: a persistent index on the
   left, the article in the middle, and the screenshot doing the
   explaining. */

.w3-help {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 3rem;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 2rem var(--w2-gutter, 5vw) 4rem;
  align-items: start;
}
.w3-help-nav {
  position: sticky;
  top: 1.5rem;
  font-size: var(--text-sm);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.w3-help-nav h2 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 1.25rem 0 .5rem;
}
.w3-help-nav h2:first-child { margin-top: 0; }
.w3-help-nav ul { list-style: none; margin: 0; padding: 0; }
.w3-help-nav a {
  display: block;
  padding: .4rem .6rem;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
}
.w3-help-nav a:hover { background: var(--surface-2); color: var(--text); }
.w3-help-nav a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}

.w3-help-article { min-width: 0; max-width: 76ch; }
.w3-help-article h1 { font-size: var(--text-xl); margin: 0 0 .6rem; }
.w3-help-article > .lead { font-size: 1.08rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 2rem; }
.w3-help-article h2 { font-size: 1.2rem; margin: 2.5rem 0 .7rem; }
.w3-help-article h3 { font-size: 1.02rem; margin: 1.75rem 0 .5rem; }
.w3-help-article p, .w3-help-article li { line-height: 1.7; }

.w3-role-badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .32em .8em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  margin-bottom: .9rem;
}

/* Numbered steps. The number is a real ordinal — these ARE a sequence,
   which is the one case where numbering encodes something true. */
.w3-steps { list-style: none; counter-reset: w3step; margin: 1.25rem 0; padding: 0; }
.w3-steps > li {
  counter-increment: w3step;
  position: relative;
  padding: 0 0 1.5rem 3rem;
  border-left: 1px solid var(--border);
  margin-left: 1rem;
}
.w3-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.w3-steps > li::before {
  content: counter(w3step);
  position: absolute;
  left: -1rem;
  top: -.15rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.w3-steps > li > strong { display: block; margin-bottom: .35rem; font-size: 1rem; }

.w3-note, .w3-warn {
  margin: 1.25rem 0;
  padding: .85rem 1.1rem;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: .94rem;
  line-height: 1.6;
}
.w3-note { border-left: 3px solid var(--accent-2); background: var(--surface-2); }
.w3-warn { border-left: 3px solid var(--accent-warm); background: var(--vi-champagne-100); }
.w3-note b, .w3-warn b { display: block; margin-bottom: .2rem; }

/* A screenshot inside instructions. Same provenance discipline as the
   marketing captures: an image of an interface with no route, role and
   date beside it is indistinguishable from an illustration. */
.w3-shot { margin: 1.5rem 0; }
.w3-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  box-shadow: var(--elevation-1);
}
.w3-shot figcaption {
  margin-top: .6rem;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: center;
}
.w3-shot figcaption b { color: var(--text-muted); font-weight: 600; }
/* A phone capture is portrait and would otherwise fill the column. */
.w3-shot-phone img { max-width: 320px; }

.w3-next {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.w3-next a {
  flex: 1 1 240px;
  padding: .9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}
.w3-next a:hover { border-color: var(--accent); }
.w3-next span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

/* ---------- Role and topic index ------------------------------------------ */

.w3-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.w3-card {
  display: block;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.w3-card:hover { border-color: var(--accent); }
.w3-card h3 { font-size: 1.02rem; margin: 0 0 .35rem; }
.w3-card p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-muted); }
.w3-card-role {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-2-text);
  display: block;
  margin-bottom: .3rem;
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
  .w3-help { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  /* The index stops being a sticky sidebar competing for a third of a
     390px screen, and becomes a wrapped list of chips. Where it sits in
     the reading order is decided a few rules below. */
  .w3-help-nav { position: static; max-height: none; }
  .w3-help-nav ul { display: flex; flex-wrap: wrap; gap: .35rem; }
  .w3-help-nav a { border: 1px solid var(--border); }

  /* ON A NARROW VIEWPORT THE ARTICLE COMES FIRST AND THE INDEX FOLLOWS IT.
     Nineteen destinations stacked above the content cost a reader who landed
     on one guide from a search result a full screen of scrolling before the
     first word of what they came for — and the migration made that worse on
     sixteen pages at once, because those pages used to carry a short on-page
     rail instead of the whole site index.

     Reordered rather than collapsed. A <details> would need an open state that
     is right at both widths, and the state a reader leaves it in on a phone is
     then wrong on a tablet; source order stays the reading order, every link
     stays in the DOM and in the tab sequence, and the index lands exactly where
     "what else is there" is the question a reader has. */
  .w3-help { display: flex; flex-direction: column; }
  .w3-help-article { order: 1; }
  .w3-help-nav {
    order: 2;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    padding-bottom: 0;
    border-bottom: 0;
    border-top: 1px solid var(--border);
  }
  .w3-help-nav h2:first-child { margin-top: 0; }
}

@media (max-width: 640px) {
  .w3-doc { padding: 1.1rem 1rem 1.1rem 1.4rem; }
  .w3-steps > li { padding-left: 2.6rem; }
  .w3-shot-phone img { max-width: 100%; }
}

/* Wave 3 surfaces inherit the platform focus ring rather than defining
   one, and the sticky index must not trap a keyboard user. */
.w3-help a:focus-visible,
.w3-doc a:focus-visible,
.w3-docframe a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}