/* ==========================================================================
   IPSB — institutional accreditation (/corp/)
   --------------------------------------------------------------------------
   Additions only. The corporate pages load tokens.css, base.css,
   components.css and landing.css first and reuse .hero, .facts, .why-grid,
   .cert-grid, .track-card, .ruler-*, .quotes, .about-grid and .cta-band
   unchanged. Everything here is a pattern the practitioner side does not
   have: an institution certificate, the review timeline, the standard's
   contents list, the open register table and the account tab strip.
   No new colour or typeface — tokens only.
   ========================================================================== */

/* --- the institution certificate ---------------------------------------
   Same document as .cert, but the holder is an organisation: the name runs
   long, and a programme line sits under it. */
.cert.is-institution .name { font-size: 1.42rem; line-height: 1.16; margin: .3rem 0 .1rem; }
.cert.is-institution .sub {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* --- the hero's register line -------------------------------------------
   `.hero-trust` is a flex row, which was right when it held one run of text.
   The institutional line emboldens its two counts, and each <b> became a flex
   item of its own: the sentence broke into columns with gaps in the middle of
   it. Keeping the whole sentence in one child restores normal inline flow, and
   matters most in Russian, where the counts sit mid-clause. */
.hero-trust .ht-line { flex: 1; min-width: 0; }
.hero-trust .ht-line b { color: var(--ink-2); font-weight: 600; }

/* --- the standards grid -------------------------------------------------
   Six standards form a stable two-column catalogue rather than a three-card
   row whose density changes when one standard opens or closes. */
.cert-grid.is-standards { grid-template-columns: repeat(2, 1fr); }
/* Every card ends with the same two blocks — the fee, then one action — so the last
   line of two cards standing side by side lands at the same height whether the action
   is a button or the one-line "tell me when it opens" note. */
.cert-grid.is-standards .track-card .cta { display: flex; flex-direction: column; }
.cert-grid.is-standards .track-card .cta > .btn,
.cert-grid.is-standards .track-card .cta > .corp-card-note { min-height: 2.85rem; margin: 0; }
@media (max-width: 560px) {
  .cert-grid.is-standards { grid-template-columns: 1fr; }
}

/* --- fee line on a standard card ----------------------------------------
   Every card carries its own fee, because the six standards are not priced
   alike. The fee sits above the action so the reader has the number before the
   button, and a closed card labels it as the fee that will apply on opening.
   Left-aligned like the rest of the card and like the practitioner card's
   closed action, rather than centred against the button. */
.corp-card-fee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: .1rem .35rem;
  margin-bottom: .9rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.corp-card-fee s { color: var(--faint); }
.corp-card-fee b { color: var(--ink-2); font-size: var(--fs-md); font-family: var(--font-display); font-weight: 500; }
.corp-card-fee .lbl {
  flex: 0 0 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .15rem;
}
.corp-card-note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --- the four-stage journey (inc/corp_journey.php) ----------------------
   One graphic, two jobs. Full width it explains the process on the landing
   page and above the paywall; `.is-compact` turns the same markup into a rail
   inside the funnel, where `.is-done / .is-now / .is-todo` say where you are.

   Four ruled columns, the same construction as `.why-col` on the practitioner
   landing page. The rule is what carries the sequence, so nothing has to be
   centred and the four left edges line up however long a translation runs. The
   rule also does the progress job the numbered circles used to: brass behind
   the stages already passed, plain behind the ones still to come. */
/* The four titles, descriptions and meta lines are never the same length, and in
   Russian rarely even the same number of lines. Each column is a subgrid of the four
   shared rows, so the parts line up across the row instead of drifting into four
   unrelated blocks. */
.corp-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  gap: 2rem 1.8rem;
  margin-top: 3rem;
  /* The paywall centres its own heading and lede. A ruled column set ragged on both
     sides loses the shared left edge that makes the four read as one sequence, so the
     stages opt out of whatever the surrounding section does. */
  text-align: left;
}
.cj-stage {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--line-2);
}
.cj-n {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--faint);
}
.cj-tick { width: .85rem; height: .85rem; color: var(--brass-deep); }
.cj-stage h4 { margin: .55rem 0 .45rem; font-size: var(--fs-md); line-height: 1.2; }
.cj-stage p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.cj-meta {
  display: block;
  align-self: end;
  padding-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Only a journey that somebody is actually standing in gets emphasis. On the
   landing page no stage is current, so all four are drawn identically. */
.cj-stage.is-done { border-top-color: var(--brass); }
.cj-stage.is-done .cj-n { color: var(--brass-deep); }
.cj-stage.is-now { border-top-color: var(--ink); }
.cj-stage.is-now .cj-n { color: var(--ink-2); }
.cj-stage.is-now h4 { color: var(--ink); }
.cj-stage.is-todo { opacity: .5; }

/* The rail: the same four rules, numbers and titles only, so two shared rows. */
.corp-journey.is-compact { margin: 0 0 2.4rem; gap: 1rem; grid-template-rows: auto 1fr; }
.corp-journey.is-compact .cj-stage { grid-row: span 2; padding-top: .7rem; }
.corp-journey.is-compact .cj-n { font-size: .66rem; }
.corp-journey.is-compact h4 { margin: .35rem 0 0; font-size: var(--fs-xs); font-family: var(--font-sans); font-weight: 600; }

/* The fee step draws the full graphic inside the narrow funnel column, where four
   descriptive columns are about eighteen characters wide in Russian. Two columns there;
   four only where the section has the whole page to work with. */
.corp-fee .corp-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.4rem; }

