/* =============================================================================
   LEGAL DOCUMENTS · section #docs — the whole Legal Documents list (owner-approved "Document Viewer",
   2026-10-07; replaces design C). Each record is a document viewer: a stage in the record's soft-dark group
   colour with the certificate large and ONE toolbar under it (note · View document · Download PDF), and the
   reading column (identity, facts on one rule, three arrow rows). Closing table + Verification support band.
   Every rule is scoped to .u4-sec (section#docs), so nothing else on the site is touched.
   Linked in <head> of legal-documents.html with assets/legal/document-records.js.
   2026-10-07 (owner): every card made shorter — see the COMPACT block near the end.
   ============================================================================= */
/* =============================================================================
   Round 7 · Recommended — Document Viewer, refined (section #docs)
   One system for the whole section:
     · every record is a viewer: the stage (the group's soft-dark wash) holds the sheet large, top-aligned with the
       kicker, its caption under it, and ONE toolbar: the note on the left, View (secondary) · Download (primary)
     · beside it: identity → the facts on one quiet rule (no inner box) → three arrow rows on the same rules
     · the closing blocks sit on the same 41.5 | 58.5 split, white with a quiet edge, no drop shadows
   Proportions at 1440 (records 1391px): stage 41.5fr | content 58.5fr = 576 | 815.
     stage    40px top (= the kicker tile's top) · portrait 300×424 · PAN 496 (stage − 2×40) · QR plate 400 ·
              caption 14px under the sheet · toolbar 79px, one row while the stage is ≥ 460px
     content  40px top · 40px sides · facts [CIN ≥ 296 | authority | issued] under a 1px rule ·
              arrows 3 × 56px · 22px bottom, so the line above the last arrow row continues the toolbar's top edge
   Phones: identity → the stage (sheet 212×300 at 390, caption, both buttons, the note) → facts as ruled rows → arrows,
           so after a jump link View and Download sit above the enquiry bar.
   Colour: group hue tokens from the live shell ([data-grp]); every action is --cta.
   Everything is scoped under html body .u4-sec.
   ============================================================================= */

