/* standards.css - the credential surface on /company/standards, and nothing else.

   It is a THIN layer on top of legal.css, which already owns this page family's hero,
   reading measure, content blocks, prose links and contact card. What is genuinely new
   here is one component - the credential card - plus the small definition list that
   states what the three public claim types mean. Everything else on the page is the
   shared owners': chrome.css the bar and the footer, site.css the eyebrow and the
   buttons, animations.css the reveal, tokens.css every colour and every step of the
   spacing scale.

   Cascade per page:
   tokens.css -> base.css -> chrome.css -> site.css -> animations.css -> legal.css ->
   this.

   No colour, radius, spacing step or easing is written as a literal below: a page layer
   that invents its own palette is how a surface stops matching the product around it. */

/* ---------- what the three claim types mean ---------- */
/* A DEFINITION LIST because that is exactly what it is - three terms and what each one
   means on this page. The <div> wrapper per pair is what lets a term and its definition
   sit on one grid row without the row structure living in a class name.
   `auto-fit` gives one column on a phone and three on a wide reading measure with no
   breakpoint of its own, matching how .doc-grid behaves on the Legal Center. */
.claim-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--sp-4);margin:0 0 var(--sp-5)}
.claim-key>div{padding:var(--sp-4);border:1px solid var(--line-soft);border-radius:10px}
.claim-key dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--sp-2)}
.claim-key dd{margin:0;color:var(--ink-soft);font-size:.9rem}

/* ---------- one credential ---------- */
/* The card is a STATEMENT, not a link: a credential is described here in full, so there
   is no destination the whole card could sensibly navigate to, and making it clickable
   would put the two real links inside it (the standard's own explanation and our
   Accessibility Statement) inside another interactive element. That is why this is an
   <article> and .doc-card on the Legal Center is an <a> - two different jobs, two
   different elements, and neither borrows the other's skin.
   Same surface treatment as .doc-card so the two read as one product; the hover lift is
   deliberately absent, because nothing here responds to a pointer. */
.credential-card{border:1px solid var(--line);border-radius:12px;
  background:rgba(201,165,88,.03);padding:var(--sp-6);margin-bottom:var(--sp-4)}
.credential-card:last-child{margin-bottom:0}

/* The type label and the name are one unit: the label says which of the three kinds of
   claim this is, and it has to be read before the name, not after it. */
.credential-type{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--sp-2)}
.credential-name{font-family:var(--serif);font-weight:300;font-size:1.35rem;
  color:var(--ink);margin:0 0 var(--sp-4);border:0;padding:0}
.credential-body{color:var(--ink-soft);font-size:.94rem;margin:0 0 var(--sp-3);
  max-width:66ch}
/* Who published the specification and who is making the claim - the sentence that keeps
   "a standard we follow" from being read as "somebody certified us". Quiet, but it is
   the most important line on the card, so it stays at --ink-soft rather than the dimmer
   ink: it is small text, and --ink-dim is a decoration floor (tokens.css). */
.credential-issuer{color:var(--ink-soft);font-size:.82rem;margin:var(--sp-4) 0 0;
  padding-top:var(--sp-3);border-top:1px solid var(--line-soft);max-width:66ch}