@media (max-width: 900px) {
  .corp-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .corp-journey { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .corp-journey.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}

/* A second subject inside one section, separated by a rule rather than by a
   change of background: the page alternates paper tones section by section,
   and a third tone in the middle of one reads as a mistake. */
.corp-sub {
  margin-top: 3.4rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--line);
  max-width: 62rem;
}
.corp-sub h3 { margin: 0 0 .9rem; max-width: 30ch; }
.corp-sub .lede { max-width: 62ch; }

/* --- what you will be asked for (inc/corp_evidence.php) -----------------
   A numbered list of documents, not a feature grid: the reader is checking
   whether they can lay hands on each one, which is a linear task. */
.corp-evidence { margin-top: 2.2rem; }
.ce-h { margin: 0 0 .3rem; font-size: var(--fs-sm); color: var(--ink-2); }
.ce-p { margin: 0 0 1rem; font-size: var(--fs-sm); color: var(--muted); }
.ce-list { list-style: none; margin: 0; padding: 0; counter-reset: ce; }
.ce-item {
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  gap: 0 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.ce-item:last-child { border-bottom: 1px solid var(--line); }
.ce-doc { color: var(--brass-deep); }
.ce-doc svg { width: 1.35rem; height: 1.35rem; }
.ce-item b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-base); color: var(--ink-2); }
.ce-help { display: block; margin-top: .2rem; font-size: var(--fs-sm); color: var(--muted); }
.ce-fmt {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.ce-extra { margin-top: 1.8rem; }
.ce-extra > summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    padding: .6rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.ce-extra > summary .ce-count { margin-left: auto; }
/* A flex summary loses its disclosure triangle in Chrome, and a row that opens has to
   look like one. The caret is drawn instead and turned when the section is open. */
.ce-extra > summary { list-style: none; }
.ce-extra > summary::-webkit-details-marker { display: none; }
.ce-extra > summary::before {
    content: '';
    width: .42rem; height: .42rem;
    border-right: 1.5px solid var(--brass-deep);
    border-bottom: 1.5px solid var(--brass-deep);
    transform: rotate(-45deg);
    transition: transform .15s ease;
    flex: none;
}
.ce-extra[open] > summary::before { transform: rotate(45deg); }
.ce-extra[open] > summary { border-bottom-color: transparent; }
.ce-count { color: var(--muted); font-family: var(--font-mono, inherit); font-size: var(--fs-xs, .75rem); }
.ce-extra > p { margin-top: .7rem; }
.ce-extra h4 { margin: 0 0 .3rem; font-size: var(--fs-sm); color: var(--ink-2); }
.ce-extra p { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--muted); }
.ce-extra ul { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--muted); }
.ce-extra li { margin-bottom: .2rem; }
.ce-note { margin-top: 1.6rem; font-size: var(--fs-sm); color: var(--muted); }