/* ---------- the jump links: one track, the current record a white raised key (unchanged) ---------- */
html body .u4-sec .u4-railwrap{ margin-top: clamp(20px, 2.4vw, 30px); }
html body .u4-sec .u4-rail{
  display: flex; gap: 4px; width: fit-content; max-width: 100%; margin-inline: auto; padding: 5px; box-sizing: border-box;
  background: var(--pl-row, #C6D9F4); border-radius: 15px;
}
html body .u4-sec .u4-key{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; box-sizing: border-box;
  border-radius: 11px; font: 700 15px/1.1 var(--sans); letter-spacing: -.005em; color: var(--pl-off, #15335C);
  text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
html body .u4-sec .u4-key svg{ width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html body .u4-sec .u4-key:hover{ background: rgba(255, 255, 255, .55); color: var(--pl-off, #15335C); }
html body .u4-sec .u4-key[aria-current="true"]{
  background: #fff; color: var(--pl-ink, #004594);
  box-shadow: 0 1px 2px rgba(15, 27, 61, .12), 0 6px 14px -8px rgba(15, 27, 61, .45);
}
html body .u4-sec .u4-key[aria-current="true"] svg{ color: var(--hue); }
html body .u4-sec .u4-key:focus-visible{ outline: 2px solid var(--cta); outline-offset: 2px; }

/* ---------- the list ---------- */
html body .u4-sec .u4-list{ margin-top: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: clamp(22px, 2.2vw, 32px); }

/* ---------- the record: one white frame, a hairline shadow, no stripe, no outline on arrival ---------- */
html body .u4-sec .u4-rec{
  --u4-canvas: color-mix(in srgb, var(--hue-pale) 52%, var(--hue-edge));   /* soft dark: the stage, tile, discs */
  --u4-bar: color-mix(in srgb, var(--hue-pale) 50%, #fff);                  /* the toolbar strip */
  --u4-rule: var(--line-b, #DCE3EC);
  --u4-top: 40px;                                                            /* identity top = sheet top */
  --u4-px: 40px;                                                             /* the reading column's sides */
  --u4-sx: 40px;                                                             /* the stage's sides */
  position: relative; display: grid; min-width: 0;
  grid-template-columns: minmax(0, 41.5fr) minmax(0, 58.5fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "stage id" "stage facts" "stage more";
  background: #fff; border: 1px solid var(--hue-edge); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 27, 61, .05);
  container: u4rec / inline-size;
  scroll-margin-top: calc(var(--barh, 96px) + 18px);
  font-family: var(--sans); color: var(--ink); text-align: left;
}
@supports not (color: color-mix(in srgb, red, blue)){
  html body .u4-sec .u4-rec{ --u4-canvas: var(--hue-edge); --u4-bar: var(--hue-pale); }
}
html body .u4-sec .u4-rec :where(h3, h4, p, dl, dt, dd, ul, li, figure, figcaption){ margin: 0; padding: 0; }
html body .u4-sec .u4-rec dd{ min-width: 0; }
/* keyboard focus never lands under the fixed header or the enquiry bar */
html body .u4-sec :is(.u4-rec, .u4-safe, .u4-cta) :is(a, button){ scroll-margin-top: calc(var(--barh, 96px) + 24px); scroll-margin-bottom: 72px; }

/* ---------- 1 · identity ---------- */
html body .u4-sec .u4-id{ grid-area: id; min-width: 0; padding: var(--u4-top) var(--u4-px) 0; }
html body .u4-sec .u4-kick{ display: flex; align-items: center; gap: 12px; }
html body .u4-sec .u4-tile{
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; box-sizing: border-box;
  border-radius: 10px; background: var(--u4-canvas); border: 1px solid var(--hue-edge); color: var(--hue);
}
html body .u4-sec .u4-tile svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html body .u4-sec .u4-cat{ font: 800 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hue); }
html body .u4-sec .u4-title{ margin-top: 18px; font: 800 40px/1.06 var(--sans); letter-spacing: -.034em; color: var(--ink); text-wrap: balance; }
html body .u4-sec .u4-purpose{ margin-top: 10px; font: 600 17px/1.45 var(--sans); color: var(--ink-2); }
html body .u4-sec .u4-status{ margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
html body .u4-sec .u4-pill{ margin: 0; font-size: 12.5px; padding: 5px 12px 5px 10px; }
html body .u4-sec .u4-note{ font: 600 14px/1.45 var(--sans); color: #56616F; text-wrap: pretty; }

/* ---------- 2 · the viewer: the stage = the sheet + its caption, then one toolbar ---------- */
html body .u4-sec .u4-stage{
  grid-area: stage; min-width: 0; display: flex; flex-direction: column;
  background: var(--u4-canvas); border-right: 1px solid var(--hue-edge);
  container: u4stage / inline-size;
}
html body .u4-sec .u4-canvas{
  flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-start;
  padding: var(--u4-top) var(--u4-sx) 26px;
}
html body .u4-sec .u4-doc{ display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
/* the sheet: paper on the stage — a hairline, one soft drop; the whole sheet opens the full-size scan */
html body .u4-sec .u4-sheet{
  position: relative; display: block; flex: none; width: 300px; max-width: 100%; width: min(300px, 60cqw); box-sizing: border-box;
  background: #fff; border-radius: 4px; text-decoration: none; color: inherit;
  box-shadow: 0 0 0 1px rgba(11, 13, 18, .09), 0 2px 4px rgba(11, 13, 18, .06), 0 24px 44px -24px rgba(11, 13, 18, .48);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
html body .u4-sec .u4-rec:is([data-shape="landscape"], [data-shape="square"]) .u4-canvas{ align-items: center; padding-bottom: var(--u4-top); }
html body .u4-sec .u4-sheet picture, html body .u4-sec .u4-sheet img{ display: block; width: 100%; height: auto; border-radius: 4px; }
/* the e-PAN: as wide as the stage allows, 40px each side */
html body .u4-sec .u4-rec[data-shape="landscape"] .u4-sheet{ width: calc(100cqw - 2 * var(--u4-sx)); max-width: 560px; border-radius: 8px; }
html body .u4-sec .u4-rec[data-shape="landscape"] .u4-sheet img{ border-radius: 8px; }
/* the UPI QR sits on a white plate, the Full size key under it so it never covers the code */
html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ width: 400px; width: min(400px, calc(100cqw - 2 * var(--u4-sx) - 40px)); padding: 12px 12px 48px; border-radius: 14px; }
html body .u4-sec .u4-sheet .cx-zoom{
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; box-sizing: border-box; border-radius: 999px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--cta-edge); color: var(--cta);
  font: 700 12.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 2px 8px -3px rgba(11, 13, 18, .30);
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
html body .u4-sec .u4-sheet .cx-zoom svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
@media (hover: hover){
  html body .u4-sec .u4-sheet:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(11, 13, 18, .10), 0 3px 6px rgba(11, 13, 18, .07), 0 30px 52px -24px rgba(11, 13, 18, .52); }
  html body .u4-sec .u4-sheet:hover .cx-zoom{ background: var(--cta); border-color: var(--cta); color: #fff; }
}
html body .u4-sec .u4-sheet:focus-visible{ outline: 3px solid var(--cta); outline-offset: 4px; }
/* what the file is — centred under the sheet, on the stage */
html body .u4-sec .u4-cap{ margin-top: 12px; font: 600 13.5px/1.4 var(--sans); color: var(--ink-2); text-align: center; }

/* the toolbar: the note on the left · the actions on the right; one row while the stage is ≥ 460px */
html body .u4-sec .u4-bar{
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
  min-height: 79px; box-sizing: border-box; padding: 14px 22px;
  background: var(--u4-bar); border-top: 1px solid var(--hue-edge);
}
html body .u4-sec .u4-an{ flex: 1 1 0; min-width: 80px; font: 600 13px/1.4 var(--sans); color: #4D5866; text-wrap: balance; }
html body .u4-sec .u4-acts{ display: flex; gap: 8px; flex: none; }
/* 530–559px stages (laptops ~1320–1379): a little less padding keeps the note beside the buttons */
@container u4stage (min-width: 530px) and (max-width: 559px){
  html body .u4-sec .u4-bar{ padding: 12px 18px; gap: 10px 14px; }
  html body .u4-sec .u4-bar .u4-btn{ padding-inline: 14px; }
  html body .u4-sec .u4-an{ line-height: 1.35; }
}
/* a narrow stage (≤ 529px: laptops below ~1320, tablets, phones): no strip — the buttons follow the caption on the stage,
   the note centred under them, and any spare tint stays at the bottom */
@container u4stage (max-width: 529px){
  html body .u4-sec .u4-canvas{ flex: none; padding-bottom: 0; }
  html body .u4-sec .u4-rec:is([data-shape="landscape"], [data-shape="square"]) .u4-canvas{ margin-top: auto; padding-bottom: 0; }
  html body .u4-sec .u4-rec:is([data-shape="landscape"], [data-shape="square"]) .u4-bar{ margin-bottom: auto; }
  html body .u4-sec .u4-bar{
    flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0;
    padding: 18px var(--u4-sx) 24px; background: transparent; border-top: 0;
  }
  html body .u4-sec .u4-an{ order: 2; flex: none; min-width: 0; text-align: center; }
  html body .u4-sec .u4-acts{ width: 100%; }
  html body .u4-sec .u4-acts .u4-btn{ flex: 1 1 0; min-width: 0; }
}

/* buttons: the site's one action blue. Primary filled, secondary white with the action edge; one family, 46px, 12px radius */
html body .u4-sec .u4-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; box-sizing: border-box;
  border-radius: 12px; border: 1.5px solid transparent; font: 700 15px/1.2 var(--sans); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
html body .u4-sec .u4-btn svg{ width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .u4-sec .u4-btn.is-1{ background: var(--cta); border-color: var(--cta); color: #fff; box-shadow: 0 1px 2px rgba(7, 52, 110, .22), 0 8px 16px -10px rgba(7, 96, 198, .65); }
html body .u4-sec .u4-btn.is-1:hover{ background: var(--cta-h); border-color: var(--cta-h); color: #fff; }
html body .u4-sec .u4-btn.is-2{ background: #fff; border-color: var(--cta-edge); color: var(--cta); }
html body .u4-sec .u4-btn.is-2:hover{ background: var(--cta-soft); border-color: var(--cta); color: var(--cta); }
html body .u4-sec .u4-btn:focus-visible{ outline: 2px solid var(--cta); outline-offset: 2px; }

/* ---------- 3 · the facts: borderless columns on one quiet rule ---------- */
html body .u4-sec .u4-fx{
  grid-area: facts; min-width: 0; margin: 28px var(--u4-px) 0; padding: 22px 0 0; box-sizing: border-box;
  border-top: 1px solid var(--u4-rule);
  container: u4fx / inline-size;
}
/* the facts choose their layout from their own width (u4fx):
     < 556px   CIN on its own line, then authority | issued
     ≥ 556px   CIN | authority over issued (the bank: current account | UPI account over the issuing bank)
     ≥ 710px   CIN | authority | issued on one line — 296 = CIN 209 + 8 + Copy 78; authority 232 for two lines; date 131 */
html body .u4-sec .u4-facts{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 24px; min-width: 0; }
html body .u4-sec .u4-facts > .is-ref{ grid-column: 1 / -1; }
html body .u4-sec .u4-f dt{ font: 750 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #4A5465; }
html body .u4-sec .u4-f dd{ margin-top: 8px; font: 700 17px/1.4 var(--sans); color: var(--ink); text-wrap: balance; }
html body .u4-sec .u4-nw{ white-space: nowrap; }
html body .u4-sec .u4-refv{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html body .u4-sec .u4-code{
  font: 700 16.5px/1.3 var(--mono); letter-spacing: 0; color: var(--ink); background: none; padding: 0; white-space: nowrap;
}
/* Copy: one width whether it says Copy or Copied, so nothing beside it moves; 44px tall tap area */
html body .u4-sec .u4-copy{
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  width: 78px; height: 34px; padding: 0; box-sizing: border-box; border-radius: 9px;
  border: 1.5px solid var(--cta-edge); background: #fff; color: var(--cta); font: 700 13.5px/1 var(--sans); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
html body .u4-sec .u4-copy::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
html body .u4-sec .u4-copy svg{ width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .u4-sec .u4-copy:hover{ background: var(--cta-soft); border-color: var(--cta); }
html body .u4-sec .u4-copy:focus-visible{ outline: 2px solid var(--cta); outline-offset: 2px; }
html body .u4-sec .u4-copy.is-done{ color: var(--ok); border-color: var(--ok-ln); background: var(--ok-bg); }
html body .u4-sec .u4-copy.is-done svg{ display: none; }

/* the bank: its two account groups and the issuing bank, on the same rule */
html body .u4-sec .u4-facts.is-acct{ align-items: start; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
html body .u4-sec .u4-gh{ font: 800 15px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); text-transform: none; }
html body .u4-sec .u4-gl{ margin-top: 12px; }
html body .u4-sec .u4-gl > .u4-f + .u4-f{ margin-top: 14px; }
html body .u4-sec .u4-gl dd{ margin-top: 6px; font-size: 16.5px; }
html body .u4-sec .u4-gl .u4-code{ font-size: 16px; letter-spacing: 0; }
html body .u4-sec .u4-gn{ margin-top: 12px; font: 600 13.5px/1.5 var(--sans); color: #56616F; }
html body .u4-sec .u4-facts.is-acct > .is-g1{ grid-column: 1; grid-row: 1 / span 2; }
html body .u4-sec .u4-facts.is-acct > .is-g2{ grid-column: 2; grid-row: 1; }
html body .u4-sec .u4-facts.is-acct > .is-auth{ grid-column: 2; grid-row: 2; }

@container u4fx (min-width: 556px){
  html body .u4-sec .u4-facts:not(.is-acct){ grid-template-columns: 296px minmax(0, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; }
  html body .u4-sec .u4-facts > .is-ref{ grid-column: 1; grid-row: 1 / span 2; }
  html body .u4-sec .u4-facts.is-acct{ grid-template-columns: 296px minmax(0, 1fr); }
}
@container u4fx (min-width: 710px){
  html body .u4-sec .u4-facts:not(.is-acct){ grid-template-columns: 296px minmax(0, 1fr) minmax(min-content, .62fr); grid-template-rows: auto; grid-auto-flow: row; }
  html body .u4-sec .u4-facts > .is-ref{ grid-row: auto; }
}

/* ---------- 4 · more detail — arrow rows on the same rules, closed until opened ---------- */
html body .u4-sec .u4-more{ grid-area: more; align-self: end; min-width: 0; padding: 22px var(--u4-px) 22px; }
html body .u4-sec .u4-q{ border-top: 1px solid var(--u4-rule); }
html body .u4-sec .u4-qb{
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 56px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html body .u4-sec .u4-qt{ font: 700 17.5px/1.3 var(--sans); letter-spacing: -.008em; color: var(--ink); transition: color .15s var(--ease); }
html body .u4-sec .u4-disc{
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--u4-canvas); color: var(--hue);
  transition: transform .2s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
html body .u4-sec .u4-disc svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover){
  html body .u4-sec .u4-qb:hover .u4-qt{ color: var(--hue); }
  html body .u4-sec .u4-qb:hover .u4-disc{ background: var(--hue-edge); }
}
html body .u4-sec .u4-qb[aria-expanded="true"] .u4-disc{ background: var(--hue); color: #fff; transform: rotate(180deg); }
html body .u4-sec .u4-qb[aria-expanded="true"] .u4-qt{ color: var(--hue); }
html body .u4-sec .u4-qb:focus-visible{ outline: 2px solid var(--cta); outline-offset: 2px; border-radius: 8px; }
html body .u4-sec .u4-qa p{ max-width: 68ch; padding: 0 48px 18px 0; font: 500 16px/1.65 var(--sans); color: var(--ink-2); }
html body .u4-sec .u4-qa p b{ color: var(--ink); font-weight: 750; }
html body .u4-sec.u4-on .u4-qb[aria-expanded="false"] + .u4-qa{ display: none; }
/* 2026-10-08 · smoothness: closed from the first frame. The markup ships every row open (so it reads
   with scripts off) and the deferred document-records.js closes them only after the whole page is
   parsed, so the first frames painted every answer OPEN, then folded them (the list shrank ~760 px under
   the reader, a refresh landed in the wrong place) and each arrow played its turn. Where scripts run,
   the rows now look closed until the script takes over — exactly the state it sets, so nothing changes
   or animates when it does. With scripts off they stay open, as before. */
@media (scripting: enabled){
  html body .u4-sec:not(.u4-on) .u4-qb + .u4-qa{ display: none; }
  html body .u4-sec:not(.u4-on) .u4-qb[aria-expanded="true"] .u4-disc{ background: var(--u4-canvas); color: var(--hue); transform: none; }
  html body .u4-sec:not(.u4-on) .u4-qb[aria-expanded="true"] .u4-qt{ color: var(--ink); }
}

/* ---------- closing 1 · What we never publish here — a ruled table on the record grid ----------
   the heading on top; each point is a row on a 1px rule, its title in the left column and its text starting on the
   reading-column line of the records (41.5% + 40px), so the block continues the records' line system */
html body .u4-sec .u4-safe{
  --u4-cut: calc(41.5% - 6.8px); --u4-gap: 40px;      /* text starts at 41.5% of the card + 40px, as in a record */
  margin-top: clamp(28px, 3vw, 40px); padding: 34px 40px 20px;
  background: #fff; border: 1px solid var(--line-b); border-radius: 20px;
  font-family: var(--sans); text-align: left;
}
html body .u4-sec .u4-safe-h{
  margin: 0; padding: 0; display: flex; align-items: center; gap: 14px;
  font: 800 24px/1.2 var(--sans); letter-spacing: -.024em; color: var(--ink); text-transform: none;
}
html body .u4-sec .u4-safe-i{
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; box-sizing: border-box; border-radius: 11px;
  background: #DFE4EF; border: 1px solid #C9D2E4; color: #0F1B3D;
}
html body .u4-sec .u4-safe-i svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html body .u4-sec .u4-pts{ margin: 22px 0 0; padding: 0; list-style: none; min-width: 0; }
html body .u4-sec .u4-pt{
  margin: 0; padding: 16px 0; display: grid; grid-template-columns: var(--u4-cut) minmax(0, 1fr); column-gap: var(--u4-gap);
  align-items: baseline; border-top: 1px solid var(--line-b);
}
html body .u4-sec .u4-pt::before, html body .u4-sec .u4-pt::marker{ content: none; }
html body .u4-sec .u4-pt b{ display: block; font: 750 16.5px/1.4 var(--sans); color: var(--ink); }
html body .u4-sec .u4-pt span{ display: block; margin: 0; max-width: 72ch; font: 500 15.5px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }

/* ---------- closing 2 · Verification support — the closing band, on the same edges ---------- */
html body .u4-sec .u4-cta{
  --u4-c-wash: color-mix(in srgb, #EAF2FD 52%, #C9D9EF);
  margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px;
  padding: 30px 40px; background: var(--u4-c-wash); border: 1px solid #C9D9EF; border-radius: 20px;
  scroll-margin-top: calc(var(--barh, 96px) + 18px); font-family: var(--sans); text-align: left;
}
@supports not (color: color-mix(in srgb, red, blue)){ html body .u4-sec .u4-cta{ --u4-c-wash: #DAE6F6; } }
html body .u4-sec .u4-cta-i{
  display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; border-radius: 14px;
  background: #fff; border: 1px solid #C9D9EF; color: var(--cta);
}
html body .u4-sec .u4-cta-i svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html body .u4-sec .u4-cta-t{ min-width: 0; }
html body .u4-sec .u4-cta-t h3{ margin: 0; font: 800 24px/1.2 var(--sans); letter-spacing: -.024em; color: var(--ink); }
html body .u4-sec .u4-cta-t p{ margin: 6px 0 0; max-width: 60ch; font: 600 16px/1.55 var(--sans); color: var(--ink-2); }
html body .u4-sec .u4-cta-a{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
html body .u4-sec .u4-cta-a .u4-btn{ margin: 0; height: auto; min-height: 46px; }
html body .u4-sec .u4-cta-a .u4-mail{ word-break: normal; }

/* ---------- laptops below 1280: the same structure, the title a step smaller ---------- */
@media (max-width: 1279px){
  html body .u4-sec .u4-title{ font-size: 36px; }
}

/* ---------- small laptops / tablets: still two-sided down to 1024px ---------- */
@media (max-width: 1100px){
  html body .u4-sec .u4-rec{ --u4-px: 32px; --u4-sx: 26px; --u4-top: 34px; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  html body .u4-sec .u4-title{ font-size: 33px; }
  html body .u4-sec .u4-sheet{ width: min(300px, 70cqw); }
  html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ width: min(400px, calc(100cqw - 2 * var(--u4-sx))); }
  html body .u4-sec .u4-safe{ --u4-cut: calc(40% - 6.4px); --u4-gap: 32px; padding: 32px 32px 18px; }
  html body .u4-sec .u4-cta{ grid-template-columns: auto minmax(0, 1fr); padding: 28px 32px; }
  html body .u4-sec .u4-cta-a{ grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- stacked (≤ 1023): identity → the viewer band → facts → arrow rows ---------- */
@media (max-width: 680px){
  html body .u4-sec .u4-pt{ grid-template-columns: minmax(0, 1fr); }
  html body .u4-sec .u4-pt span{ margin-top: 6px; }
}
@media (max-width: 1023px){
  html body .u4-sec .u4-rec{
    --u4-top: 32px; --u4-sx: 32px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "id" "stage" "facts" "more";
  }
  html body .u4-sec .u4-stage{ margin-top: 26px; border-right: 0; border-top: 1px solid var(--hue-edge); border-bottom: 1px solid var(--hue-edge); }
  html body .u4-sec .u4-canvas{ padding-bottom: 28px; }
  html body .u4-sec .u4-sheet{ width: min(300px, 64cqw); }
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-sheet{ width: min(520px, calc(100cqw - 2 * var(--u4-sx))); }
  html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ width: min(320px, 64cqw); }
  /* the band's own edge already separates: the facts need no rule of their own */
  html body .u4-sec .u4-fx{ margin-top: 26px; padding-top: 0; border-top: 0; }
  html body .u4-sec .u4-more{ align-self: auto; padding: 22px var(--u4-px) 14px; }
  html body .u4-sec .u4-safe{ --u4-cut: 220px; --u4-gap: 28px; }
}

/* ---------- phones: the first screen holds the title, the sheet and both buttons ---------- */
@media (max-width: 600px){
  html body .u4-sec .u4-rail{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  html body .u4-sec .u4-key{ padding: 0 10px; font-size: 14.5px; gap: 8px; }
  html body .u4-sec .u4-rec{ --u4-px: 18px; --u4-sx: 16px; --u4-top: 22px; border-radius: 18px; }
  html body .u4-sec .u4-kick{ gap: 10px; }
  html body .u4-sec .u4-tile{ width: 32px; height: 32px; border-radius: 9px; }
  html body .u4-sec .u4-tile svg{ width: 17px; height: 17px; }
  html body .u4-sec .u4-title{ margin-top: 12px; font-size: 28px; line-height: 1.1; }
  html body .u4-sec .u4-purpose{ margin-top: 6px; font-size: 16px; }
  html body .u4-sec .u4-status{ margin-top: 12px; gap: 6px 10px; }
  html body .u4-sec .u4-note{ font-size: 13.5px; }
  html body .u4-sec .u4-stage{ margin-top: 18px; }
  html body .u4-sec .u4-canvas{ padding: 18px var(--u4-sx) 0; }
  html body .u4-sec .u4-sheet{ width: min(212px, 60cqw); }
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-sheet{ width: calc(100cqw - 2 * var(--u4-sx)); }
  html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ width: min(240px, 64cqw); padding: 10px 10px 46px; }
  html body .u4-sec .u4-cap{ margin-top: 10px; }
  html body .u4-sec .u4-bar{ padding: 14px var(--u4-sx) 16px; gap: 10px; }
  html body .u4-sec .u4-btn{ padding: 0 12px; font-size: 14.5px; gap: 7px; }
  /* the facts: label above value, rows on 1px rules, Copy beside each value — no box */
  html body .u4-sec .u4-fx{ margin: 8px var(--u4-px) 0; padding: 0; border: 0; }
  html body .u4-sec .u4-facts,
  html body .u4-sec .u4-facts.is-acct{ display: block; }
  html body .u4-sec .u4-facts > .u4-f,
  html body .u4-sec .u4-facts.is-acct > *{ padding: 14px 0; border-top: 1px solid var(--u4-rule); }
  html body .u4-sec .u4-facts > :first-child{ border-top: 0; }
  html body .u4-sec .u4-f dd{ margin-top: 6px; font-size: 16.5px; }
  html body .u4-sec .u4-refv{ justify-content: flex-start; flex-wrap: nowrap; gap: 12px; }
  html body .u4-sec .u4-code{ font-size: 16px; letter-spacing: 0; }
  html body .u4-sec .u4-gl dd{ font-size: 16px; }
  html body .u4-sec .u4-gl .u4-code{ font-size: 15.5px; }
  html body .u4-sec .u4-more{ padding: 0 var(--u4-px) 6px; }
  html body .u4-sec .u4-qt{ font-size: 17px; }
  html body .u4-sec .u4-qa p{ padding-right: 0; font-size: 15.5px; }
  html body .u4-sec .u4-safe{ padding: 24px 20px 10px; border-radius: 18px; }
  html body .u4-sec .u4-safe-h{ font-size: 22px; gap: 12px; }
  html body .u4-sec .u4-safe-i{ width: 36px; height: 36px; }
  html body .u4-sec .u4-pts{ margin-top: 16px; }
  html body .u4-sec .u4-pt{ padding: 16px 0; }
  html body .u4-sec .u4-cta{ grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 16px; border-radius: 18px; }
  html body .u4-sec .u4-cta-i{ width: 46px; height: 46px; }
  html body .u4-sec .u4-cta-t h3{ font-size: 22px; }
  html body .u4-sec .u4-cta-t p{ font-size: 15.5px; }
  html body .u4-sec .u4-cta-a{ grid-column: auto; flex-direction: column; align-items: stretch; }
  html body .u4-sec .u4-cta-a .u4-btn{ white-space: normal; text-align: center; }
}
/* phones: every Copy lines up at the right edge, in reach of the thumb */
@media (max-width: 480px){
  html body .u4-sec .u4-refv{ justify-content: space-between; gap: 8px; }
}
/* the smallest phones: the reference keeps its Copy; at 320 Copy may drop under the number */
@media (max-width: 374px){
  html body .u4-sec .u4-key{ font-size: 14px; gap: 6px; padding: 0 8px; }
  html body .u4-sec .u4-key svg{ width: 16px; height: 16px; }
  html body .u4-sec .u4-rec{ --u4-px: 16px; --u4-sx: 14px; }
  html body .u4-sec .u4-code{ font-size: 15px; letter-spacing: -.01em; }
  html body .u4-sec .u4-copy{ width: 72px; font-size: 13px; gap: 5px; }
  html body .u4-sec .u4-btn{ padding: 0 8px; font-size: 14px; gap: 6px; }
  html body .u4-sec .u4-btn svg{ width: 15px; height: 15px; }
}
@media (max-width: 339px){
  html body .u4-sec .u4-refv{ flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce){
  html body .u4-sec .u4-sheet, html body .u4-sec .u4-disc, html body .u4-sec .u4-key,
  html body .u4-sec .u4-btn, html body .u4-sec .u4-copy, html body .u4-sec .u4-qt{ transition: none; }
  html body .u4-sec .u4-sheet:hover{ transform: none; }
}

/* ---------- final fixes (2026-10-07 review) ---------- */
/* one rhythm: the three certificate records share one height from 1280 up (the bank keeps its own) */
@media (min-width: 1280px){
  html body .u4-sec .u4-rec:not([data-kind="acct"]){ min-height: 602px; }
}
@media (min-width: 1280px) and (max-width: 1439px){
  html body .u4-sec .u4-rec:not([data-kind="acct"]){ min-height: 620px; }
}
/* "What we never publish here": each point's title stays next to its text */
@media (min-width: 1101px){
  html body .u4-sec .u4-safe{ --u4-cut: 300px; }
}
/* short phones (≤374 × ≤760): a slightly smaller sheet keeps the title, the sheet and both buttons above the bottom bar */
@media (max-width: 374px) and (max-height: 760px){
  html body .u4-sec .u4-stage{ margin-top: 12px; }
  html body .u4-sec .u4-canvas{ padding-top: 12px; }
  html body .u4-sec .u4-rec[data-shape] .u4-sheet{ width: min(176px, 54cqw); }
  html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ padding: 8px 8px 40px; }
}

/* =============================================================================
   COMPACT (owner, 2026-10-07: "reduce the vertical height of each card … from Certificate of
   Incorporation to all"). Same parts, same order, same viewer idea — every card is shorter:
     · desktop ≥ 1328: a smaller sheet (still larger than before the redesign), a slimmer toolbar,
       tighter identity / facts / arrow rows
     · below 1328 (small laptops, tablets, phones): the sheet sits BESIDE its two buttons instead of
       above them (the e-PAN keeps its width, its buttons side by side under it)
   Delete this block to return to the previous heights.
   ============================================================================= */
/* the old one-height rules gave every card the tall height — the compact cards size to their content */
@media (min-width: 1280px){
  html body .u4-sec .u4-rec:not([data-kind="acct"]){ min-height: 0; }
}

/* ---- every two-sided and tablet width: tighter identity, facts and arrow rows ---- */
@media (min-width: 601px){
  html body .u4-sec .u4-rec{ --u4-top: 30px; }
  html body .u4-sec .u4-tile{ width: 32px; height: 32px; border-radius: 9px; }
  html body .u4-sec .u4-tile svg{ width: 17px; height: 17px; }
  html body .u4-sec .u4-title{ margin-top: 12px; }
  html body .u4-sec .u4-purpose{ margin-top: 6px; }
  html body .u4-sec .u4-status{ margin-top: 12px; }
  html body .u4-sec .u4-fx{ margin-top: 18px; padding-top: 16px; }
  html body .u4-sec .u4-facts{ row-gap: 14px; }
  html body .u4-sec .u4-f dd{ margin-top: 6px; }
  html body .u4-sec .u4-gl{ margin-top: 8px; }
  html body .u4-sec .u4-gl > .u4-f + .u4-f{ margin-top: 10px; }
  html body .u4-sec .u4-gl dd{ margin-top: 4px; }
  html body .u4-sec .u4-gn{ margin-top: 8px; }
  html body .u4-sec .u4-more{ padding-top: 12px; padding-bottom: 14px; }
  html body .u4-sec .u4-qb{ min-height: 48px; }
  html body .u4-sec .u4-qa p{ padding-bottom: 14px; }
}
@media (min-width: 1024px){
  html body .u4-sec .u4-title{ font-size: 38px; }
}
@media (min-width: 1024px) and (max-width: 1279px){
  html body .u4-sec .u4-title{ font-size: 34px; }
}

/* ---- wide screens (≥ 1328, where the stage is ≥ 530px wide): the viewer keeps its toolbar strip, at a smaller scale ---- */
@media (min-width: 1328px){
  html body .u4-sec .u4-canvas{ padding-bottom: 18px; }
  html body .u4-sec .u4-sheet{ width: min(248px, 54cqw); }
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-sheet{ width: calc(100cqw - 2 * var(--u4-sx)); max-width: 430px; }
  html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ width: min(268px, 56cqw); padding: 10px 10px 44px; }
  html body .u4-sec .u4-rec:is([data-shape="landscape"], [data-shape="square"]) .u4-canvas{ padding-bottom: var(--u4-top); }
  html body .u4-sec .u4-bar{ min-height: 64px; padding-top: 9px; padding-bottom: 9px; }
  html body .u4-sec .u4-cap{ margin-top: 10px; }
}

/* ---- below 1328: the sheet beside its two buttons (certificates and the QR) ---- */
@media (max-width: 1327px){
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-stage{
    flex-direction: row; align-items: center; justify-content: center;
  }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-canvas{
    flex: none; margin: 0; padding: var(--u4-top) 0 var(--u4-top) var(--u4-sx); align-items: center;
  }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-doc{ width: auto; }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-sheet{ width: var(--u4-thumb, 200px); }
  html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ padding: 8px 8px 40px; border-radius: 12px; }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-bar{
    flex: 1 1 0; min-width: 0; max-width: 300px; margin: 0; min-height: 0;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 10px;
    padding: var(--u4-top) var(--u4-sx); background: transparent; border-top: 0;
  }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-acts{ flex-direction: column; width: 100%; gap: 8px; }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-acts .u4-btn{ width: 100%; flex: none; }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-an{ order: 2; flex: none; text-align: left; }
  html body .u4-sec .u4-rec{ --u4-thumb: min(210px, 46cqw); }
  /* the e-PAN: full stage width, its buttons side by side under it */
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-sheet{ width: calc(100cqw - 2 * var(--u4-sx)); max-width: 420px; }
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-canvas{ padding-bottom: 0; }
}
@media (max-width: 1023px){
  html body .u4-sec .u4-rec{ --u4-thumb: min(220px, 38cqw); }
  html body .u4-sec .u4-stage{ margin-top: 20px; }
  html body .u4-sec .u4-fx{ margin-top: 20px; padding-top: 0; }
}

/* ---- phones: tighter, the sheet beside its buttons ---- */
@media (max-width: 600px){
  html body .u4-sec .u4-rec{ --u4-thumb: min(150px, 42cqw); --u4-top: 18px; }
  html body .u4-sec .u4-stage{ margin-top: 14px; }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-canvas{ padding: 16px 0 16px var(--u4-sx); }
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-bar{ padding: 16px var(--u4-sx); gap: 8px; }
  html body .u4-sec .u4-rec[data-shape="square"] .u4-sheet{ padding: 6px 6px 36px; }
  html body .u4-sec .u4-cap{ margin-top: 8px; font-size: 12.5px; }
  html body .u4-sec .u4-an{ font-size: 12.5px; }
  html body .u4-sec .u4-fx{ margin-top: 4px; }
  html body .u4-sec .u4-facts > .u4-f,
  html body .u4-sec .u4-facts.is-acct > *{ padding: 11px 0; }
  html body .u4-sec .u4-f dd{ margin-top: 4px; }
  html body .u4-sec .u4-gl{ margin-top: 6px; }
  html body .u4-sec .u4-gl > .u4-f + .u4-f{ margin-top: 10px; }
  html body .u4-sec .u4-gl dd{ margin-top: 3px; }
  html body .u4-sec .u4-qb{ min-height: 50px; }
}
@media (max-width: 374px) and (max-height: 760px){
  html body .u4-sec .u4-rec{ --u4-thumb: min(132px, 40cqw); }
}
/* one rhythm again: the three certificate cards share one (compact) height per screen size; the bank keeps its own */
@media (min-width: 1440px){
  html body .u4-sec .u4-rec:not([data-kind="acct"]){ min-height: 495px; }
}
@media (min-width: 1280px) and (max-width: 1439px){
  html body .u4-sec .u4-rec:not([data-kind="acct"]){ min-height: 522px; }
}
@media (min-width: 1024px) and (max-width: 1279px){
  html body .u4-sec .u4-rec:not([data-kind="acct"]){ min-height: 554px; }
}
/* phones: the e-PAN a little narrower, its buttons closer under it */
@media (max-width: 600px){
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-sheet{ width: calc(86cqw - 2 * var(--u4-sx)); }
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-bar{ padding: 12px var(--u4-sx) 16px; gap: 8px; }
}
/* the toolbar's top edge continues the line above the last arrow row */
@media (min-width: 1328px){
  html body .u4-sec .u4-more{ padding-bottom: 16px; }
}
/* beside the sheet the buttons are narrower: a long label ("Request verification letter") wraps inside its button */
@media (max-width: 1327px){
  html body .u4-sec .u4-rec:is([data-shape="portrait"], [data-shape="square"]) .u4-acts .u4-btn{
    white-space: normal; text-align: center; line-height: 1.25; padding-top: 8px; padding-bottom: 8px;
  }
}
/* the smallest phones: the e-PAN's two buttons stack, so neither label is cut */
@media (max-width: 374px){
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-acts{ flex-direction: column; }
  html body .u4-sec .u4-rec[data-shape="landscape"] .u4-acts .u4-btn{ flex: none; width: 100%; }
}