/* --- the money-back guarantee (inc/corp_guarantee.php) ------------------ */
.corp-guarantee {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 1.8rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--brass);
  border-radius: var(--r);
  background: var(--brass-soft);
}
.cg-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  color: var(--brass-deep);
}
.cg-icon svg { width: 1.4rem; height: 1.4rem; }
.corp-guarantee b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-base); color: var(--ink-2); }
.corp-guarantee span { display: block; margin-top: .25rem; font-size: var(--fs-sm); color: var(--brass-deep); }

/* --- what the standard asks for ----------------------------------------- */
.corp-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.6rem;
  margin-top: 2.6rem;
}
.corp-check { padding-left: 1.5rem; position: relative; }
.corp-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 6px;
  height: 6px;
  background: var(--brass);
  transform: rotate(45deg);
}
.corp-check h4 { margin: 0 0 .3rem; font-size: var(--fs-sm); color: var(--ink-2); }
.corp-check p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* --- the standing disclaimer -------------------------------------------
   Deliberately plain and unmissable rather than styled like a footnote. */
.corp-note {
  margin-top: 2.4rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text);
}
.corp-note b { color: var(--ink-2); }
.corp-note p { margin: 0; }
.corp-note p + p { margin-top: .6rem; }

/* --- open register ------------------------------------------------------ */
.corp-reg-wrap {
  margin-top: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow-x: auto;
}
.corp-reg { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.corp-reg th {
  text-align: left;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.corp-reg td { padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.corp-reg tr:last-child td { border-bottom: 0; }
.corp-reg .inst { color: var(--ink-2); font-weight: 600; }
.corp-reg .prog { color: var(--muted); }
.corp-reg .ref { font-family: var(--font-mono); font-size: .74rem; color: var(--brass-deep); white-space: nowrap; }
.corp-reg-empty { padding: 2.6rem 1.4rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.corp-reg-count { margin-top: 1rem; font-size: var(--fs-xs); color: var(--faint); }

/* --- register filters and paging ---------------------------------------- */
.reg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  align-items: flex-end;
  margin: 2.2rem 0 0;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
/* Every filter cell shares the row evenly and its control fills the cell, so the widths
   are the same whatever a translation does to the longest option label. */
.reg-filters > div { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 11rem; min-width: 11rem; }
.reg-filters > div.wide { flex: 1.4 1 14rem; }
.reg-filters > div.actions { flex: 0 0 auto; flex-flow: row wrap; gap: .5rem; min-width: 0; }
.reg-filters select, .reg-filters input[type="search"] { width: 100%; }
.reg-filters label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.reg-filters select,
.reg-filters input[type="search"] {
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  min-height: 2.6rem;
}
.reg-filters .btn { min-height: 2.6rem; }
.reg-pager { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.reg-pager-at { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); }

/* --- shared shell for the corporate funnel pages ------------------------ */
.corp-narrow { max-width: 54rem; }
.corp-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-sm);
}
.corp-panel h1 { font-size: var(--fs-2xl); margin: .7rem 0 .6rem; }
/* A panel that carries a message rather than a step of the funnel: no brass edge, since
   the brass is the cue that something is being applied for. */
.corp-panel.is-plain { border-top: 1px solid var(--line); }
.corp-panel.is-center { text-align: center; }
.corp-panel.is-center .seal { margin: 0 auto .6rem; }
.corp-panel.is-center .rib { text-align: center; }
.corp-panel.is-creds { margin-top: 1.4rem; }
.corp-panel.is-creds h3 { font-size: var(--fs-lg); margin: .6rem 0 .4rem; }
.corp-panel .actions { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.corp-alert {
  margin: 0 0 1.6rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--wrong-line);
  border-radius: var(--r);
  background: var(--wrong-bg);
  color: #8f2f28;
  font-size: var(--fs-sm);
}
.corp-alert.is-ok { border-color: var(--correct-line); background: var(--correct-bg); color: #13633b; }
.corp-ref-line { margin-top: 1.2rem; font-size: var(--fs-xs); color: var(--faint); }

/* A form that comes back with something to correct is posted to its own anchor, so the
   browser stops at the message instead of at the top of a page the reader has already
   read. The margin keeps it off the very edge of the viewport. */
.corp-apply-step,
.corp-dos-body { scroll-margin-top: 1.4rem; }

/* --- form controls -----------------------------------------------------
   Built on .form-grid / .field / .input / .select from quiz.css. Only what a
   dossier needs and an examination does not is defined here. */
.corp-grid { margin-top: 1.8rem; }
.corp-fs-head {
  margin: 1.4rem 0 -.4rem;
  font-size: var(--fs-md);
  color: var(--ink-2);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.field .req { color: var(--brass-deep); margin-left: .25em; }
/* Said in a word rather than by the absence of an asterisk. Most documents on these
   standards are optional, and a reader who cannot tell which three are not will assume
   the worst of all thirty. */
.corp-optional {
  margin-left: .5em;
  padding: .1em .55em;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: .12em;
}
.corp-help { display: block; margin-top: .4rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.corp-help.is-above { margin: -.2rem 0 .8rem; }
.corp-tpl a { color: var(--brass-deep); text-decoration: underline; text-underline-offset: .18em; }
.corp-textarea { min-height: 4.6rem; line-height: 1.55; resize: vertical; }

.corp-opts { display: flex; flex-direction: column; gap: .5rem; }
.corp-opts.is-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.4rem; }
.corp-opts.is-chips { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.corp-opt { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); cursor: pointer; }
.corp-opt input { margin-top: .18em; accent-color: var(--ink); }
/* A chip is a radio with its dot hidden: the label is the control. */
.corp-opts.is-chips .corp-opt {
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: .45em 1em;
  background: var(--surface);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.corp-opts.is-chips .corp-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.corp-opts.is-chips .corp-opt:hover { border-color: var(--ink); }
.corp-opts.is-chips .corp-opt:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.corp-opts.is-chips .corp-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.corp-consent {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  cursor: pointer;
}
.corp-consent input { margin-top: .28em; accent-color: var(--ink); }

.corp-files { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .4rem; }
.corp-files li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.corp-files a { color: var(--ink-2); overflow-wrap: anywhere; }
.corp-file-x {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wrong);
  cursor: pointer;
}
.corp-file-x:hover { text-decoration: underline; }
.corp-file { padding: .55rem .7rem; font-size: var(--fs-sm); }

/* --- repeaters ---------------------------------------------------------- */
.corp-rep { border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: .4rem; }
.corp-rep-row { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; margin-top: 1rem; }
.corp-rep-row .n {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
}
.corp-rep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.corp-rep-add {
  margin-top: 1rem;
  border: 1px dashed var(--brass);
  border-radius: var(--r-pill);
  background: none;
  padding: .5em 1.2em;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass-deep);
  cursor: pointer;
}
.corp-rep-add:hover { background: var(--brass-soft); }

/* --- the screening funnel ----------------------------------------------- */
.corp-apply {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-sm);
}
.corp-apply-intro {
  margin: calc(-1 * clamp(1.7rem, 4vw, 2.6rem)) calc(-1 * clamp(1.7rem, 4vw, 2.6rem)) 2.2rem;
  padding: clamp(1.7rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
/* `break-word` rather than `anywhere`: a standard's name is long in every language and
   the funnel card is narrow, but breaking mid-word is only acceptable when the word on
   its own will not fit. `anywhere` hyphenated "образовательной" on a desktop screen. */
.corp-apply-intro > h1 {
  max-width: 22ch;
  margin: .8rem 0 .6rem;
  font-size: clamp(1.9rem, 5vw, var(--fs-2xl));
  overflow-wrap: break-word;
  text-wrap: balance;
}
.corp-apply-intro > .lede { max-width: 66ch; }
.corp-apply-callout {
  margin: 1.7rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--brass);
  background: var(--surface);
}
.corp-apply-callout h2 { margin: 0 0 .35rem; font-size: var(--fs-lg); }
.corp-apply-callout p { margin: 0; color: var(--muted); }
/* A label can run to two lines in one cell and one in the next, which would leave the
   four figures at four different heights. The cells are subgrids of a shared label row
   and figure row, so the figures read as one line across the strip. */
.corp-intro-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: 1px;
  margin: 0 0 1.7rem;
  padding: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.corp-intro-facts div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding: .9rem;
  background: var(--surface);
}
.corp-intro-facts dt {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.corp-intro-facts dd { margin: .35rem 0 0; color: var(--ink-2); font-weight: 700; }
/* Two shared rows rather than three: the compact form carries no paragraph. */
.corp-apply-intro .why-grid.is-compact {
  margin-top: 0;
  column-gap: 1.4rem;
  grid-template-rows: auto auto;
}
.corp-apply-intro .why-grid.is-compact .why-col { grid-row: span 2; padding: .9rem 0 0; }
.corp-apply-intro .why-grid.is-compact .lbl { font-size: .66rem; }
.corp-apply-intro .why-grid.is-compact h4 { margin: .5rem 0 0; font-size: var(--fs-sm); }
.corp-apply-head h1,
.corp-apply-head h2 { font-size: var(--fs-2xl); margin: .8rem 0 .5rem; }
.corp-apply-head h2 { margin-top: 0; }
.corp-prog { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 1.8rem 0 0; padding: 0; counter-reset: cp; }
.corp-prog li {
  counter-increment: cp;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.corp-prog li::before { content: counter(cp) " · "; }
.corp-prog li.is-on { color: var(--brass-deep); }
.corp-prog li.is-done { color: var(--muted); }
.corp-prog a { color: inherit; text-decoration: none; }
.corp-prog a:hover { text-decoration: underline; }
.corp-apply-actions { margin-top: 2.2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.corp-apply-fine { margin-top: 1.1rem; font-size: var(--fs-xs); color: var(--faint); max-width: 60ch; line-height: 1.6; }
@media (max-width: 720px) {
  .corp-intro-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corp-apply-intro .why-grid.is-compact { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.2rem; }
  .corp-apply-intro .why-grid.is-compact .why-col { display: block; grid-row: auto; }
}

/* --- the fee page ------------------------------------------------------- */
.corp-fee { text-align: center; }
.corp-fee h1 { font-size: var(--fs-2xl); margin: .9rem 0 .6rem; }
.corp-fee > .lede { max-width: 52ch; margin-inline: auto; }
.corp-fee-card {
  max-width: 34rem;
  margin: 2.2rem auto 0;
  padding: 1.7rem 1.8rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 22px 50px -30px rgba(8, 38, 42, .4);
  text-align: left;
}
.corp-fee-inst { text-align: center; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.corp-fee-inst b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink-2); }
.corp-fee-inst span { font-family: var(--font-mono); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.corp-fee-rows { display: grid; gap: .65rem; margin: 1.2rem 0 0; }
.corp-fee-rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.corp-fee-rows dt { margin: 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.corp-fee-rows dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); text-align: right; }
.corp-fee-form { margin-top: 1.5rem; }

/* --- the payment block (inc/corp_pay_form.php) --------------------------
   Rendered twice on the paywall. Inside the summary card it is bare; at the
   foot of the page `.is-repeat` gives it the same framed card so it reads as
   the point of action rather than as a stray button. */
.corp-pay { margin-top: 1.6rem; }
.corp-pay .pw-price .unit {
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.corp-pay.is-repeat {
  max-width: 34rem;
  margin: 3rem auto 0;
  text-align: left;   /* the paywall centres its column; a paragraph must not be centred */
  padding: 1.6rem 1.8rem 1.5rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 22px 50px -30px rgba(8, 38, 42, .4);
}
.corp-pay-head { text-align: center; padding-bottom: 1.2rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.corp-pay-head b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink-2); }
.corp-pay-head span { font-family: var(--font-mono); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.corp-fee-what { margin-top: 3rem; text-align: left; }
.corp-fee-what h3 { font-size: var(--fs-xl); margin: 0; }
.corp-fee-what .corp-checklist { list-style: none; padding: 0; }
.corp-fee-back { margin-top: 1.6rem; font-size: var(--fs-xs); color: var(--faint); }

/* --- the dossier ------------------------------------------------------- */
.corp-dos-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.corp-dos-head h1 { font-size: var(--fs-2xl); margin: .7rem 0 .4rem; }
.corp-dos-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.corp-dos-meter { min-width: 15rem; max-width: 22rem; }
.corp-dos-meter p { margin: .6rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
.corp-dos-meter b { color: var(--ink-2); font-size: var(--fs-sm); }
.corp-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.corp-bar span { display: block; height: 100%; background: var(--brass); transition: width .3s ease; }

/* The decision deadline on an account card. Same bar as the dossier's progress, and
   deliberately so: one is how much of the submission is done, the other how much of the
   review window has gone, and an institution reads them on the same card in the same shape.
   The number is the loud part, because "up to 9 days left" is the whole message. */
.corp-clock {
  margin-top: 1.1rem;
  padding: .95rem 1.1rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.corp-clock-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .6rem;
}
.corp-clock-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.corp-clock-left { font-size: var(--fs-sm); color: var(--ink-2); text-align: right; }
.corp-clock-note { margin: .6rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
/* Past the deadline the sweep is mid-flight, so the band stops looking like a countdown:
   nothing is left to wait for and a brass bar at 100% reads as "still going". */
.corp-clock.is-due { border-left-color: var(--brass-deep); }
.corp-clock.is-due .corp-clock-left { color: var(--brass-deep); }
.corp-clock.is-due .corp-bar span { background: var(--brass-deep); }

.corp-dos { display: grid; grid-template-columns: 17rem 1fr; gap: 2rem; align-items: start; }
.corp-dos-nav { position: sticky; top: 5.5rem; }
.corp-dos-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.corp-dos-nav li + li { border-top: 1px solid var(--line); }
.corp-dos-nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .8rem 1rem;
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
}
.corp-dos-nav a:hover { background: var(--surface-2); }
.corp-dos-nav .c { font-family: var(--font-mono); font-size: .68rem; color: var(--faint); flex: none; }
.corp-dos-nav li.is-on a { background: var(--surface-2); color: var(--ink-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--brass); }
.corp-dos-nav li.is-done .c { color: #13633b; }
.corp-dos-send {
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.corp-dos-send p { margin: 0 0 .8rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.corp-dos-send .fine { margin: .7rem 0 0; }
.corp-dos-body {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.corp-dos-body h2 { font-size: var(--fs-xl); margin: 0 0 .5rem; }
.corp-dos-body .lede { font-size: var(--fs-sm); max-width: 62ch; }
.corp-dos-actions { margin-top: 2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.corp-missing {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--wrong-line);
  border-radius: var(--r-sm);
  background: var(--wrong-bg);
}
.corp-missing h3 { margin: 0 0 .6rem; font-size: var(--fs-md); }
.corp-missing p { margin: 0 0 .6rem; font-size: var(--fs-xs); color: var(--text); line-height: 1.6; }
.corp-missing p:last-child { margin-bottom: 0; }

/* --- an application on the account page -------------------------------- */
.corp-pill {
  display: inline-block;
  padding: .28em .8em;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.corp-pill.is-awaiting_payment,
.corp-pill.is-screening { border-color: var(--brass); background: var(--brass-soft); color: var(--brass-deep); }
.corp-pill.is-submitted,
.corp-pill.is-in_review { border-color: var(--line-2); background: var(--surface-2); color: var(--ink-2); }
.corp-pill.is-info_required,
.corp-pill.is-declined { border-color: var(--wrong-line); background: var(--wrong-bg); color: #8f2f28; }
.corp-app-ref { margin-left: .7em; color: var(--faint); }
.corp-app-what { margin-top: 1.2rem; }
.corp-app-what b { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink-2); }
.corp-app-what span { font-size: var(--fs-sm); color: var(--muted); }
.corp-app-rows { display: grid; gap: .55rem; margin: 1.2rem 0 0; }
.corp-app-rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.corp-app-rows dt { margin: 0; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.corp-app-rows dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); text-align: right; }
.corp-app .corp-bar { margin-top: 1.3rem; }
.corp-app-note { margin: .8rem 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
/* A standing fact rather than news, such as the decision deadline quoted before there is
   anything to count down. Below the note it follows, not competing with it. */
.corp-app-note.is-quiet { margin-top: .45rem; font-size: var(--fs-xs); color: var(--faint); }
.corp-review-note {
  margin: .9rem 0 0;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--brass);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.6;
}
/* What the accreditation is worth, on a card that is not finished yet. Set apart by a
   rule and the page tint rather than by a box: it is an aside to the state above it, and
   a second bordered panel inside a bordered card reads as a nested card. */
.corp-gains {
  margin: 1.4rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}
.corp-gains h3 {
  margin: 0 0 .45rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.corp-gains .pct-points { max-width: 52ch; color: var(--muted); }

.cb-side-note { margin: 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); text-align: center; }
.cert-block-side .btn + .btn { margin-top: .55rem; }

/* --- check by register number (corp/check.php) --------------------------- */

/* One field, and it is the subject of the page, so it is set at the width of the thing
   being typed into it rather than the width of the column. */
.chk-form { margin: 2.2rem 0 0; max-width: 34rem; }
.chk-label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.chk-row { display: flex; gap: .6rem; }
.chk-row .input { flex: 1 1 auto; min-width: 0; letter-spacing: .04em; }
.chk-row .btn { flex: none; }
.chk-hint { margin: .7rem 0 0; font-size: var(--fs-sm); color: var(--faint); line-height: 1.6; max-width: 52ch; }
/* The shared result panel centres itself, which is right on `verify.php` where it is the
   whole page and wrong here, under a left-aligned form. */
.verify-result.is-left { margin-left: 0; margin-right: 0; }

/* --- the accreditation badge (corp/badge.php) ---------------------------- */

/* The badge is the page's subject, so it is shown at the size it is meant to be read at
   and then twice smaller beside it: an institution choosing where to put it needs to see
   that the rim text stops being type and becomes texture somewhere around 96px. */
.badge-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
  margin-top: 2.2rem;
}
.badge-stage {
  padding: 1.8rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: center;
}
.badge-stage > svg { display: block; margin: 0 auto; }
.badge-scale {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.badge-scale-note {
  margin: .9rem 0 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.7;
}
.badge-facts .corp-app-rows { margin-top: 0; }
.badge-dl { margin-top: 1.8rem; display: grid; gap: .5rem; }
.badge-dl .cb-side-note { text-align: left; margin-bottom: .7rem; }

.badge-embed { margin-top: 2.6rem; max-width: 62rem; }
.badge-embed h2 { margin: 0 0 .5rem; }
.badge-embed p { margin: 0; color: var(--muted); max-width: 62ch; }
.badge-embed-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.2rem 0 .7rem;
  flex-wrap: wrap;
}
.badge-embed-head label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.badge-embed-head select { width: auto; }
/* The snippet scrolls rather than wraps: a wrapped URL invites a paste that is missing
   half of itself. */
.badge-code {
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  background: var(--surface-2);
}
.badge-code code {
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre;
}
.badge-rules { margin: .6rem 0 0; padding-left: 1.1rem; }
.badge-rules li + li { margin-top: .4rem; }

@media (max-width: 820px) {
  .badge-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* --- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .corp-dos { grid-template-columns: 1fr; }
  .corp-dos-nav { position: static; }
  .corp-dos-nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corp-dos-nav li + li { border-top: 0; border-left: 1px solid var(--line); }
  .corp-dos-nav li:nth-child(odd) { border-left: 0; }
  .corp-dos-nav li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .corp-rep-grid { grid-template-columns: 1fr; }
  .corp-opts.is-multi { grid-template-columns: 1fr; }
  .corp-dos-nav ol { grid-template-columns: 1fr; }
  .corp-dos-nav li + li { border-left: 0; border-top: 1px solid var(--line); }
  .reg-filters > div { min-width: 100%; }
}

@media (max-width: 700px) {
  .corp-checklist { grid-template-columns: 1fr; gap: 1.2rem; }
  .cert.is-institution .name { font-size: 1.2rem; }
}