/* ============================================================================================================
   IVQA public website — page layouts, Release A (UX track) — ivqa-site-pages.css   (IVQA_SITE_RELA_20261003)
   Loaded by views/menu.php right after ivqa-site.css (same filemtime cache-buster), on ivqa.org pages only.
   Owns: the header / door panels / drawer / footer structure of IA §2, and the layouts of the Release A pages.
   Tokens (--s-*) and components come from ivqa-site.css; nothing here defines colours outside those tokens except the
   two nav tints already used by ivqa-site.css §37 (#e4e9f1 hover, #e7efff active) and, for the home's illustrated public
   results and organization marks (P6) and the door pages' family accents (P7), the VISUAL_HANDOFF §1.1 / §2.1 palette (result
   colours, slate, navy, panel tints).
   Sections: P1 header · P2 door panels · P3 bar + drawer below the burger breakpoint · P4 footer · P5 reduced motion ·
   P6 home (MP §F, CM HOME-01..07; batch U1) · P7 door pages /institutions and /companies (MP §G, §H; batch U2) ·
   P8 shared pages /platform, /how-verification-works and /statuses (MP §M.2, §K.1, §K.2; batch U3).
   ============================================================================================================ */

/* ---------- P1. Header (IA §2.1): five items, two split doors, three actions -------------------------------- */
.s-nav__in { gap: 18px; }
.s-nav__menu > li > a, .s-nav__menu > li > button { height: 40px; padding: 0 10px; }
/* split door: the label is a link to the door page, the chevron is its own button (aria-expanded) that opens the panel */
.s-nav__menu > li.s-nav__door { display: flex; align-items: center; }
.s-nav__menu > li > a.s-nav__doorlink { padding-right: 3px; border-radius: 10px 0 0 10px; }
.s-nav__menu > li > button.s-nav__chev { padding: 0 9px 0 4px; border-radius: 0 10px 10px 0; color: var(--s-muted); }
.s-nav__menu > li > button.s-nav__chev svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: 1; margin: 0; }
.s-nav__menu > li.s-nav__door:hover > a, .s-nav__menu > li.s-nav__door:hover > button,
.s-nav__menu > li.s-nav__door.is-open > a, .s-nav__menu > li.s-nav__door.is-open > button { background: #e4e9f1; color: var(--s-ink); }
.s-nav__menu > li > a.s-nav__doorlink.is-active, .s-nav__menu > li > a.s-nav__doorlink.is-active + button.s-nav__chev { background: #e7efff; color: var(--s-blue); }
.s-nav__menu > li > button.s-nav__chev:focus-visible { border-radius: 0 10px 10px 0; }
/* actions: Verify (ghost, QR icon) · Log in · Create account — Log in always sits between Verify and Create account */
.s-nav__cta { gap: 6px; }
.s-body a.s-nav__verify { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 1px solid var(--s-line-strong); border-radius: 10px; background: transparent; color: var(--s-ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; letter-spacing: -.004em; }
.s-body a.s-nav__verify:hover { border-color: var(--s-blue); color: var(--s-blue-ink); background: #fff; }
.s-nav__verify svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--s-blue); }
.s-nav__cta .s-nav__text.s-nav__login { padding: 0 10px; height: 40px; display: inline-flex; align-items: center; }
/* "Verify a document or credential" from 1400 px (OWNER_DECISIONS §6 / §9); "Verify" below. The 1200 px container holds
   logo + 5 items + the long label only with the item gaps and button padding tightened (measured with live_diag: 0 px of
   free space at the 1100–1399 spacing, ~30 px with this spacing, identical at 1400, 1440 and 1920 px). */
@media (min-width: 1400px) {
  .s-nav__in { gap: 16px; }
  .s-nav__menu > li > a, .s-nav__menu > li > button { padding: 0 9px; }
  .s-nav__menu > li > a.s-nav__doorlink { padding-right: 3px; }
  .s-nav__menu > li > button.s-nav__chev { padding: 0 8px 0 3px; }
  .s-nav__cta { gap: 4px; }
  .s-body a.s-nav__verify { gap: 6px; padding: 0 10px; }
  .s-nav__cta .s-nav__text.s-nav__login { padding: 0 8px; }
}
@media (max-width: 1239.98px) {
  .s-nav__in { gap: 12px; }
  .s-nav__menu > li > a, .s-nav__menu > li > button { padding: 0 8px; font-size: 14px; }
  .s-nav__menu > li > a.s-nav__doorlink { padding-right: 2px; }
  .s-nav__menu > li > button.s-nav__chev { padding: 0 7px 0 3px; }
  .s-body a.s-nav__verify { padding: 0 10px; font-size: 14px; }
  .s-nav__cta .s-nav__text.s-nav__login { padding: 0 8px; font-size: 14px; }
  .s-nav__cta .s-nav__create { padding: 0 14px; font-size: 14px; }
}

/* ---------- P2. Door panels (IA §2.2): Start here · What you issue · Control & insight, one aside line ------- */
.s-mega__in.s-mega__in--door { grid-template-columns: minmax(0, 1fr); padding-top: 28px; padding-bottom: 24px; }
.s-mega__main.s-mega__main--door { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-right: 0; }
.s-mega--door .s-mega__col { gap: 2px; }
.s-mega--door .s-mega__h { margin: 0 0 10px; }
.s-mega__aside { border-top: 1px solid var(--s-line); background: #f8fafc; }
.s-body .s-mega__aside p.s-wrap { margin: 0 auto; padding-top: 14px; padding-bottom: 14px; font-size: 14.5px; color: var(--s-text); }
.s-body .s-mega__aside a { color: var(--s-blue); font-weight: 600; margin-left: 4px; }
.s-body .s-mega__aside a:hover { color: var(--s-blue-hover); }
@keyframes sMegaIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.s-nav__menu > li.is-open > .s-mega { animation: sMegaIn .18s ease-out both; }

/* ---------- P3. Below 1100 px (IA §2.3): logo · compact Verify · burger; drawer with Create account first ----- */
@media (max-width: 1099.98px) {
  .s-nav__cta { gap: 8px; }
  .s-nav__cta .s-nav__create, .s-nav__cta .s-nav__text.s-nav__login { display: none; }
  .s-body a.s-nav__verify { height: 44px; padding: 0 14px; font-size: 15px; }
}
.s-drawer nav.s-dnav { display: flex; flex-direction: column; gap: 2px; }
.s-drawer nav.s-dnav a.s-dnav__create { display: inline-flex; min-height: 48px; margin-bottom: 10px; color: #fff; font-size: 16px; }
.s-drawer nav.s-dnav a.s-dnav__row { display: flex; align-items: center; min-height: 48px; padding: 0 10px; border-radius: 10px; color: var(--s-ink); font-size: 16px; font-weight: 600; }
.s-drawer nav.s-dnav a.s-dnav__row:hover { background: var(--s-bg-alt); }
.s-dnav__grp { position: relative; }
.s-drawer nav.s-dnav .s-dnav__grp > a.s-dnav__row { padding-right: 60px; }
/* the ▸ toggle is a separate control beside the row link: the row opens its page in one tap, the toggle opens the group */
.s-drawer nav.s-dnav details.s-dnav__more { border-top: 0; }
.s-drawer nav.s-dnav details.s-dnav__more > summary { position: absolute; top: 2px; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 1px solid var(--s-line); border-radius: 10px; background: #fff; color: var(--s-ink); cursor: pointer; list-style: none; }
.s-drawer nav.s-dnav details.s-dnav__more > summary::-webkit-details-marker { display: none; }
.s-drawer nav.s-dnav details.s-dnav__more > summary::after { content: none; }
.s-drawer nav.s-dnav details.s-dnav__more > summary svg { width: 14px; height: 14px; transition: transform .15s; }
.s-drawer nav.s-dnav details.s-dnav__more[open] > summary svg { transform: rotate(180deg); }
.s-dnav__list { display: grid; margin: 0 0 8px 10px; padding-left: 10px; border-left: 2px solid var(--s-line); }
.s-drawer nav.s-dnav .s-dnav__list a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--s-text); font-size: 15px; font-weight: 500; }
.s-drawer nav.s-dnav .s-dnav__list a:hover { background: var(--s-bg-alt); color: var(--s-ink); }
@keyframes sDrawerIn { from { opacity: .4; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.s-drawer.is-open .s-drawer__panel { animation: sDrawerIn .22s ease-out both; }

/* ---------- P4. Footer (IA §2.5): role line, four columns, legal row ------------------------------------------- */
.s-footer .s-footer__top--rela { padding-bottom: 32px; }
.s-footer .s-footer__top--rela .s-footer__brand p { max-width: 620px; }
.s-footer .s-footer__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 44px 0 40px; }
.s-footer .s-footer__grid--4 ul { gap: 4px; }
.s-footer .s-footer__grid--4 li a { display: inline-block; padding: 5px 0; line-height: 1.5; }
.s-footer__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.s-footer__copy .s-footer__legal { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; }
/* critic R2-m5: 900-1023 px keeps the desktop's four open columns (the 2 x 2 grid made the footer 1,267-1,400 px, 1.4-1.65
   tablet screens); the long Product & verification labels get the widest column so only "Verify a document or credential"
   can wrap. >= 1024 px is the desktop layout, unchanged. */
@media (min-width: 900px) and (max-width: 1099.98px) { .s-footer .s-footer__grid--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .8fr); gap: 28px 24px; } }
/* the four columns are <details> groups (critic R1-C6). From 900 px (critic R2-m5; was 641 px) they are open (inline script in
   footer.php) and the summary is only the column heading: no marker, no chevron, not clickable; ::details-content keeps the
   links visible without JS. */
.s-fgrp { min-width: 0; }
.s-fgrp > summary.s-fgrp__sum { display: block; list-style: none; }
.s-fgrp > summary.s-fgrp__sum::-webkit-details-marker { display: none; }
@media (min-width: 900px) {
  .s-fgrp > summary.s-fgrp__sum { pointer-events: none; cursor: default; }
  .s-fgrp::details-content { content-visibility: visible; }
}
/* phones and portrait tablets (< 900 px; critic R2-m5 extends the phone pattern from 640 px): IA §2.5 lists the columns; at
   390 px the open lists were 1,706 px (2 screens, 18-21 % of a page). Each group is now a 48 px row with a chevron, closed by
   default; open, it lists its links as 44 px rows. Brand line, address, the two marks and the legal row are unchanged. */
@media (max-width: 640px) {
  .s-footer .s-footer__top--rela { padding-bottom: 24px; }
  .s-footer .s-footer__top--rela .s-footer__brand img { margin-bottom: 16px; }
}
@media (max-width: 899.98px) {
  .s-footer .s-footer__grid--4 { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 0 22px; }  /* the brand block's rule tops the first row */
  .s-fgrp { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .s-fgrp > summary.s-fgrp__sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px; cursor: pointer; border-radius: 8px; }
  .s-fgrp > summary.s-fgrp__sum:focus-visible { outline: 2px solid #d4d4d8; outline-offset: 2px; }
  .s-footer .s-fgrp .s-footer__h { margin: 0; font-size: 16px; line-height: 1.3; }
  /* the chevron is a CSS border (no inline SVG: the footer is on every page, /platform keeps its <= 100 KiB of inline SVG) */
  .s-fgrp > summary.s-fgrp__sum::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 8px 0 0; border: solid #a1a1aa; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
  .s-fgrp[open] > summary.s-fgrp__sum::after { margin-top: 5px; transform: rotate(-135deg); }
  .s-footer .s-footer__grid--4 ul { gap: 0; padding: 0 4px 10px; }
  .s-footer .s-footer__grid--4 li { font-size: .97rem; line-height: 1.3; }
  .s-footer .s-footer__grid--4 li a { display: block; padding: 12.5px 0; line-height: 1.3; }  /* one line = 44 px; a wrapped label keeps its ↗ inline */
}

/* ---------- P5. Reduced motion: panels and drawer appear at once ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .s-nav__menu > li.is-open > .s-mega, .s-drawer.is-open .s-drawer__panel { animation: none; }
  .s-drawer nav.s-dnav details.s-dnav__more > summary svg, .s-fgrp > summary.s-fgrp__sum::after { transition: none; }
}

/* ---------- P6. Home (MP §F, CM HOME-01..07; batch U1) -------------------------------------------------------------
   hm- classes only. Figures are V2 (.s-anim--v2): their containers have a definite width (block or stretched grid item),
   and the desktop figure columns are >= 560 px wide so the -m composition only shows when the figure itself is narrow (VH §1.4). */
.hm-head { margin-bottom: 40px; }
.hm-links { justify-content: center; }
.hm-links .s-link, .hm-org__body .s-link, .hm-start__demo .s-link, .hm-hero__verify .s-link { min-height: 44px; }  /* tap target (MP §O) */
/* S1 hero (IVQA_SITE_HERO_DEMO_20261003 — OWNER_DECISIONS 17 + 18, HERO_BRIEF): text LEFT (eyebrow, H1, lead, the two doors and
   the Verify line, left-aligned) and the end-to-end product demo RIGHT from 1100 px, its column 600–640 px so the desktop
   composition never draws text under 12 px; below 1100 px the text comes first and the demo follows, both at the
   container's left edge — never centred. The hero text paints at full opacity at once (no entrance: it is the LCP element,
   critic R3-m4); the demo's box is reserved by its viewBox.
   Web-font swap (critic round 1, C1): until Plus Jakarta Sans arrives the whole hero (text, demo rail, control, chip) sets in
   a metric-matched local face ("IVQA Hero A / R / D": Arial or Liberation Sans, Roboto, DejaVu Sans, size-adjusted per weight
   a hair NARROWER than the web font, so the fallback never needs more lines); the H1 scales with its column (the same line
   breaks across each width range) and keeps its line count, a line break follows its first part, the lead keeps its line
   count, the Verify link sits at a font-independent place (rules at the end of this block) and the legend items keep their
   web-font widths (demo block). Measured on the preview: no box or text start in the hero moves 3 px or more at the swap,
   320–1920 px (fontfit.php sweep, r1_starts.php); cold-load CLS 0.0009–0.0023 desktop, 0 phones, all of it outside the
   hero (crit_probe.php). */
@font-face { font-family: "IVQA Hero A"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"), local("Arimo-Regular"); size-adjust: 101.5%; ascent-override: 102.46%; descent-override: 21.67%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero A"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"); size-adjust: 99%; ascent-override: 105.05%; descent-override: 22.22%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero A"; font-style: normal; font-weight: 700 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"); size-adjust: 98.5%; ascent-override: 105.58%; descent-override: 22.34%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero R"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular"); size-adjust: 103.5%; ascent-override: 100.48%; descent-override: 21.26%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero R"; font-style: normal; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 104.5%; ascent-override: 99.52%; descent-override: 21.05%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero R"; font-style: normal; font-weight: 700 800; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 105.5%; ascent-override: 98.58%; descent-override: 20.85%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero D"; font-style: normal; font-weight: 400; src: local("DejaVu Sans"), local("DejaVuSans"); size-adjust: 91%; ascent-override: 114.29%; descent-override: 24.18%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero D"; font-style: normal; font-weight: 600; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); size-adjust: 83.5%; ascent-override: 124.55%; descent-override: 26.35%; line-gap-override: 0%; }
@font-face { font-family: "IVQA Hero D"; font-style: normal; font-weight: 700 800; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); size-adjust: 84.5%; ascent-override: 123.08%; descent-override: 26.04%; line-gap-override: 0%; }
.hm-hero { padding: 48px 0 40px; }
.hm-hero .hm-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(600px, 640px); gap: clamp(36px, 3.4vw, 56px); align-items: start; }
/* top-anchored (not centred) so the H1 never moves; the inset keeps it optically centred against the demo */
.hm-hero__text { min-width: 0; max-width: 560px; padding-top: clamp(28px, 4vw, 60px); text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.hm-hero { --hm-font: "Plus Jakarta Sans", "IVQA Hero A", "IVQA Hero R", "IVQA Hero D", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.hm-hero__text, .s-body .hm-hero h1, .hm-hero .hd__types, .hm-hero .hd__ctl { font-family: var(--hm-font); }
.hm-hero__text { container-type: inline-size; }
.hm-hero .s-hero__grid > div:first-child > * { animation: none; }
.hm-hero .s-eyebrow { margin-bottom: 16px; }
.s-body .hm-hero h1 { font-size: clamp(2.05rem, 1.1rem + 1.55vw, 2.75rem); margin: 0 0 16px; text-wrap: balance; }
.hm-hero .s-lead { max-width: 540px; margin: 0 0 26px; text-wrap: pretty; }
.hm-hero__doors { justify-content: flex-start; }
.hm-hero__verify { margin: 18px 0 0; font-size: .97rem; color: var(--s-muted); }
.hm-hero__verify .s-link { white-space: nowrap; }
.hm-hero__fig { width: 100%; min-width: 0; margin: 0; }
.hm-h1-short { display: none; }
/* a forced line break after the first part (it stays inline, so the whole H1 remains ONE LCP text block): the rest of the H1
   always starts a line, at a font-independent place */
.hm-hero h1 .hm-h1-long::after, .hm-hero h1 .hm-h1-short::after { content: "\A"; white-space: pre; }
@media (max-width: 1099.98px) {
  .hm-hero .hm-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hm-hero__text { max-width: 680px; padding-top: 0; }
  .hm-hero__fig { max-width: 680px; margin: 0; }
}
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .hm-hero .hm-hero__grid { grid-template-columns: minmax(0, 1fr) 600px; gap: 32px; }  /* the text column keeps >= 420 px */
}
@media (max-width: 390px) {  /* MP §F S1: the phone H1 names diplomas and documents only */
  .hm-h1-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hm-h1-short { display: inline; }
}
@media (max-width: 639.98px) {
  .hm-hero { padding: 36px 0 28px; }
  .hm-hero__doors { flex-direction: column; align-items: stretch; width: 100%; }
  .hm-hero__doors .s-btn { width: 100%; }
}
.s-body .hm-hero__verify { margin-top: 18px; }  /* critic R1-m1 + hero R2-m1: .s-body p zeroed the top margin at every width (the line sat ~5 px under the buttons at 1100–1131 px) */
/* font-independent heights (C1). The H1 is sized in % of its column (cqi), so its line breaks are the same at every width of
   a range, and it keeps that many lines (≤ 390: 4 · 391–479: 4 · 480–1099: 3 · ≥ 1100: 4 — "Diplomas, employee / badges and
   documents / anyone can check in / one scan"), large enough to stay the LCP element next to the lead on phones; the lead
   keeps its line count at 18 px (5 lines under 312 px of measure, 4 up to 408, 3 above). */
@supports (width: 1cqi) {
  .s-body .hm-hero h1 { font-size: 10.4cqi; min-height: calc(4 * 1.12em); text-wrap: balance; }
  @media (min-width: 391px) { .s-body .hm-hero h1 { font-size: 8.4cqi; min-height: calc(4 * 1.12em); text-wrap: pretty; } }
  @media (min-width: 480px) { .s-body .hm-hero h1 { font-size: 6.6cqi; min-height: calc(3 * 1.12em); text-wrap: balance; } }
  @media (min-width: 640px) { .s-body .hm-hero h1 { font-size: 6cqi; } }
  @media (min-width: 1100px) { .s-body .hm-hero h1 { font-size: 8.9cqi; min-height: calc(4 * 1.12em); text-wrap: pretty; } }
}
.hm-hero .s-lead { min-height: calc(3 * 1.6em); }
@media (max-width: 444.98px) { .hm-hero .s-lead { min-height: calc(4 * 1.6em); } }
@media (max-width: 347.98px) { .hm-hero .s-lead { min-height: calc(5 * 1.6em); } }
/* the Verify line puts its link at a font-independent place: after a 12.75em column for the question (one row, when the
   text column has room for both: 28.25em), else on its own row */
.hm-hero__verify { display: grid; grid-template-columns: auto; justify-content: start; justify-items: start; align-items: baseline; }
@container (min-width: 28.25em) { .hm-hero__verify { grid-template-columns: 12.75em auto; } }
/* HOME-01 demo V2 (partials/site_hero_demo.php; IVQA_SITE_HERO_V2_20261004, OWNER_DECISIONS 19): ONE general workflow told for six
   items on one stage, autoplaying in a continuous loop (motion: the HD-GEN block at the end of this file). The desktop
   composition shows while the stage is >= 600 px wide, else the phone composition (<= 440 px). No chip and no visible
   button: the "illustration with sample data" statement is in the screen-reader sentence, and the Pause / Play control
   (WCAG 2.2.2, a native button) is clipped until it has KEYBOARD focus (:focus-visible) — then it shows as a pill in the
   stage's top-right corner (phones) or in the bottom-right corner of the editor canvas (desktop composition: clear of the
   title bar's type pill); hover, off-screen and a hidden tab also pause the loop. Under the stage, the six types (the
   current one blue, with a progress line); at rest (no JS, reduced motion) all six read the same. */
.hd { margin: 0; min-width: 0; }
.hd__stage { position: relative; container: hd / inline-size; }
.hd__d svg, .hd__m svg { display: block; width: 100%; height: auto; }
.hd__m { display: none; }
@container hd (max-width: 599.98px) { .hd__d { display: none; } .hd__m { display: block; } }
@supports not (container-type: inline-size) { @media (max-width: 639.98px) { .hd__d { display: none; } .hd__m { display: block; } } }
@media (max-width: 639.98px) { .hd__stage, .hd__cap { max-width: 440px; } }
.hd__ctl { position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #1b2a4a; font: 700 13px/1 var(--s-font); white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(11, 31, 58, .06); }
.hd__ctl:focus-visible { outline: 0; box-shadow: var(--s-ring); }
.hd__ctl:not(:focus-visible) { width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); box-shadow: none; }
.hd__ctl[hidden] { display: none; }
@container hd (min-width: 600px) { .hd__ctl { top: auto; right: 6.5%; bottom: 9.5%; } }
.hd__clock { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.hd__cap { margin: 12px 0 0; }
/* the legend's box does not depend on the font: it reserves its widest wrap (2 lines beside / under a desktop composition, 3
   on phones) and each item keeps its web-font width, so the web-font swap never changes the demo's height (CLS) */
.hd__types { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 20px; min-height: 59px; font: 700 13px/1.35 var(--s-font); }
@media (max-width: 639.98px) { .hd__types { min-height: 91px; gap: 4px 18px; } }
.hd__types li { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 0 6px; color: #334155; }
.hd__types li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #2563eb; opacity: 0; transform: scaleX(0); transform-origin: 0 50%; }
.hd__types svg { width: 16px; height: 16px; flex: none; }
.hd__types li:nth-child(1) { min-width: 11.07em; } .hd__types li:nth-child(2) { min-width: 5.9em; } .hd__types li:nth-child(3) { min-width: 10.66em; }
.hd__types li:nth-child(4) { min-width: 9.43em; } .hd__types li:nth-child(5) { min-width: 10.12em; } .hd__types li:nth-child(6) { min-width: 6.98em; }
/* S2 two kinds of organizations: a mirrored pair of cards, institution first */
.hm-orgs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hm-org { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--s-line); border-radius: 24px; overflow: hidden; }
.hm-org__fig .s-anim { margin: 0; }
.hm-org__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 28px; }
.s-body .hm-org__body h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 2px; font-size: 1.35rem; }
.hm-org__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; }
.hm-org__mark svg { width: 22px; height: 22px; }
.hm-org--inst .hm-org__mark { color: #2563eb; background: #eff6ff; }
.hm-org--co .hm-org__mark { color: #1b2a4a; background: #e9eef5; }
.hm-org__body p { margin: 0; color: var(--s-text); }
.s-body .hm-org__body .hm-org__who { color: var(--s-muted); font-size: .95rem; }
.hm-org__body .s-link { margin-top: auto; padding-top: 8px; align-self: flex-start; }
@media (max-width: 767.98px) { .hm-orgs__grid { grid-template-columns: minmax(0, 1fr); } .hm-org__body { padding: 22px 20px 24px; } }
/* S3 what gets issued: two rows, Institutions / Companies, each on its family's panel tint with the S2 mark (VH §1.1, §2.1);
   title-only tiles; text-free thumbs */
.hm-issued__row { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border-radius: 20px; background: #f5f8ff; }
.hm-issued__row--co { background: #f4f6fa; }
.hm-issued__row + .hm-issued__row { margin-top: 14px; }
.s-body .hm-issued__h { display: flex; align-items: center; gap: 12px; margin: 0; padding-left: 4px; font-size: 1.15rem; }
.hm-issued__row--inst .hm-org__mark { color: #2563eb; background: #fff; }
.hm-issued__row--co .hm-org__mark { color: #1b2a4a; background: #fff; }
.hm-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.s-body a.hm-tile { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--s-line); border-radius: 16px; overflow: hidden; color: var(--s-ink); font-weight: 600; transition: transform .2s, box-shadow .2s, border-color .2s; }
.hm-tile__art { display: block; padding: 10px 12px 0; }
.hm-tile__art img { width: 100%; max-width: 160px; height: auto; margin: 0 auto; }
.hm-tile__t { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; flex: 1; min-height: 48px; padding: 12px 14px; font-size: .97rem; line-height: 1.3; }
/* the item's family under its name (critic R1-C4b): Credential (IVQA blue ink on the blue tint) / Document (slate on grey).
   Critic R2-m1: the tag is pinned to the tile's bottom (margin-top: auto in the flex column), so a two-line name ("Academic
   transcript", "Supplier attestation") no longer pushes its tag below its neighbours' — each row's tags share one line. */
.hm-tile__fam { display: inline-block; margin-top: auto; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; }
.hm-tile__fam--c { color: #1e40af; background: #eff6ff; }
.hm-tile__fam--d { color: #334155; background: #f1f5f9; }
@media (hover: hover) and (pointer: fine) { .s-body a.hm-tile:hover { transform: translateY(-2px); box-shadow: var(--s-shadow); border-color: var(--s-line-strong); color: var(--s-ink); } }
@media (max-width: 1099.98px) {
  .hm-issued__row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .hm-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 559.98px) {  /* CM HOME-03: 2-up grid, art 96 px, titles only, group labels kept */
  .hm-issued__row { padding: 14px 12px; border-radius: 16px; }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hm-tile__art { padding: 8px 8px 0; }
  .hm-tile__art img { max-width: 96px; }
  .hm-tile__t { padding: 10px 12px; font-size: .93rem; min-height: 44px; }
}
/* S4 how anyone checks: three public results (HTML, text exposed), each with its line; chip at the figure's top-left */
.hm-trio { max-width: 1080px; margin: 0 auto; }
.hm-trio .hm-chip { position: static; display: inline-block; max-width: 100%; margin: 0 0 14px; }
.hm-trio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
/* each line sits directly under its card (critic R1-m2: a shared subgrid row left a ~250 px empty band under the short cards).
   Each card ends where its page ends, as on check.ivqa.org: Revoked and Not found are short because they show no details. */
.hm-trio__col { display: flex; flex-direction: column; min-width: 0; }
.hm-res { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: var(--s-shadow); padding: 18px 18px 16px; }
.hm-res__url { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #f1f5f9; color: #334155; font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.s-body .hm-res__title { margin: 12px 0 10px; color: var(--s-ink); font-weight: 700; font-size: 1.05rem; }
.hm-res__url + .hm-res__state { margin-top: 12px; }
.s-body .hm-res__state { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; font-weight: 800; font-size: .95rem; letter-spacing: .04em; }
.hm-res__state svg { flex: none; width: 18px; height: 18px; }
.hm-res--valid .hm-res__state { color: #15803d; background: #dcfce7; }
.hm-res--revoked .hm-res__state { color: #b91c1c; background: #fee2e2; }
.hm-res--notfound .hm-res__state { color: #991b1b; background: #fef2f2; }  /* check.ivqa.org .is-invalid (kit RESULT, REQUESTS V0-R6) */
.s-body .hm-res__sent { margin: 10px 0 0; color: #475569; font-size: .9rem; line-height: 1.5; }
.hm-res__rows { margin: 12px 0 0; }
.hm-res__rows div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid #e5e7eb; }
.hm-res__rows dt { color: #475569; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hm-res__rows dd { margin: 0; color: var(--s-ink); font-weight: 600; font-size: .93rem; }
.s-body .hm-trio__line { margin: 14px 4px 0; color: var(--s-text); font-size: .95rem; line-height: 1.55; }
.hm-trio__k { color: var(--s-ink); }
.s-body .hm-check__share { margin: 30px auto 0; max-width: 640px; text-align: center; color: var(--s-muted); }
.hm-check .hm-links { margin-top: 14px; }
@media (max-width: 899.98px) { .hm-trio__grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; gap: 26px; } .hm-trio { max-width: 480px; } }
/* S5 / S6: text beside a figure from 1200 px (figure column 560-600 px, text column >= 496 px, so the H2 keeps <= 3 lines);
   stacked below 1200 px, text first, the figure centred at <= 680 px */
.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(560px, 600px); gap: 56px; align-items: center; }
.hm-split--rev { grid-template-columns: minmax(560px, 600px) minmax(0, 1fr); }
.hm-split--rev .hm-split__fig { order: -1; }
.hm-split__fig { min-width: 0; width: 100%; }
.hm-split__fig .s-anim { margin: 0; }
.s-body .hm-split__text h2 { font-size: clamp(1.7rem, 1.2rem + 1vw, 2.15rem); }  /* <= 3 lines in the 496 px column */
.hm-split__text .s-lead { margin-bottom: 14px; }
.s-body .hm-record__ctl { margin: 0; color: var(--s-text); }
.hm-split__text .hm-links { justify-content: flex-start; margin-top: 22px; }
.hm-split--solo, .hm-split--solo.hm-split--rev { grid-template-columns: minmax(0, 1fr); }
.hm-split--solo .hm-split__text { max-width: 760px; margin: 0 auto; text-align: center; }
.hm-split--solo .hm-split__text .hm-links { justify-content: center; }
.hm-links .s-link, .hm-org__body .s-link, .hm-start__demo .s-link, .hm-hero__verify .s-link { min-height: 44px; }  /* tap target (MP §O) */
@media (max-width: 1199.98px) {
  .hm-split, .hm-split--rev { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hm-split--rev .hm-split__fig { order: 0; }
  .hm-split__fig { max-width: 680px; margin: 0 auto; }
  .hm-split__text { max-width: 720px; margin: 0 auto; text-align: center; }
  .hm-split__text .hm-links { justify-content: center; }
}
/* S7 start: dark band, one path per organization type (institution first), prices as text, Request a demo as a link */
.hm-start__band { padding: 56px; border-radius: var(--s-radius-lg); background: radial-gradient(700px 300px at 10% 0%, rgba(37, 99, 235, .55), transparent 60%), var(--s-navy); color: #cbd5e1; }
.s-body .hm-start__band h2 { margin: 0 0 28px; color: #fff; text-align: center; }
.hm-start__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 940px; margin: 0 auto; }
.hm-start__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.s-body .hm-start__opt p { margin: 0; color: #cbd5e1; }
.s-body .hm-start__demo { margin: 26px 0 0; text-align: center; color: #cbd5e1; }
.s-body .hm-start__demo a.s-link { color: #bfdbfe; }
.s-body .hm-start__demo a.s-link:hover { color: #fff; }
@media (max-width: 767.98px) {
  .hm-start__band { padding: 36px 20px; }
  .hm-start__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-start__opt { padding: 22px 18px; }
  .hm-start__opt .s-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .s-body a.hm-tile { transition: none; } .s-body a.hm-tile:hover { transform: none; } }

/* ---------- P7. Door pages /institutions and /companies (MP §G, §H; CM INST-01..10, COMP-01..10; batch U2) ----------
   dr- classes only; the two pages share one layout and differ by family (VH §2.1): .dr--inst = IVQA blue on the blue panel
   (#eff6ff, sections #f5f8ff), round dots; .dr--co = navy on the slate panel (#e9eef5, sections #f4f6fa), square dots.
   Actions stay IVQA blue on both. Figures are V2 (.s-anim--v2) in a definite-width column of 560-600 px from 1200 px (VH §1.4,
   REQUESTS V0-R3); below 1200 px they stack under the text at <= 680 px. A section whose figure is missing (--solo) keeps
   its text column, left-aligned, centred in the container. */
.dr--inst { --dr-ac: #2563eb; --dr-tint: #eff6ff; --dr-line: #bfdbfe; --dr-bg: #fff; }
.dr--co { --dr-ac: #1b2a4a; --dr-tint: #e9eef5; --dr-line: #c5cfdd; --dr-bg: #fff; }
.dr--inst.dr-bg { --dr-bg: #f5f8ff; background: var(--dr-bg); }
.dr--co.dr-bg { --dr-bg: #f4f6fa; background: var(--dr-bg); }
.dr-links { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.dr-links .s-link, .dr-also .s-link, .dr-card { min-height: 44px; }  /* tap targets (MP §O) */
/* I1 / C1 hero: text beside the workspace figure from 1200 px (text column >= 544 px), stacked below */
.s-page-head.dr-hero { padding: clamp(36px, 2vw + 26px, 64px) 0 clamp(36px, 2.4vw + 26px, 72px); }
.dr-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(560px, 580px); gap: 48px; align-items: center; }
.dr-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.dr-hero__text { min-width: 0; }
.dr-hero__grid--solo .dr-hero__text { max-width: 760px; width: 100%; margin: 0 auto; }  /* same column as a solo or stacked section */
.s-body .dr-hero h1 { font-size: clamp(2rem, 1.25rem + 1.6vw, 2.6rem); margin: 0 0 16px; }
.dr-hero .s-lead { max-width: 640px; margin: 0 0 26px; }
.s-body .dr-hero__note { margin: 14px 0 0; color: var(--s-muted); font-size: .95rem; }
.dr-hero__fig { min-width: 0; width: 100%; }
.dr-hero__fig .s-anim { margin: 0; }
/* I2-I8 / C2-C8: text beside a figure from 1200 px; --rev puts the figure first */
.dr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(560px, 600px); gap: 56px; align-items: center; }
.dr-split--rev { grid-template-columns: minmax(560px, 600px) minmax(0, 1fr); }
.dr-split--rev .dr-split__fig { order: -1; }
.dr-split__text { min-width: 0; }
.dr-split__fig { min-width: 0; width: 100%; }
.dr-split__fig .s-anim { margin: 0; }
.s-body .dr-split__text h2, .s-body .dr-faq h2 { font-size: clamp(1.7rem, 1.2rem + 1vw, 2.15rem); }
.dr-split__text .s-lead { margin: 0; }
.dr-split--solo, .dr-split--solo.dr-split--rev { grid-template-columns: minmax(0, 1fr); }
.dr-split--solo .dr-split__text { max-width: 760px; width: 100%; margin: 0 auto; }
.s-body .dr-inprod { margin: 14px 0 0; color: var(--s-muted); font-size: .92rem; }
.s-body .dr-also { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--dr-tint); color: var(--s-text); font-size: .97rem; }
.dr-also .s-link { display: flex; width: fit-content; }  /* own row: a 44 px target never stretches the sentence's lines */
/* AA on the company tint (critic R1-C5): #2563eb on #e9eef5 is 4.43 : 1; #1d4ed8 is 5.75 : 1 (6.1 : 1 on the institution tint) */
.dr-also .s-link { color: #1d4ed8; }
.dr-also .s-link:hover { color: #1e3a8a; }
.dr-bul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.dr-bul li { position: relative; padding-left: 22px; color: var(--s-text); }
.dr-bul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--dr-ac); }
.dr--inst .dr-bul li::before { border-radius: 50%; }
/* I3 / C3 step by step (CSSM JOURNEY-STRIP-01, VH §3.3; armed by ivqa-site.js §39): six columns on a line from 1100 px,
   3 x 2 below, a numbered vertical list on phones (CM mV: number, title, one line) */
.dr-head { margin-bottom: 40px; }
.dr-steps { position: relative; }
.dr-steps__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.dr-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dr-step__top { display: flex; align-items: center; gap: 10px; }
.dr-step__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--dr-ac); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 0 0 6px var(--dr-bg); }
.dr--co .dr-step__n { border-radius: 10px; }
.dr-step__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--dr-tint); color: var(--dr-ac); box-shadow: 0 0 0 4px var(--dr-bg); }
.dr-step__ic svg { width: 22px; height: 22px; }
.s-body .dr-step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.s-body .dr-step p { margin: 0; color: var(--s-text); font-size: .95rem; line-height: 1.5; }
.dr-steps__line { position: absolute; z-index: 0; top: 18px; left: 19px; right: calc((100% - 100px) / 6 - 19px); height: 2px; background: var(--dr-line); }
.dr-steps__line-y { display: none; }
@media (max-width: 1099.98px) {
  .dr-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .dr-steps__line { display: none; }
}
@media (max-width: 639.98px) {
  .dr-head { margin-bottom: 24px; }
  .dr-steps__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dr-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .dr-step__ic { display: none; }
  .s-body .dr-step h3 { margin: 7px 0 4px; }
  .dr-steps__line-y { display: block; position: absolute; z-index: 0; left: 18px; top: 19px; bottom: 0; width: 2px; background: var(--dr-line); }
  .dr-step:last-child { background: var(--dr-bg); }  /* hides the line below the last circle, whatever the text height */
}
/* I6 the three credentials: linked cards in the figure column (one visual for the section); phones: thumb 72 px */
.dr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.s-body a.dr-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; background: #fff; border: 1px solid var(--s-line); border-radius: 18px; color: var(--s-ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.dr-card__art { display: block; width: 128px; padding: 6px; border-radius: 12px; background: var(--dr-tint); }
.dr-card__art img { display: block; width: 100%; height: auto; }
.dr-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dr-card__t { font-weight: 700; font-size: 1.08rem; }
/* the credential's definition (critic R1-C4a); the whole card is the link, the arrow only marks it */
.dr-card__d { color: var(--s-text); font-weight: 400; font-size: .95rem; line-height: 1.45; }
.dr-card__go { color: var(--s-blue); font-weight: 700; font-size: 1.1rem; transition: transform .2s; }
@media (hover: hover) and (pointer: fine) { .s-body a.dr-card:hover .dr-card__go { transform: translateX(3px); } }
@media (hover: hover) and (pointer: fine) { .s-body a.dr-card:hover { transform: translateY(-2px); box-shadow: var(--s-shadow); border-color: var(--s-line-strong); color: var(--s-ink); } }
/* I9 / C9 questions: full width, all closed */
.dr-faq { max-width: 860px; }
.dr-faq h2 { margin-bottom: 24px; }
/* I10 / C10 start: the dark band; Request a demo as the light outline button. Below 1100 px the buttons go under the text
   (the shared .s-cta keeps two columns down to 768 px, which squeezed the H2 to one word per line at 768) */
.dr-start { padding-top: 24px; }
@media (max-width: 1099.98px) { .dr-start .s-cta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1199.98px) {
  .dr-hero__grid, .dr-split, .dr-split--rev { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dr-split--rev .dr-split__fig { order: 0; }
  .dr-hero__fig, .dr-split__fig { max-width: 680px; margin: 0 auto; }
  .dr-hero__text, .dr-split__text { max-width: 760px; width: 100%; margin: 0 auto; }
}
@media (max-width: 639.98px) {  /* door budget <= 11 phone screens (MP §O): tighter rhythm and type than the site default */
  .s-section.dr { padding: 36px 0; }
  .s-section.dr-start { padding-top: 8px; }
  .s-body .dr-split__text h2, .s-body .dr-faq h2, .s-body .dr-head h2 { font-size: 1.55rem; }
  .dr .s-lead, .dr-hero .s-lead { font-size: 1rem; line-height: 1.55; }
  .dr-start .s-cta { padding: 28px 20px; gap: 20px; }
  .s-page-head.dr-hero { padding: 28px 0 30px; }
  .dr-hero__btns { flex-direction: column; align-items: stretch; }
  .dr-hero__btns .s-btn { width: 100%; }
  .dr-hero__grid, .dr-split, .dr-split--rev { gap: 22px; }
  .s-body a.dr-card { gap: 12px; padding: 10px 12px 10px 10px; align-items: start; }
  .dr-card__art { width: 72px; padding: 4px; border-radius: 10px; }
  .dr-card__d { font-size: .9rem; line-height: 1.4; }
  .dr-card__go { align-self: center; }
  .dr-start .s-cta .s-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .s-body a.dr-card { transition: none; } .s-body a.dr-card:hover { transform: none; } }

/* ---------- P8. Shared pages /platform, /how-verification-works, /how-verification-works/statuses (MP §M.2, §K.1, §K.2; batch U3)
   They reuse the P7 layout (dr-hero, dr-split, dr-steps, dr-faq, dr-start) with the shared family .dr--sh: IVQA blue actions
   and numerals on the neutral panel (sections #f8fafc), neither institution blue nor company slate (VH §2.1 "Shared").
   pl- = /platform, vx- = /how-verification-works, vs- = /statuses. Figures keep the >= 560 px desktop column (VH §1.4). */
.dr--sh { --dr-ac: #2563eb; --dr-tint: #eff6ff; --dr-line: #bfdbfe; --dr-bg: #fff; }
.dr--sh.dr-bg { --dr-bg: #f8fafc; background: var(--dr-bg); }
/* P1 hero: stacked — centred text, the two doors, then the wide trust-layer figure (1120 x 520 canvas; -m below 720 px) */
.pl-hero .dr-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.pl-hero .dr-hero__text { max-width: 800px; width: 100%; margin: 0 auto; text-align: center; }
.pl-hero .s-lead { margin-left: auto; margin-right: auto; }
.pl-hero .dr-hero__btns { justify-content: center; }
.pl-hero .dr-hero__fig { max-width: 1120px; margin: 0 auto; }
/* P2-P7: the step label ties each section to the numbered steps of the hero figure and of the door steppers */
.s-body .pl-step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--s-blue-ink); font-weight: 700; font-size: .95rem; }
.pl-step__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s-blue); color: #fff; font-weight: 800; font-size: 14px; }
.s-body .pl-more { margin: 14px 0 0; color: var(--s-text); }
.s-body .pl-figcap { margin: 10px 2px 0; color: var(--s-muted); font-size: .9rem; text-align: center; }
/* a static IUI / SVG (no -m: one 400-unit composition, VH §1.4) is displayed at <= 520 px, centred in its column */
.dr--sh .dr-split__fig .s-anim:not(.s-anim--duo) { max-width: 520px; margin: 0 auto; }
/* P8 connections: one centred line and its two links */
.pl-connect__row { max-width: 820px; margin: 0 auto; text-align: center; }
.s-body .pl-connect__row > p:first-child { margin: 0; color: var(--s-text); font-size: 1.08rem; }
.pl-connect__row .dr-links { justify-content: center; }
.s-body .pl-compare, .s-body .vx-cta__more { margin: 6px 0 0; }
.s-cta .pl-compare a.s-link, .s-cta .vx-cta__more a.s-link { color: #bfdbfe; min-height: 44px; }
.s-cta .pl-compare a.s-link:hover, .s-cta .vx-cta__more a.s-link:hover { color: #fff; }
/* V1 hero: the issuer line under the Verify button */
.s-body .vx-issuers { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 14px 0 0; color: var(--s-muted); font-size: .97rem; }
.vx-issuers .s-link, .vx-shown .dr-bul .s-link { min-height: 44px; }
.vx-issuers__q { flex: 0 0 100%; }   /* the question on its own line, the two doors side by side under it (V2) */
/* V2 four steps (CSSM VFLOW-01; five until critic R1-C2): four columns on a line from 1100 px, 2 x 2 below, a numbered vertical
   list on phones */
.vx-flow .dr-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vx-flow .dr-steps__line { right: calc((100% - 72px) / 4 - 19px); }
.vx-flow .dr-step__ic svg { width: 22px; height: 22px; }
.s-body .vx-flow .dr-step p { color: var(--s-text); font-size: .97rem; }
.vx-flow .dr-step strong { color: var(--s-ink); font-weight: 700; }   /* each step's first clause: the strip scans in four beats (V2) */
/* V3 only what a verifier needs: text beside the IUI-RESULT pair from 1200 px (figure 620-680 px so the pair sits side by side) */
.vx-shown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(620px, 680px); gap: 52px; align-items: center; }
.vx-shown--solo { grid-template-columns: minmax(0, 1fr); }
.vx-shown__text { min-width: 0; }
.vx-shown--solo .vx-shown__text { max-width: 760px; width: 100%; margin: 0 auto; }
.vx-shown__fig { min-width: 0; width: 100%; }
.s-body .vx-shown h2 { font-size: clamp(1.7rem, 1.2rem + 1vw, 2.15rem); }
.vx-shown .s-lead { margin: 0; }
.vx-shown .dr-bul .s-link { display: flex; width: fit-content; }
/* "All five results, including Expired and Not yet valid": the arrow stays on the last word when the label wraps (R1-m5) —
   the link is a block (44 px target) and the arrow an inline glyph bound by a no-break space, not a flex item */
.vx-five { margin-top: 18px; }
.vx-five .s-link { display: block; width: fit-content; max-width: 100%; padding: 10px 0; line-height: 1.4; }
.vx-five .s-link::after { content: "\00a0\2192"; }
/* V3 pair (V4 folded in, critic R1-C2): the same page Valid and Revoked, side by side when the figure is >= 620 px wide, and
   under each card what to do (the /statuses table actions). Each card ends where its page ends; its line follows it. */
.vx-pair { container: vx-pair / inline-size; margin: 0; }
.vx-pair .vx-chip { position: static; display: inline-block; max-width: 100%; margin: 0 0 12px; }
.vx-pair__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 18px; align-items: start; }
@container vx-pair (min-width: 620px) { .vx-pair__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vx-pair__col { display: flex; flex-direction: column; min-width: 0; }
.s-body .vx-pair__do { margin: 12px 4px 0; color: var(--s-text); font-size: .97rem; line-height: 1.5; }
.vx-pair__do b { color: var(--s-ink); }
.s-body .vx-pair__word { margin: 0; padding: 14px 16px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; }
.vx-word { font-weight: 800; color: var(--s-ink); }
/* V5 student cards and employee badges: one card per page, under its family mark; labels as on the real page (caps) */
.vx-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.vx-person { padding: 24px; background: #fff; border: 1px solid var(--s-line); border-top: 4px solid #2563eb; border-radius: 16px; }
.vx-person--co { border-top-color: #1b2a4a; border-radius: 10px; }
.vx-person__top { display: flex; align-items: center; gap: 12px; }
.vx-person__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #eff6ff; color: #2563eb; }
.vx-person--co .vx-person__mark { border-radius: 8px; background: #e9eef5; color: #1b2a4a; }
.vx-person__mark svg { width: 24px; height: 24px; }
.s-body .vx-person h3 { margin: 0; font-size: 1.12rem; }
.s-body .vx-person > p { margin: 10px 0 14px; color: var(--s-text); }
.vx-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vx-labels li { padding: 6px 11px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; color: #475569; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
/* ST1 the five answers: a table from 640 px, five cards on phones (MP §O mK) */
.vs-hero .s-crumbs { margin-bottom: 22px; }
.vs-hero .s-crumbs a { display: inline-block; padding: 14px 0; margin: -14px 0; }  /* a 44 px tap target without moving the line (a11y probe: 132 x 16) */
.vs-hero__text { max-width: 760px; }
.vs-hero .s-lead { margin: 0; }
.vs-table { width: 100%; max-width: 1080px; margin: 30px 0 0; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--s-line); border-radius: 16px; overflow: hidden; box-shadow: var(--s-shadow); }
.vs-table th, .vs-table td { padding: 15px 18px; border-top: 1px solid var(--s-line); text-align: left; vertical-align: top; color: var(--s-text); font-size: .97rem; line-height: 1.5; }
.vs-table thead th { border-top: 0; background: #f8fafc; color: #475569; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vs-table tbody th { width: 190px; font-weight: 700; }
.vs-table td:last-child { color: var(--s-ink); font-weight: 600; }
/* ST2-ST6: the status, its scope, what to do; the illustrated result page beside it */
.s-body .vs-state h2 { margin-bottom: 0; }
.s-body .vs-applies { margin: 12px 0 0; color: var(--s-muted); }
.s-body .vs-todo { margin: 14px 0 0; color: var(--s-text); font-size: 1.06rem; line-height: 1.6; }
.vs-todo strong { color: var(--s-ink); }
/* Revoked: what the page shows, as two short bullets under the action (critic R1-C3) */
.s-body .vs-shows { margin: 18px 0 0; color: var(--s-ink); font-weight: 700; }
.vs-bul.dr-bul { margin-top: 8px; }
@media (max-width: 1199.98px) {
  .vx-shown { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vx-shown__text { max-width: 760px; width: 100%; margin: 0 auto; }
  .vx-shown__fig { max-width: 760px; margin: 0 auto; }
}
@media (max-width: 1099.98px) { .vx-flow .dr-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .vx-people { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 639.98px) {
  .vx-flow .dr-steps__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .s-body .vx-flow .dr-step p { margin-top: 8px; }
  .s-body .pl-step { font-size: .9rem; }
  .s-body .pl-connect__row > p:first-child { font-size: 1rem; }
  .vx-person { padding: 18px; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; }
  .vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs-table tbody tr { padding: 14px 16px; border-top: 1px solid var(--s-line); }
  .vs-table tbody tr:first-child { border-top: 0; }
  .vs-table th, .vs-table td { padding: 0; border-top: 0; }
  .vs-table tbody th { width: auto; margin-bottom: 8px; }
  .vs-table td + td { margin-top: 8px; }
  .vs-table td::before { content: attr(data-label); display: block; color: #475569; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .s-body .vs-todo { font-size: 1rem; }
}

/* Release A critic R3-m1: keep "e-mail" on one line (raw HTML spans; escaped strings use U+2060 after the hyphen). */
.s-nw { white-space: nowrap; }

/* HD-GEN-BEGIN — generated by vis/hero_demo.py (IVQA_SITE_HERO_V2_20261004): ONE 51.6s loop for the home hero demo,
   six scenes on one stage. .hda = an animated part; .is-play runs the loop, .is-paused freezes it (ivqa-site.js: off-screen,
   hidden tab, a mouse over the figure, the keyboard-only control). A role's keyframes are shared by every scene: its group's
   --d (animation-delay) puts it on the scene's phase. Scenes (ms on the loop; it starts 300 ms into A): A Student document 0–8900 · B Diploma 8900–17800 · C Course certificate 17800–26700 · D Student e-card 26700–33800 · E Employee badge 33800–42700 · F Document 42700–51600 · loop 51600. Do not edit by hand. */
.hd{--T:51.6s}
.hd.is-play .hda,.hd.is-play .hd__types li,.hd.is-play .hd__types li::after{animation-duration:var(--T);animation-timing-function:linear;animation-delay:var(--d,0s);animation-iteration-count:infinite;animation-fill-mode:both}
.hd.is-paused .hda,.hd.is-paused .hd__types li,.hd.is-paused .hd__types li::after{animation-play-state:paused}
.hd.is-play .hd__clock{animation-name:hdclk}
@keyframes hdclk{from{opacity:0}to{opacity:0}}
.hd.is-play .hd__types li{animation-name:hdtc}.hd.is-play .hd__types li:nth-child(4){animation-name:hdtc6}
.hd.is-play .hd__types li::after{animation-name:hdtp}.hd.is-play .hd__types li:nth-child(4)::after{animation-name:hdtp6}
.hd__types li:nth-child(1){--d:-0.3s}
.hd__types li:nth-child(2){--d:-43s}
.hd__types li:nth-child(3){--d:-34.1s}
.hd__types li:nth-child(4){--d:-25.2s}
.hd__types li:nth-child(5){--d:-18.1s}
.hd__types li:nth-child(6){--d:-9.2s}
.hd .hd-fp{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-pg{transform-box:fill-box;transform-origin:0 50%}
.hd .hd-it{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-qi{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-qm{transform-box:fill-box;transform-origin:6px 6px}
.hd .hd-qp{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-st{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-p2{transform-box:fill-box;transform-origin:0 50%}
.hd .hd-pu{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-qc{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-qp6{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-p26{transform-box:fill-box;transform-origin:0 50%}
.hd .hd-pu6{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-cr{transform-box:fill-box;transform-origin:50% 50%}
.hd .hd-cr6{transform-box:fill-box;transform-origin:50% 50%}
.hd .hdm-cr{transform-box:fill-box;transform-origin:50% 50%}
.hd .hdm-cr6{transform-box:fill-box;transform-origin:50% 50%}
.hd.is-play .hd-sc{animation-name:hdk1}
.hd.is-play .hd-rg{animation-name:hdk2}
.hd.is-play .hd-zn{animation-name:hdk3}
.hd.is-play .hd-fp{animation-name:hdk4}
.hd.is-play .hd-pg{animation-name:hdk5}
.hd.is-play .hd-pk{animation-name:hdk6}
.hd.is-play .hd-th{animation-name:hdk7}
.hd.is-play .hd-it{animation-name:hdk8}
.hd.is-play .hd-qi{animation-name:hdk9}
.hd.is-play .hd-qo{animation-name:hdk10}
.hd.is-play .hd-qm{animation-name:hdk11}
.hd.is-play .hd-qs{animation-name:hdk12}
.hd.is-play .hdm-qs{animation-name:hdk13}
.hd.is-play .hd-ql{animation-name:hdk14}
.hd.is-play .hd-qh{animation-name:hdk15}
.hd.is-play .hd-qp{animation-name:hdk16}
.hd.is-play .hd-st{animation-name:hdk17}
.hd.is-play .hd-bp{animation-name:hdk18}
.hd.is-play .hd-sb{animation-name:hdk19}
.hd.is-play .hd-bm{animation-name:hdk20}
.hd.is-play .hd-ln{animation-name:hdk21}
.hd.is-play .hd-dt{animation-name:hdk22}
.hd.is-play .hd-p0{animation-name:hdk23}
.hd.is-play .hd-p1{animation-name:hdk24}
.hd.is-play .hd-p2{animation-name:hdk25}
.hd.is-play .hd-pu{animation-name:hdk26}
.hd.is-play .hd-r0{animation-name:hdk27}
.hd.is-play .hd-r1{animation-name:hdk28}
.hd.is-play .hd-sc6{animation-name:hdk29}
.hd.is-play .hd-id{animation-name:hdk30}
.hd.is-play .hd-qc{animation-name:hdk31}
.hd.is-play .hd-qp6{animation-name:hdk32}
.hd.is-play .hd-bp6{animation-name:hdk33}
.hd.is-play .hd-sb6{animation-name:hdk34}
.hd.is-play .hd-bm6{animation-name:hdk35}
.hd.is-play .hd-ln6{animation-name:hdk36}
.hd.is-play .hd-dt6{animation-name:hdk37}
.hd.is-play .hd-p06{animation-name:hdk38}
.hd.is-play .hd-p16{animation-name:hdk39}
.hd.is-play .hd-p26{animation-name:hdk40}
.hd.is-play .hd-pu6{animation-name:hdk41}
.hd.is-play .hd-r06{animation-name:hdk42}
.hd.is-play .hd-r16{animation-name:hdk43}
.hd.is-play .hd-cu{animation-name:hdk44}
.hd.is-play .hd-gp{animation-name:hdk45}
.hd.is-play .hd-gm{animation-name:hdk46}
.hd.is-play .hd-gr{animation-name:hdk47}
.hd.is-play .hd-cr{animation-name:hdk48}
.hd.is-play .hd-cu6{animation-name:hdk49}
.hd.is-play .hd-cr6{animation-name:hdk50}
.hd.is-play .hdm-cu{animation-name:hdk51}
.hd.is-play .hdm-cr{animation-name:hdk52}
.hd.is-play .hdm-cu6{animation-name:hdk53}
.hd.is-play .hdm-cr6{animation-name:hdk50}
.hd.is-play .hd-t1{animation-name:hdk54}
.hd.is-play .hd-t2{animation-name:hdk55}
.hd.is-play .hd-t3{animation-name:hdk56}
.hd.is-play .hd-o1{animation-name:hdk57}
.hd.is-play .hd-o2{animation-name:hdk58}
.hd.is-play .hd-o3{animation-name:hdk59}
.hd.is-play .hd-w1{animation-name:hdk60}
.hd.is-play .hd-w2{animation-name:hdk61}
.hd.is-play .hd-w3{animation-name:hdk62}
.hd.is-play .hd-f1{animation-name:hdk63}
.hd.is-play .hd-f2{animation-name:hdk64}
.hd.is-play .hd-f3{animation-name:hdk65}
.hd.is-play .hd-a1{animation-name:hdk66}
.hd.is-play .hd-a2{animation-name:hdk67}
.hd.is-play .hd-a3{animation-name:hdk62}
.hd.is-play .hd-ph{animation-name:hdk68}
.hd.is-play .hdm-ph{animation-name:hdk69}
.hd.is-play .hd-cx{animation-name:hdk70}
@keyframes hdk1{0%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}0.581%{opacity:1;transform:translate(0,0)}16.667%{opacity:1}17.248%{opacity:0}100%{opacity:0;transform:translate(0,0)}}
@keyframes hdk2{0%{opacity:0}1.589%{opacity:0;animation-timing-function:ease-out}1.841%{opacity:1}100%{opacity:1}}
@keyframes hdk3{0%{opacity:1}3.682%{opacity:1;animation-timing-function:ease-out}3.973%{opacity:0}100%{opacity:0}}
@keyframes hdk4{0%{opacity:0;transform:scale(.85)}2.674%{opacity:0;transform:scale(.85);animation-timing-function:cubic-bezier(.2,.8,.35,1.25)}2.907%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes hdk5{0%{transform:scaleX(0)}2.907%{transform:scaleX(0);animation-timing-function:ease-out}3.585%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes hdk6{0%{opacity:0}3.585%{opacity:0;animation-timing-function:ease-out}3.779%{opacity:1}100%{opacity:1}}
@keyframes hdk7{0%{opacity:0}2.616%{opacity:0;animation-timing-function:ease-out}2.81%{opacity:1}100%{opacity:1}}
@keyframes hdk8{0%{opacity:0;transform:scale(.96)}3.837%{opacity:0;transform:scale(.96);animation-timing-function:ease-out}4.457%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes hdk9{0%{opacity:0;transform:scale(.5)}4.554%{opacity:0;transform:scale(.5);animation-timing-function:cubic-bezier(.2,.8,.35,1.25)}4.884%{opacity:1;transform:scale(1.08);animation-timing-function:ease-out}5.039%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes hdk10{0%{transform:translate(var(--qx),var(--qy))}5.465%{transform:translate(var(--qx),var(--qy));animation-timing-function:ease-in-out}6.822%{transform:translate(0,0)}100%{transform:translate(0,0)}}
@keyframes hdk11{0%{transform:scale(.62)}7.558%{transform:scale(.62);animation-timing-function:ease-in-out}8.721%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes hdk12{0%{opacity:0}4.748%{opacity:0;animation-timing-function:ease-out}5.039%{opacity:1}9.806%{opacity:1;animation-timing-function:ease-out}10.078%{opacity:0}100%{opacity:0}}
@keyframes hdk13{0%{opacity:0}4.748%{opacity:0;animation-timing-function:ease-out}5.039%{opacity:1}8.256%{opacity:1;animation-timing-function:ease-out}8.527%{opacity:0}100%{opacity:0}}
@keyframes hdk14{0%{opacity:0}5.349%{opacity:0;animation-timing-function:ease-out}5.504%{opacity:1}6.841%{opacity:1;animation-timing-function:ease-out}6.996%{opacity:0}100%{opacity:0}}
@keyframes hdk15{0%{opacity:0}7.422%{opacity:0}7.539%{opacity:1}8.779%{opacity:1}8.895%{opacity:0}100%{opacity:0}}
@keyframes hdk16{0%{opacity:0;transform:scale(.7)}4.845%{opacity:0}5%{opacity:.8;transform:scale(.7);animation-timing-function:ease-out}6.008%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes hdk17{0%{opacity:0;transform:scale(.8)}9.845%{opacity:0}10%{opacity:.75;transform:scale(.8);animation-timing-function:ease-out}10.659%{opacity:0;transform:scale(1.35)}100%{opacity:0;transform:scale(1.35)}}
@keyframes hdk18{0%{opacity:0}9.651%{opacity:0}9.767%{opacity:1}9.845%{opacity:1;animation-timing-function:ease-out}9.961%{opacity:0}100%{opacity:0}}
@keyframes hdk19{0%{opacity:0}10.562%{opacity:0;animation-timing-function:ease-out}10.853%{opacity:1}11.531%{opacity:1;animation-timing-function:ease-out}11.822%{opacity:0}100%{opacity:0}}
@keyframes hdk20{0%{transform:translate(0,0)}10.659%{transform:translate(0,0);animation-timing-function:ease-in-out}11.434%{transform:translate(0,var(--bh))}100%{transform:translate(0,var(--bh))}}
@keyframes hdk21{0%{opacity:0}10.853%{opacity:0;animation-timing-function:ease-out}11.24%{opacity:1}100%{opacity:1}}
@keyframes hdk22{0%{opacity:0;transform:translate(0,0)}10.853%{opacity:0}10.969%{opacity:1;transform:translate(0,0)}11.109%{transform:translate(var(--k1x),var(--k1y))}11.25%{transform:translate(var(--k2x),var(--k2y))}11.39%{transform:translate(var(--k3x),var(--k3y))}11.531%{opacity:1;transform:translate(var(--k4x),var(--k4y))}11.647%{opacity:0}100%{opacity:0;transform:translate(var(--k4x),var(--k4y))}}
@keyframes hdk23{0%{opacity:0;transform:translate(0,6px)}10.756%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}11.182%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk24{0%{opacity:0;transform:translate(0,6px)}11.047%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}11.473%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk25{0%{opacity:0;transform:scale(.94)}11.531%{opacity:0;transform:scale(.94);animation-timing-function:cubic-bezier(.2,.8,.35,1.25)}12.016%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes hdk26{0%{opacity:0;transform:scale(1)}11.822%{opacity:0}12.016%{opacity:.85;transform:scale(1);animation-timing-function:ease-out}12.888%{opacity:0;transform:scale(2)}100%{opacity:0;transform:scale(2)}}
@keyframes hdk27{0%{opacity:0;transform:translate(0,6px)}11.919%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}12.384%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk28{0%{opacity:0;transform:translate(0,6px)}12.151%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}12.616%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk29{0%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}0.581%{opacity:1;transform:translate(0,0)}13.178%{opacity:1}13.76%{opacity:0}100%{opacity:0;transform:translate(0,0)}}
@keyframes hdk30{0%{opacity:0;transform:translate(-10px,0)}4.554%{opacity:0;transform:translate(-10px,0);animation-timing-function:ease-out}5.039%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk31{0%{opacity:0;transform:scale(.6)}5.136%{opacity:0;transform:scale(.6);animation-timing-function:cubic-bezier(.2,.8,.35,1.25)}5.465%{opacity:1;transform:scale(1.06);animation-timing-function:ease-out}5.62%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes hdk32{0%{opacity:0;transform:scale(.75)}5.523%{opacity:0}5.678%{opacity:.8;transform:scale(.75);animation-timing-function:ease-out}6.589%{opacity:0;transform:scale(1.45)}100%{opacity:0;transform:scale(1.45)}}
@keyframes hdk33{0%{opacity:0}6.008%{opacity:0}6.124%{opacity:1}6.202%{opacity:1;animation-timing-function:ease-out}6.318%{opacity:0}100%{opacity:0}}
@keyframes hdk34{0%{opacity:0}6.88%{opacity:0;animation-timing-function:ease-out}7.171%{opacity:1}7.849%{opacity:1;animation-timing-function:ease-out}8.14%{opacity:0}100%{opacity:0}}
@keyframes hdk35{0%{transform:translate(0,0)}6.977%{transform:translate(0,0);animation-timing-function:ease-in-out}7.752%{transform:translate(0,var(--bh))}100%{transform:translate(0,var(--bh))}}
@keyframes hdk36{0%{opacity:0}7.171%{opacity:0;animation-timing-function:ease-out}7.558%{opacity:1}100%{opacity:1}}
@keyframes hdk37{0%{opacity:0;transform:translate(0,0)}7.171%{opacity:0}7.287%{opacity:1;transform:translate(0,0)}7.426%{transform:translate(var(--k1x),var(--k1y))}7.568%{transform:translate(var(--k2x),var(--k2y))}7.707%{transform:translate(var(--k3x),var(--k3y))}7.849%{opacity:1;transform:translate(var(--k4x),var(--k4y))}7.965%{opacity:0}100%{opacity:0;transform:translate(var(--k4x),var(--k4y))}}
@keyframes hdk38{0%{opacity:0;transform:translate(0,6px)}7.074%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}7.5%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk39{0%{opacity:0;transform:translate(0,6px)}7.364%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}7.791%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk40{0%{opacity:0;transform:scale(.94)}7.849%{opacity:0;transform:scale(.94);animation-timing-function:cubic-bezier(.2,.8,.35,1.25)}8.333%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes hdk41{0%{opacity:0;transform:scale(1)}8.14%{opacity:0}8.333%{opacity:.85;transform:scale(1);animation-timing-function:ease-out}9.205%{opacity:0;transform:scale(2)}100%{opacity:0;transform:scale(2)}}
@keyframes hdk42{0%{opacity:0;transform:translate(0,6px)}8.236%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}8.702%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk43{0%{opacity:0;transform:translate(0,6px)}8.469%{opacity:0;transform:translate(0,6px);animation-timing-function:ease-out}8.934%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes hdk44{0%{opacity:0;transform:translate(var(--c0x),var(--c0y))}0.484%{opacity:0;animation-timing-function:ease-out}0.775%{opacity:1;transform:translate(var(--c0x),var(--c0y));animation-timing-function:ease-in-out}1.473%{transform:translate(var(--c1x),var(--c1y))}1.841%{transform:translate(var(--c1x),var(--c1y));animation-timing-function:ease-in-out}2.519%{transform:translate(var(--c2x),var(--c2y))}4.748%{transform:translate(var(--c2x),var(--c2y));animation-timing-function:ease-in-out}5.329%{transform:translate(var(--c3x),var(--c3y))}5.465%{transform:translate(var(--c3x),var(--c3y));animation-timing-function:ease-in-out}6.822%{transform:translate(var(--c4x),var(--c4y))}6.938%{transform:translate(var(--c4x),var(--c4y));animation-timing-function:ease-in-out}7.403%{transform:translate(var(--c5x),var(--c5y))}7.558%{transform:translate(var(--c5x),var(--c5y));animation-timing-function:ease-in-out}8.721%{transform:translate(var(--c6x),var(--c6y))}8.837%{transform:translate(var(--c6x),var(--c6y));animation-timing-function:ease-in-out}9.574%{transform:translate(var(--c7x),var(--c7y))}10.078%{opacity:1;animation-timing-function:ease-out}10.426%{opacity:0}100%{opacity:0;transform:translate(var(--c7x),var(--c7y))}}
@keyframes hdk45{0%{opacity:1}7.422%{opacity:1}7.5%{opacity:0}8.76%{opacity:0}8.837%{opacity:1}100%{opacity:1}}
@keyframes hdk46{0%{opacity:0}5.349%{opacity:0}5.426%{opacity:1}6.86%{opacity:1}6.938%{opacity:0}100%{opacity:0}}
@keyframes hdk47{0%{opacity:0}7.422%{opacity:0}7.5%{opacity:1}8.76%{opacity:1}8.837%{opacity:0}100%{opacity:0}}
@keyframes hdk48{0%{opacity:0;transform:scale(.3)}1.531%{opacity:0}1.55%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}2.287%{opacity:0;transform:scale(1.6)}2.578%{opacity:0;transform:scale(.3)}2.597%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}3.333%{opacity:0;transform:scale(1.6)}5.368%{opacity:0;transform:scale(.3)}5.388%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}6.124%{opacity:0;transform:scale(1.6)}7.442%{opacity:0;transform:scale(.3)}7.461%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}8.198%{opacity:0;transform:scale(1.6)}9.632%{opacity:0;transform:scale(.3)}9.651%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}10.388%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes hdk49{0%{opacity:0;transform:translate(var(--c0x),var(--c0y))}0.484%{opacity:0;animation-timing-function:ease-out}0.775%{opacity:1;transform:translate(var(--c0x),var(--c0y));animation-timing-function:ease-in-out}1.473%{transform:translate(var(--c1x),var(--c1y))}1.841%{transform:translate(var(--c1x),var(--c1y));animation-timing-function:ease-in-out}2.519%{transform:translate(var(--c2x),var(--c2y))}5.233%{transform:translate(var(--c2x),var(--c2y));animation-timing-function:ease-in-out}5.911%{transform:translate(var(--c7x),var(--c7y))}6.395%{opacity:1;animation-timing-function:ease-out}6.744%{opacity:0}100%{opacity:0;transform:translate(var(--c7x),var(--c7y))}}
@keyframes hdk50{0%{opacity:0;transform:scale(.3)}1.531%{opacity:0}1.55%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}2.287%{opacity:0;transform:scale(1.6)}2.578%{opacity:0;transform:scale(.3)}2.597%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}3.333%{opacity:0;transform:scale(1.6)}5.988%{opacity:0;transform:scale(.3)}6.008%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}6.744%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes hdk51{0%{opacity:0;transform:translate(var(--c1x),var(--c1y))}1.26%{opacity:0;animation-timing-function:ease-out}1.434%{opacity:1}1.783%{opacity:1;animation-timing-function:ease-out}1.977%{opacity:0;transform:translate(var(--c1x),var(--c1y))}1.996%{transform:translate(var(--c2x),var(--c2y))}2.306%{opacity:0;animation-timing-function:ease-out}2.481%{opacity:1}2.829%{opacity:1;animation-timing-function:ease-out}3.023%{opacity:0;transform:translate(var(--c2x),var(--c2y))}3.043%{transform:translate(var(--c3x),var(--c3y))}5.097%{opacity:0;animation-timing-function:ease-out}5.271%{opacity:1}5.465%{transform:translate(var(--c3x),var(--c3y));animation-timing-function:ease-in-out}6.822%{transform:translate(var(--c4x),var(--c4y))}6.938%{opacity:1;animation-timing-function:ease-out}7.132%{opacity:0;transform:translate(var(--c4x),var(--c4y))}7.151%{transform:translate(var(--c7x),var(--c7y))}7.81%{opacity:0;animation-timing-function:ease-out}7.984%{opacity:1}8.333%{opacity:1;animation-timing-function:ease-out}8.527%{opacity:0}100%{opacity:0;transform:translate(var(--c7x),var(--c7y))}}
@keyframes hdk52{0%{opacity:0;transform:scale(.3)}1.531%{opacity:0}1.55%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}2.287%{opacity:0;transform:scale(1.6)}2.578%{opacity:0;transform:scale(.3)}2.597%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}3.333%{opacity:0;transform:scale(1.6)}5.368%{opacity:0;transform:scale(.3)}5.388%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}6.124%{opacity:0;transform:scale(1.6)}8.081%{opacity:0;transform:scale(.3)}8.101%{opacity:.7;transform:scale(.3);animation-timing-function:ease-out}8.837%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes hdk53{0%{opacity:0;transform:translate(var(--c1x),var(--c1y))}1.26%{opacity:0;animation-timing-function:ease-out}1.434%{opacity:1}1.783%{opacity:1;animation-timing-function:ease-out}1.977%{opacity:0;transform:translate(var(--c1x),var(--c1y))}1.996%{transform:translate(var(--c2x),var(--c2y))}2.306%{opacity:0;animation-timing-function:ease-out}2.481%{opacity:1}2.829%{opacity:1;animation-timing-function:ease-out}3.023%{opacity:0;transform:translate(var(--c2x),var(--c2y))}3.043%{transform:translate(var(--c7x),var(--c7y))}5.717%{opacity:0;animation-timing-function:ease-out}5.891%{opacity:1}6.24%{opacity:1;animation-timing-function:ease-out}6.434%{opacity:0}100%{opacity:0;transform:translate(var(--c7x),var(--c7y))}}
@keyframes hdk54{0%{opacity:0}1.647%{opacity:0;animation-timing-function:ease-in-out}2.229%{opacity:1}36.143%{opacity:1;animation-timing-function:ease-in-out}36.725%{opacity:0}53.391%{opacity:0;animation-timing-function:ease-in-out}53.973%{opacity:1}67.151%{opacity:1;animation-timing-function:ease-in-out}67.733%{opacity:0}100%{opacity:0}}
@keyframes hdk55{0%{opacity:0}36.143%{opacity:0;animation-timing-function:ease-in-out}36.725%{opacity:1}53.391%{opacity:1;animation-timing-function:ease-in-out}53.973%{opacity:0}100%{opacity:0}}
@keyframes hdk56{0%{opacity:1}1.647%{opacity:1;animation-timing-function:ease-in-out}2.229%{opacity:0}67.151%{opacity:0;animation-timing-function:ease-in-out}67.733%{opacity:1}100%{opacity:1}}
@keyframes hdk57{0%{opacity:0}1.957%{opacity:0}2.248%{opacity:1}36.124%{opacity:1}36.415%{opacity:0}53.702%{opacity:0}53.992%{opacity:1}67.132%{opacity:1}67.422%{opacity:0}100%{opacity:0}}
@keyframes hdk58{0%{opacity:0}36.453%{opacity:0}36.744%{opacity:1}53.372%{opacity:1}53.663%{opacity:0}100%{opacity:0}}
@keyframes hdk59{0%{opacity:1}1.628%{opacity:1}1.919%{opacity:0}67.461%{opacity:0}67.752%{opacity:1}100%{opacity:1}}
@keyframes hdk60{0%{opacity:0}1.957%{opacity:0}2.248%{opacity:1}67.151%{opacity:1;animation-timing-function:ease-in-out}67.733%{opacity:0}100%{opacity:0}}
@keyframes hdk61{0%{opacity:0}67.151%{opacity:0;animation-timing-function:ease-in-out}67.733%{opacity:1}84.38%{opacity:1}84.671%{opacity:0}100%{opacity:0}}
@keyframes hdk62{0%{opacity:1}1.628%{opacity:1}1.919%{opacity:0}84.709%{opacity:0}85%{opacity:1}100%{opacity:1}}
@keyframes hdk63{0%{opacity:0}1.647%{opacity:0;animation-timing-function:ease-in-out}2.229%{opacity:1}53.391%{opacity:1;animation-timing-function:ease-in-out}53.973%{opacity:0}100%{opacity:0}}
@keyframes hdk64{0%{opacity:0}53.391%{opacity:0;animation-timing-function:ease-in-out}53.973%{opacity:1}84.399%{opacity:1;animation-timing-function:ease-in-out}84.981%{opacity:0}100%{opacity:0}}
@keyframes hdk65{0%{opacity:1}1.647%{opacity:1;animation-timing-function:ease-in-out}2.229%{opacity:0}84.399%{opacity:0;animation-timing-function:ease-in-out}84.981%{opacity:1}100%{opacity:1}}
@keyframes hdk66{0%{opacity:0}1.957%{opacity:0}2.248%{opacity:1}53.372%{opacity:1}53.663%{opacity:0}100%{opacity:0}}
@keyframes hdk67{0%{opacity:0}53.702%{opacity:0}53.992%{opacity:1}84.38%{opacity:1}84.671%{opacity:0}100%{opacity:0}}
@keyframes hdk68{0%{transform:translate(0,var(--py))}10.078%{transform:translate(0,var(--py));animation-timing-function:ease-out}10.853%{transform:translate(0,0)}16.667%{transform:translate(0,0);animation-timing-function:ease-in}17.248%{transform:translate(0,var(--py))}27.326%{transform:translate(0,var(--py));animation-timing-function:ease-out}28.101%{transform:translate(0,0)}33.915%{transform:translate(0,0);animation-timing-function:ease-in}34.496%{transform:translate(0,var(--py))}44.574%{transform:translate(0,var(--py));animation-timing-function:ease-out}45.349%{transform:translate(0,0)}51.163%{transform:translate(0,0);animation-timing-function:ease-in}51.744%{transform:translate(0,var(--py))}58.14%{transform:translate(0,var(--py));animation-timing-function:ease-out}58.915%{transform:translate(0,0)}64.922%{transform:translate(0,0);animation-timing-function:ease-in}65.504%{transform:translate(0,var(--py))}75.581%{transform:translate(0,var(--py));animation-timing-function:ease-out}76.357%{transform:translate(0,0)}82.171%{transform:translate(0,0);animation-timing-function:ease-in}82.752%{transform:translate(0,var(--py))}92.829%{transform:translate(0,var(--py));animation-timing-function:ease-out}93.605%{transform:translate(0,0)}99.419%{transform:translate(0,0);animation-timing-function:ease-in}100%{transform:translate(0,var(--py))}}
@keyframes hdk69{0%{transform:translate(0,var(--py))}8.527%{transform:translate(0,var(--py));animation-timing-function:ease-out}9.302%{transform:translate(0,0)}16.667%{transform:translate(0,0);animation-timing-function:ease-in}17.248%{transform:translate(0,var(--py))}25.775%{transform:translate(0,var(--py));animation-timing-function:ease-out}26.55%{transform:translate(0,0)}33.915%{transform:translate(0,0);animation-timing-function:ease-in}34.496%{transform:translate(0,var(--py))}43.023%{transform:translate(0,var(--py));animation-timing-function:ease-out}43.798%{transform:translate(0,0)}51.163%{transform:translate(0,0);animation-timing-function:ease-in}51.744%{transform:translate(0,var(--py))}58.14%{transform:translate(0,var(--py));animation-timing-function:ease-out}58.915%{transform:translate(0,0)}64.922%{transform:translate(0,0);animation-timing-function:ease-in}65.504%{transform:translate(0,var(--py))}74.031%{transform:translate(0,var(--py));animation-timing-function:ease-out}74.806%{transform:translate(0,0)}82.171%{transform:translate(0,0);animation-timing-function:ease-in}82.752%{transform:translate(0,var(--py))}91.279%{transform:translate(0,var(--py));animation-timing-function:ease-out}92.054%{transform:translate(0,0)}99.419%{transform:translate(0,0);animation-timing-function:ease-in}100%{transform:translate(0,var(--py))}}
@keyframes hdk70{0%{opacity:0}100%{opacity:0}}
@keyframes hdtc{0%{color:#1d4ed8}16.86%{color:#1d4ed8}17.248%,100%{color:#334155}}
@keyframes hdtp{0%{opacity:1;transform:scaleX(0)}16.667%{opacity:1;transform:scaleX(1)}17.248%,100%{opacity:0;transform:scaleX(1)}}
@keyframes hdtc6{0%{color:#1d4ed8}13.372%{color:#1d4ed8}13.76%,100%{color:#334155}}
@keyframes hdtp6{0%{opacity:1;transform:scaleX(0)}13.178%{opacity:1;transform:scaleX(1)}13.76%,100%{opacity:0;transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.hd .hda,.hd .hd__types li,.hd .hd__types li::after{animation:none!important}}
@media print{.hd .hda,.hd .hd__types li,.hd .hd__types li::after{animation:none!important}}
/* HD-GEN-END */

/* ── Navigation V3 (IVQA_SITE_NAV3_20261004, owner decision 20): About us · Features ▾ (product map) · Solutions ▾ (customer
   map) · How verification works · Pricing. Triggers are buttons (ivqa-site.js: click, 150 ms hover, Esc, keyboard open focuses
   the first link); the menu visuals (illus/anim/nav-*.svg) play when their panel opens; finished state under reduced motion. */
.s-nav__menu > li > button.s-nav__trig { gap: 5px; }
.s-nav__menu > li > button.s-nav__trig svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .7; }
.s-nav__menu > li.is-open > button.s-nav__trig svg { transform: rotate(180deg); }
.s-nav__menu > li > button.s-nav__trig.is-active { color: var(--s-blue); background: #e7efff; }
.s-nav__menu > li > button.s-nav__trig:focus-visible, .s-mega--map a:focus-visible { outline: 2px solid var(--s-blue); outline-offset: 2px; }

/* Features: what IVQA provides — three groups and one supporting visual */
.s-mega__in.s-mega__in--features { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 320px); gap: 24px; padding-top: 24px; padding-bottom: 24px; align-items: start; }
.s-mega--map .s-mega__col { gap: 1px; }
.s-mega--map .s-mega__h { margin: 0 0 6px; padding: 0 10px; }
.s-mega--map a.s-mega__text, .s-mega--map .s-mega__note { display: block; padding: 7px 10px; border-radius: 10px; }
.s-mega--map a.s-mega__text:hover { background: #f2f6fd; }
.s-mega--map .s-mega__text b, .s-mega--map .s-mega__note b { display: block; font-size: 15px; font-weight: 600; color: var(--s-ink); line-height: 1.3; }
.s-mega--map a.s-mega__text:hover b { color: var(--s-blue); }
.s-mega--map .s-mega__text span, .s-mega--map .s-mega__note span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--s-muted); line-height: 1.4; }
.s-body .s-mega--map p.s-mega__note { margin: -2px 0 2px 10px; padding: 3px 10px 5px; border-left: 2px solid var(--s-line); border-radius: 0; }
.s-mega--map .s-mega__note b { font-size: 14px; font-weight: 600; color: var(--s-text); }
.s-mega__vis { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 12px; border: 1px solid #e3eaf7; border-radius: 16px; background: #f5f8fe; }
.s-mega__vis svg { display: block; width: 100%; height: auto; max-width: 320px; }
@media (max-width: 1239.98px) { .s-mega__in.s-mega__in--features { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 240px); gap: 16px; } }

/* Solutions (IVQA_SITE_SOLUTIONS_MENU_20261004): a navigation overlay, not a page section — two audience columns (no card
   chrome at rest; the hovered or keyboard-focused column alone gets a tint), a short plain-text list, one CTA whose hit area is
   the whole column, a small static flow, and one shared "How IVQA works" band */
.s-mega__in.s-mega__in--solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 0 30px; padding-top: 18px; padding-bottom: 18px; }
.s-who { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: start; padding: 18px 20px 16px; border: 1px solid transparent; border-radius: 16px; transition: background-color .15s, border-color .15s; }
.s-who + .s-who::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: -16px; border-left: 1px solid var(--s-line); }
.s-who:hover, .s-who:focus-within { background: #f6f9ff; border-color: #dfe8fa; }
@supports not (grid-template-rows: subgrid) { .s-who { display: flex; flex-direction: column; gap: 10px; } }
.s-who__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.s-body p.s-who__eb { margin: 0 0 4px; color: #667085; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.s-body p.s-who__t { margin: 0; color: var(--s-ink); font-size: 19px; font-weight: 700; line-height: 1.25; }
.s-body p.s-who__d { max-width: 48ch; margin: 0; color: var(--s-text); font-size: 14.5px; line-height: 1.5; }
.s-who__flow { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-top: 2px; }
.s-who__flow i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e8f0fe; color: var(--s-blue); }
.s-who__flow svg { display: block; width: 16px; height: 16px; }
.s-who__flow b { width: 6px; height: 6px; border-top: 1.5px solid #94a3b8; border-right: 1.5px solid #94a3b8; transform: rotate(45deg); }
.s-who__list { display: grid; grid-template-columns: repeat(2, max-content); align-content: start; align-self: start; gap: 7px 30px; margin: 2px 0 0; padding: 0; list-style: none; }
.s-who__list li { position: relative; padding-left: 15px; color: var(--s-ink); font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.s-who__list li::before { content: ""; position: absolute; top: .52em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--s-blue); }
.s-body .s-mega a.s-who__cta { align-self: start; justify-self: start; margin-top: 2px; color: var(--s-blue); font-size: 15px; font-weight: 700; }
.s-who__cta::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.s-who__cta span { display: inline-block; transition: transform .15s; }
.s-who:hover .s-who__cta span { transform: translateX(3px); }
.s-mega__story { border-top: 1px solid var(--s-line); background: #f8fafc; }
.s-story { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 14px; padding-bottom: 14px; }
.s-body p.s-story__h { margin: 0 0 0 21px; color: #667085; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.s-story__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.s-story__flow li { position: relative; color: var(--s-ink); font-size: 14px; font-weight: 600; }
.s-story__flow li + li::before { content: ""; position: absolute; top: 50%; left: -15px; width: 6px; height: 6px; margin-top: -3px; border-top: 1.5px solid #94a3b8; border-right: 1.5px solid #94a3b8; transform: rotate(45deg); }
.s-body .s-mega a.s-story__cta { margin: 0 21px 0 auto; color: var(--s-blue); font-size: 14.5px; font-weight: 700; white-space: nowrap; }
@media (max-width: 1279.98px) { .s-who__flow { gap: 5px; } .s-who__flow i { width: 26px; height: 26px; border-radius: 8px; } .s-who__flow svg { width: 14px; height: 14px; } }
@media (prefers-reduced-motion: reduce) { .s-who, .s-who__cta span { transition: none; } .s-who:hover .s-who__cta span { transform: none; } }

/* menu visuals: staged parts play when the panel opens (the panel toggles display, so every open replays them) */
.s-mega__vis .st, .s-mega__vis .st-flow, .s-mega__vis .st-pulse { transform-box: fill-box; transform-origin: center; }
.s-nav__menu > li.is-open .s-mega__vis .st { animation: s-st-in .5s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms) both; }
.s-nav__menu > li.is-open .s-mega__vis .st-pop { animation-name: s-st-pop; animation-duration: .45s; }
.s-nav__menu > li.is-open .s-mega__vis .st-draw { animation: s-st-draw .7s ease-out var(--d, 0ms) both; }
.s-nav__menu > li.is-open .s-mega__vis .st-pulse { animation: s-st-pulse 1.3s ease-out var(--d, 0ms) 2; }
.s-nav__menu > li.is-open .s-mega__vis .st-flow { animation: s-st-flow 1.1s ease-in-out var(--d, 0ms) 2 both; }
@media (prefers-reduced-motion: reduce) {
  .s-nav__menu > li.is-open .s-mega__vis * { animation: none !important; }
  .s-mega__vis .st-flow { display: none; }
  .s-nav__menu > li > button.s-nav__trig svg { transition: none; }
}

/* drawer: Features and Solutions as accordions */
.s-drawer nav.s-dnav details.s-dnav__acc { border: 0; }
.s-drawer nav.s-dnav details.s-dnav__acc > summary.s-dnav__sum { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 10px; border-radius: 10px; color: var(--s-ink); font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.s-drawer nav.s-dnav details.s-dnav__acc > summary.s-dnav__sum::-webkit-details-marker { display: none; }
.s-drawer nav.s-dnav details.s-dnav__acc > summary.s-dnav__sum::after { content: none; }
.s-drawer nav.s-dnav details.s-dnav__acc > summary.s-dnav__sum:hover { background: var(--s-bg-alt); }
.s-drawer nav.s-dnav details.s-dnav__acc > summary.s-dnav__sum svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .15s; }
.s-drawer nav.s-dnav details.s-dnav__acc[open] > summary.s-dnav__sum svg { transform: rotate(180deg); }
.s-drawer nav.s-dnav details.s-dnav__acc > .s-dnav__list { margin: 0 0 10px 10px; }
.s-body p.s-dnav__h { margin: 12px 0 2px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #667085; }
.s-body p.s-dnav__note { margin: 0; padding: 2px 10px 8px; font-size: 14px; color: var(--s-text); }
.s-body p.s-dnav__note span { color: var(--s-muted); }
.s-dnav__aud { padding: 2px 0 8px; border-bottom: 1px solid var(--s-line); }
.s-dnav__aud:last-child { border-bottom: 0; }
.s-body p.s-dnav__p { margin: 0 0 2px; padding: 0 10px; font-size: 14px; color: var(--s-text); line-height: 1.5; }
.s-body p.s-dnav__p span { color: #94a3b8; }
.s-drawer nav.s-dnav .s-dnav__list a.s-dnav__cta { gap: 5px; color: var(--s-blue); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .s-drawer nav.s-dnav details.s-dnav__acc > summary.s-dnav__sum svg { transition: none; } }

/* ── Trust & Security (IVQA_SITE_SECURITY_20261004, views/security.php): calm, static, evidence-led — no motion of its own,
   official logos as static images at their own proportions, legal documents as plain links. */
.s-body .sec-head h1 { max-width: 780px; }
.s-body .sec-head .s-lead { max-width: 720px; }
.sec-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sec-brand { padding: 24px 26px; border: 1px solid var(--s-line); border-radius: 16px; background: #fff; }
.sec-brand__logo { display: flex; align-items: center; height: 52px; margin-bottom: 18px; }
.sec-brand__logo img { display: block; width: auto; height: 100%; max-width: 190px; }
.sec-brand__name { font-size: 22px; font-weight: 800; color: var(--s-ink); }
.s-body p.sec-brand__tag { margin: 0 0 4px; color: #667085; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.s-body .sec-brand h3 { margin: 0 0 8px; font-size: 19px; }
.s-body .sec-brand p:last-child { margin: 0; color: var(--s-text); line-height: 1.6; }
.s-body p.sec-tm { max-width: 820px; margin: 16px 0 0; color: var(--s-muted); font-size: 13px; line-height: 1.5; }
.sec-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.sec-fact { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; }
.sec-fact > .s-icon { flex: 0 0 auto; }
.s-body .sec-fact h3 { margin: 0 0 4px; font-size: 16.5px; }
.s-body .sec-fact p { margin: 0; color: var(--s-text); line-height: 1.55; }
.sec-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.sec-dl > div { padding: 18px 0; border-top: 1px solid var(--s-line); }
.sec-dl dt { color: var(--s-ink); font-size: 16px; font-weight: 700; }
.sec-dl dd { margin: 6px 0 0; color: var(--s-text); line-height: 1.6; }
.sec-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sec-steps li { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; }
.sec-steps__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8f0fe; color: var(--s-blue); font-size: 14px; font-weight: 800; }
.s-body .sec-steps h3 { margin: 3px 0 6px; font-size: 16.5px; }
.s-body .sec-steps p { margin: 0; color: var(--s-text); line-height: 1.55; }
.sec-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.sec-flow li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; }
.sec-flow li + li::before { content: ""; position: absolute; top: 36px; left: -13px; width: 10px; height: 10px; border-top: 2px solid #94a3b8; border-right: 2px solid #94a3b8; transform: rotate(45deg); }
.sec-flow__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e8f0fe; color: var(--s-blue); }
.sec-flow__ic svg { width: 22px; height: 22px; }
.sec-flow b { color: var(--s-ink); font-size: 15px; }
.sec-flow li > span:last-child { color: var(--s-muted); font-size: 13.5px; line-height: 1.45; }
.sec-states { padding: 22px 24px; border: 1px solid var(--s-line); border-radius: 16px; background: #fff; }
.s-body .sec-states h3 { margin: 0 0 14px; font-size: 17px; }
.sec-states ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sec-states li { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; }
.sec-states li > span { color: var(--s-text); line-height: 1.5; }
.s-body p.sec-more { margin: 18px 0 0; color: var(--s-text); line-height: 1.55; }
.s-body .sec-more a { font-weight: 600; white-space: nowrap; }
.sec-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sec-rec { padding: 22px 24px; border: 1px solid var(--s-line); border-radius: 16px; background: #fff; }
.s-body .sec-rec h3 { margin: 0; font-size: 18px; }
.s-body p.sec-rec__q { margin: 4px 0 10px; color: var(--s-blue); font-weight: 600; }
.s-body .sec-rec p:last-child { margin: 0; color: var(--s-text); line-height: 1.6; }
.sec-privacy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.s-body .sec-privacy__text p { margin: 0 0 14px; color: var(--s-text); line-height: 1.65; }
.sec-docs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sec-docs a { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; color: inherit; }
.sec-docs a:hover { border-color: var(--s-blue); }
.sec-docs a:hover b { color: var(--s-blue); }
.sec-docs a:focus-visible { outline: 2px solid var(--s-blue); outline-offset: 2px; }
.sec-docs__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #f1f5f9; color: #334155; }
.sec-docs__ic svg { width: 20px; height: 20px; }
.sec-docs b { display: block; color: var(--s-ink); font-size: 15.5px; }
.sec-docs a > span:last-child > span { display: block; margin-top: 2px; color: var(--s-muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 1023.98px) {
  .sec-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-flow li + li::before { content: none; }
  .sec-steps { grid-template-columns: minmax(0, 1fr); }
  .sec-privacy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .sec-brands, .sec-facts, .sec-dl, .sec-two, .sec-flow { grid-template-columns: minmax(0, 1fr); }
  .sec-states li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sec-brand { padding: 20px; }
}

/* ── Integrations (IVQA_SITE_INTEGRATIONS_V2_20261004, views/integrations.php): Google Workspace + Microsoft Office only,
   static. Official product icons as unmodified static images in a labelled, non-clickable lineup on white with clear space
   (never on a tinted tile, never locked up with a name, never animated); the hero diagram uses names only. */
.s-body .int-head h1 { max-width: 640px; }
.int-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.int-link { display: grid; grid-template-columns: minmax(0, 1fr) 22px auto 22px minmax(0, 1fr); align-items: center; margin: 0; padding: 26px 20px; border: 1px solid var(--s-line); border-radius: 22px; background: #f8fafc; }
.int-link__node { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
.int-link__node b { color: var(--s-ink); font-size: 16px; line-height: 1.25; }
.int-link__node span { color: var(--s-muted); font-size: 13px; white-space: nowrap; }
.int-link__node em { margin-top: 4px; color: #9a3412; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.int-link__wire { height: 0; border-top: 2px dashed #b6c3d9; }
.int-link__core { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--s-line); border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); }
.int-link__core img { display: block; width: 72px; height: auto; }
.int-link__core b { color: var(--s-ink); font-size: 22px; font-weight: 800; }
.int-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.int-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--s-line); border-radius: 20px; background: #fff; }
.int-apps { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: 0 0 22px; padding: 4px 0 22px; border-bottom: 1px solid var(--s-line); list-style: none; }
.int-apps li { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 88px; text-align: center; }
.int-apps img { display: block; width: 48px; height: 48px; }
.int-apps span { color: var(--s-text); font-size: 13.5px; line-height: 1.3; }
.s-body p.int-card__kind { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.int-card__kind > span:first-child { color: var(--s-muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.int-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.int-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.int-status--soon { background: #fff7ed; color: #9a3412; }
.int-status--live { background: #ecfdf5; color: #047857; }
.s-body .int-card h3 { margin: 0 0 8px; font-size: 21px; }
.s-body p.int-card__desc { margin: 0; color: var(--s-text); line-height: 1.6; }
.int-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 22px; }
.int-card__link { color: var(--s-blue); font-weight: 600; }
.int-card__link:hover { text-decoration: underline; }
.int-card__link:focus-visible { outline: 2px solid var(--s-blue); outline-offset: 2px; border-radius: 4px; }
.s-body p.int-tm { max-width: 900px; margin: 18px 0 0; color: var(--s-muted); font-size: 13px; line-height: 1.5; }
.int-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.int-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 18px 20px; border: 1px solid var(--s-line); border-radius: 16px; background: #f8fafc; list-style: none; }
.int-flow li { position: relative; display: flex; flex-direction: column; gap: 3px; }
.int-flow li + li::before { content: ""; position: absolute; top: 50%; left: -19px; width: 8px; height: 8px; margin-top: -5px; border-top: 2px solid #94a3b8; border-right: 2px solid #94a3b8; transform: rotate(45deg); }
.int-flow b { color: var(--s-ink); font-size: 15px; }
.int-flow span { color: var(--s-muted); font-size: 13px; line-height: 1.4; }
.int-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.int-steps li { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; }
.int-steps__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8f0fe; color: var(--s-blue); font-size: 14px; font-weight: 800; }
.s-body .int-steps h3 { margin: 3px 0 6px; font-size: 16.5px; }
.s-body .int-steps p { margin: 0; color: var(--s-text); line-height: 1.55; }
.int-avail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.s-body .int-avail__text p { margin: 0 0 14px; color: var(--s-text); line-height: 1.65; }
.int-avail__text .s-btn-row { margin-top: 8px; }
@media (max-width: 1199.98px) {
  .int-head__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .int-link { max-width: 640px; }
}
@media (max-width: 1023.98px) {
  .int-flows, .int-steps, .int-avail { grid-template-columns: minmax(0, 1fr); }
  .int-avail { gap: 16px; }
}
@media (max-width: 767.98px) {
  .int-link { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 18px; }
  .int-link__node { width: 100%; align-items: center; text-align: center; }
  .int-link__wire { width: 0; height: 20px; border-top: 0; border-left: 2px dashed #b6c3d9; }
  .int-link__core { width: 88px; height: 88px; }
  .int-link__core img { width: 66px; }
  .int-cards { grid-template-columns: minmax(0, 1fr); }
  .int-card { padding: 22px 20px; }
  .int-apps { justify-content: space-between; gap: 12px; }
  .int-apps li { min-width: 0; flex: 1 1 0; }
  .int-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .int-flow li + li::before { top: -15px; left: 4px; margin-top: 0; transform: rotate(135deg); }
}

/* ── People (IVQA_SITE_PEOPLE_20261005, partials/site_people.php): the owner's portraits as an additive human layer. Each
   portrait is a small framed card placed on a FREE corner of an existing illustration or photo — the product visual keeps
   its size and stays readable; no filter, no animation of its own; fixed 4:5 box (no layout shift). */
.pp-card { position: absolute; z-index: 2; display: block; width: var(--pp-w, 120px); aspect-ratio: 4 / 5; overflow: hidden; border: 5px solid #fff; border-radius: 18px; background: #e8eef7; box-shadow: 0 22px 44px -22px rgba(11, 31, 58, .5), 0 2px 6px rgba(11, 31, 58, .08); pointer-events: none; }
.pp-card picture, .pp-card img { display: block; width: 100%; height: 100%; }
.pp-card img { object-fit: cover; object-position: 50% 30%; }
/* home: organization cards — the card straddles the illustration and the heading row, on the right (the text starts below it) */
.hm-org__body { position: relative; }
.pp-card--org { --pp-w: 100px; top: -56px; right: 28px; }
/* /institutions, /companies: the students / employees illustration — bottom-left corner, under the CSV / employee card */
.pp-host { position: relative; }
.pp-card--fig { --pp-w: 132px; bottom: -70px; left: -26px; }
/* /about: an editorial collage around the mission photo — two framed portraits on its corners, one round avatar on top */
.pp-collage { position: relative; }
.pp-card--a1 { --pp-w: 132px; top: -54px; left: -44px; }
.pp-card--a2 { --pp-w: 150px; right: -28px; bottom: -66px; }
.pp-card--a3 { --pp-w: 92px; top: -42px; right: 56px; aspect-ratio: 1; border-radius: 50%; }
.pp-card--a3 img { object-position: 50% 22%; }
@media (max-width: 1279.98px) { .pp-card--a2 { right: -8px; } .pp-card--a1 { left: -20px; } }
@media (max-width: 1023.98px) {
  .pp-card--fig { left: -10px; }
  .pp-card--a1 { left: -12px; }
}
@media (max-width: 767.98px) {
  .pp-card { border-width: 4px; border-radius: 14px; }
  .pp-card--org { --pp-w: 76px; top: -44px; right: 20px; }
  .pp-card--fig { --pp-w: 92px; top: -12px; right: -4px; bottom: auto; left: auto; }
  .pp-card--a1 { --pp-w: 84px; top: -34px; left: -6px; }
  .pp-card--a2 { --pp-w: 96px; right: -6px; bottom: -40px; }
  .pp-card--a3 { display: none; }
}

/* ── Closing section (IVQA_SITE_CLOSING_20261005; one simple layout since IVQA_SITE_PORTRAIT_20261006, partials/site_closing.php):
   the last section of every public page. Text beside ONE large candid photo with soft corners; two small white IVQA cards on
   its edges, over the plain background (the subject is centred in every crop), never over the face. Motion once, in view:
   the photo opens from an inset, slightly zoomed frame and settles (1.1 s / 1.8 s), the cards rise in one after the other
   (0.55 s, 0.8 s), the Valid check ticks (1.3 s); then stillness, no loop. Reduced motion / no JS: the finished state. */
.cx { padding: clamp(64px, 5vw + 32px, 112px) 0; background: var(--c-stone); overflow: hidden; }
.cx__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cx__text { max-width: 440px; }
.s-body .cx__text h2 { margin: 0 0 14px; font-size: var(--t-h2); line-height: 1.15; }
.s-body .cx__text p { margin: 0 0 18px; color: var(--s-muted); font-size: var(--t-lg); line-height: 1.6; }
.cx__art { position: relative; width: 100%; max-width: 640px; justify-self: end; }
.cx__p { position: relative; margin-left: auto; overflow: hidden; border-radius: 24px; background: #e7e5e4; clip-path: inset(0 round 24px); }
.cx__art--wide .cx__p { width: 90%; aspect-ratio: 7 / 5; }
.cx__art--tall .cx__p { width: 58%; aspect-ratio: 4 / 5; margin-right: 6%; }
.cx__p picture, .cx__p img { display: block; width: 100%; height: 100%; }
.cx__p img { object-fit: cover; object-position: 50% 30%; }
.cx__a { position: absolute; z-index: 2; }
.cx__a--1 { left: 0; bottom: 9%; }
.cx__a--2 { right: 2%; top: 7%; z-index: 3; }
.cx__art--tall .cx__a--1 { left: 22%; }  /* on the left edge of the 4:5 photo (which starts at 36 %) */
.cx__art--tall .cx__a--2 { right: 0; }
/* the cards: white, hairline border, one soft shadow */
.cx-mini { min-width: 172px; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 18px 36px -18px rgba(17, 17, 17, .35); }
.s-body .cx-mini p { margin: 0; }
.s-body p.cx-mini__t { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--s-ink); font-size: 13px; font-weight: 600; }
.cx-mini svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cx-paper { min-width: 0; padding: 10px; }
.cx-paper .cx-doc { display: block; width: auto; height: 96px; max-width: 150px; }
.s-body p.cx-res__h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--s-muted); font-size: 12px; font-weight: 600; }
.s-body p.cx-res__t { margin-bottom: 8px; color: var(--s-ink); font-size: 14px; font-weight: 600; }
.cx-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cx-qr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-qr svg { width: 34px; height: 34px; color: var(--s-ink); }
.s-body .cx-qr p { color: var(--s-ink); font-size: 13px; font-weight: 600; }
.cx-an { width: 200px; }
.cx-an__bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.cx-an__bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--p-lavender); }
.cx-an__bars i:nth-child(1) { height: 30%; } .cx-an__bars i:nth-child(2) { height: 46%; } .cx-an__bars i:nth-child(3) { height: 38%; } .cx-an__bars i:nth-child(4) { height: 62%; }
.cx-an__bars i:nth-child(5) { height: 54%; } .cx-an__bars i:nth-child(6) { height: 78%; background: var(--c-blue); } .cx-an__bars i:nth-child(7) { height: 92%; background: var(--c-blue); }
.cx-csv { width: 196px; }
.cx-csv ul { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.cx-csv li { height: 8px; border-radius: 4px; background: #e7e5e4; }
.cx-csv li:nth-child(2) { width: 82%; } .cx-csv li:nth-child(3) { width: 64%; }
.s-body p.cx-csv__ok { display: flex; align-items: center; gap: 6px; color: #15803d; font-size: 12.5px; font-weight: 600; }
.cx-legal { width: 196px; }
.cx-legal__ic, .cx-sec__ic { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 9px; background: var(--p-sky); color: var(--c-blue-ink); }
.cx-legal__ic svg, .cx-sec__ic svg { width: 17px; height: 17px; }
.cx-legal i { display: block; height: 7px; margin-top: 8px; border-radius: 4px; background: #e7e5e4; }
.cx-legal i:nth-of-type(2) { width: 86%; } .cx-legal i:nth-of-type(3) { width: 92%; } .cx-legal i:nth-of-type(4) { width: 58%; }
.cx-sec { width: 206px; }
.cx-sec ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cx-sec li { position: relative; padding-left: 16px; color: var(--s-ink); font-size: 13px; font-weight: 600; }
.cx-sec li::before { content: ""; position: absolute; top: .45em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); }
.cx-addon { width: 196px; }
.cx-addon__f { display: block; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--s-line); border-radius: 8px; color: var(--s-muted); font-size: 12px; }
.cx-addon__b { display: block; margin-top: 10px; padding: 7px 10px; border-radius: 8px; background: var(--c-blue); color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; }
/* R · compact (legal pages, contact, FAQ): a smaller photo and one card */
.cx--R { padding: 56px 0; }
.cx--R .cx__grid { grid-template-columns: minmax(0, 1fr) 320px; }
.s-body .cx--R .cx__text h2 { font-size: 24px; }
.s-body .cx--R .cx__text p { font-size: 16px; }
.cx--R .cx__text { max-width: 560px; }
.cx--R .cx__art { max-width: 320px; }
.cx--R .cx__p { width: 150px; margin-right: 0; border-radius: 18px; clip-path: inset(0 round 18px); }
.cx--R .cx__a--1 { left: 0; bottom: 12%; }
/* motion: once, in view (.s-cssm armed by ivqa-site.js; never armed under reduced motion) */
.cx__art.is-armed:not(.is-play) .cx__p { clip-path: inset(6% 6% 6% 6% round 32px); }
.cx__art.is-armed:not(.is-play) .cx__p img { transform: scale(1.08); }
.cx__art.is-armed:not(.is-play) .cx__a { opacity: 0; transform: translateY(16px); }
.cx__art.is-play .cx__p { transition: clip-path 1.1s cubic-bezier(.22, .8, .24, 1); }
.cx__art.is-play .cx__p img { transition: transform 1.8s cubic-bezier(.22, .8, .24, 1); }
.cx__art.is-play .cx__a { transition: opacity .5s ease var(--cx-d, .55s), transform .7s cubic-bezier(.22, .8, .24, 1) var(--cx-d, .55s); }
.cx__a--2 { --cx-d: .8s; }
.cx__art.is-play .s-pill--valid svg { transform-origin: 50% 50%; animation: cx-tick .45s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
@keyframes cx-tick { from { transform: scale(0); } to { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) {
  .cx__art.is-play:hover .cx__a { transform: translateY(-3px); transition: transform .3s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .cx__p, .cx__p img, .cx__a { transition: none !important; }
  .cx__art .s-pill--valid svg { animation: none !important; }
  .cx__art:hover .cx__a { transform: none !important; }
}
@media (max-width: 1023.98px) {
  .cx__grid, .cx--R .cx__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cx__text { max-width: 620px; order: 2; }
  .cx__art { justify-self: start; max-width: 620px; }
  .cx--R .cx__text { order: 0; }
  .cx--R .cx__art { justify-self: start; }
}
@media (max-width: 767.98px) {
  .s-body .cx__text p { font-size: 16px; }
  .cx__art--wide .cx__p { width: 100%; }
  .cx__art--tall .cx__p { width: 70%; margin-right: 0; }
  .cx__art--tall .cx__a--1 { left: 8px; }
  .cx-mini { min-width: 0; padding: 10px 12px; }
  .cx__a { transform-origin: left bottom; scale: .9; }
  .cx__a--1 { left: 8px; bottom: 6%; }
  .cx__a--2 { right: 8px; top: 6%; transform-origin: right top; }
  .cx-paper .cx-doc { height: 72px; }
}

/* ── Homepage hero CTA (IVQA_SITE_HERO_CTA_20261005, owner brief): one solid IVQA-blue primary (Sign up for free) and one
   light-grey secondary (Verify a document or credential →), same height, same radius, side by side; stacked full width
   on phones. Flat (IVQA_SITE_COLOUR_20261006): colour-only hover; none under reduced motion. The former door buttons and Verify line are
   gone from the markup (their rules above stay harmless). */
.hm-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.s-body a.hm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.s-body a.hm-cta--primary { border-color: var(--s-blue); background: var(--s-blue); color: #fff; box-shadow: none; }
.s-body a.hm-cta--primary:hover { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.s-body a.hm-cta--secondary { border-color: #e4e4e7; background: #f7f7f7; color: var(--s-ink); box-shadow: none; }
.s-body a.hm-cta--secondary:hover { border-color: #c4c4c8; background: #fff; color: var(--s-ink); }
.hm-cta__arrow { color: var(--s-blue); transition: transform .2s ease; }
.s-body a.hm-cta--secondary:hover .hm-cta__arrow { transform: translateX(3px); }
.s-body a.hm-cta:focus-visible { outline: 2px solid var(--s-blue); outline-offset: 3px; }
@media (min-width: 1200px) {
  .hm-hero__cta { flex-wrap: nowrap; }  /* side by side on desktop: the pair may run a few px into the empty column gap */
  .s-body a.hm-cta { flex: 0 0 auto; }
}
@media (max-width: 575.98px) {
  .hm-hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .s-body a.hm-cta { width: 100%; padding: 0 20px; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .s-body a.hm-cta, .hm-cta__arrow { transition: none; }
  .s-body a.hm-cta--primary:hover, .s-body a.hm-cta--secondary:hover .hm-cta__arrow { transform: none; }
}

/* ══ Design system (IVQA_SITE_DESIGN_20261005) — colour revised IVQA_SITE_COLOUR_20261006 (owner 2026-10-06: "look how
   certifier.io uses colour") ══════════════════════════════════════════════════════════════════════════════════════════════
   Pages are white and warm stone, flat: no gradients, glows, rounded colour canvases or navy sections. ONE action blue.
   Colour lives INSIDE cards and illustrations as soft pastels: the panel of every figure takes the pastel of its subject
   (institutions butter, companies sky, verification mint, insight lavender, infrastructure sand). Green only for the
   Valid state. Tokens: ivqa-site.css :root (--c-*, --p-*, --t-*, --sp-*). Order: 1 page tones · 2 heroes · 3 section
   rhythm · 4 pastel figure panels · 5 components (.ds-flow, .ds-sheet, .ds-stage, .ds-chip) · 6 the home story · 7 door,
   shared and content pages · 8 header · 9 motion. */

/* ---- 1. Page tones (menu.php $ivqa_tone → body.s-tone--*): every page is white + stone; the tone only picks the pastel of
   its compositions (--tone-pastel) ------------------------------------------------------------------------------------------ */
.s-body { --tone-hero: #fff; --tone-alt: var(--c-stone); --tone-soft: var(--c-stone); --tone-warm: var(--c-stone); --tone-dr: var(--c-stone); --tone-pastel: var(--p-sky); }
.s-tone--home { --tone-pastel: var(--p-butter); }
.s-tone--inst { --tone-pastel: var(--p-butter); }
.s-tone--co { --tone-pastel: var(--p-sky); }
.s-tone--cred { --tone-pastel: var(--p-lavender); }
.s-tone--verify { --tone-pastel: var(--p-mint); }
.s-tone--platform { --tone-pastel: var(--p-sky); }
.s-tone--trust { --tone-pastel: var(--p-mint); }
.s-tone--story { --tone-pastel: var(--p-peach); }
.s-tone--quiet { --tone-pastel: var(--p-sand); }

/* ---- 2. Heroes: white, no decoration (the figure carries the colour) ---------------------------------------------------- */
.s-page-head { box-shadow: none; }
.hm-hero.s-hero { background: #fff; }

/* ---- 3. Section rhythm: white and warm stone, full width ---------------------------------------------------------------- */
.s-section--warm { background: var(--tone-warm); }
.s-section.dr-bg { background: var(--tone-dr); }
.cx { background: var(--c-stone); border-top: 0; }

/* ---- 4. Pastel figure panels: the first rect of every inlined figure is its panel (vis/kit.py), the second its dot texture */
:is(.s-anim__d, .s-anim__m, .s-anim, .hd__d, .hd__m) > svg > rect:nth-of-type(1) { fill: var(--fig-bg, var(--p-sky)); }
:is(.s-anim__d, .s-anim__m, .s-anim, .hd__d, .hd__m) > svg > rect:nth-of-type(2) { opacity: .4; }
/* the home hero demo: no panel colour (owner 2026-10-06, "let it simple"): the white app window sits on the white hero */
.hd { --fig-bg: transparent; }
:is(.hd__d, .hd__m) > svg > rect:nth-of-type(2) { display: none; }
/* without the panel, the phone that rises past the window would end on a hard edge (the composition's clip at 520 / 580):
   the last 4 % / 3 % fade out instead (the window itself ends above, at 95 % / 96 %) */
.hd__d > svg { -webkit-mask-image: linear-gradient(180deg, #000 96%, transparent 100%); mask-image: linear-gradient(180deg, #000 96%, transparent 100%); }
.hd__m > svg { -webkit-mask-image: linear-gradient(180deg, #000 97%, transparent 100%); mask-image: linear-gradient(180deg, #000 97%, transparent 100%); }
.s-anim:is([data-anim="org-institution"], [data-anim="ws-institution"], [data-anim="inst-documents"], [data-anim="cred-diploma"], [data-anim="cred-certificate"], [data-anim="cred-ecard"], [data-anim="ui-import"], [data-anim="issue-place"], [data-anim="status-edu"]) { --fig-bg: var(--p-butter); }
.s-anim:is([data-anim="org-company"], [data-anim="ws-company"], [data-anim="co-documents"], [data-anim="employees"], [data-anim="cred-badge"], [data-anim="cred-company"], [data-anim="status-co"]) { --fig-bg: var(--p-sky); }
.s-anim:is([data-anim="hero-verify"], [data-anim="verify-flow"], [data-anim="qr-story"], [data-anim="public-page"], [data-anim="org-verify"], [data-anim="anti-fraud"], [data-anim="share"], [data-anim="status-lifecycle"]) { --fig-bg: var(--p-mint); }
.s-anim:is([data-anim="analytics-board"], [data-anim="analytics-board-co"], [data-anim="audit-timeline"], [data-anim="audit-timeline-co"]) { --fig-bg: var(--p-lavender); }
.s-anim:is([data-anim="security"], [data-anim="trust-layer"], [data-anim="api-flow"], [data-anim="cred-documents"]) { --fig-bg: var(--p-sand); }

/* ---- 5. Components ------------------------------------------------------------------------------------------------------ */
.s-body .s-eyebrow--ok { color: #15803d; background: transparent; }

/* 5a. The verification flow: DOCUMENT → QR CODE → SCAN → IVQA → VERIFIED (partials/site_ds.php ivqa_ds_flow) */
.ds-flow { position: relative; max-width: 1080px; margin: 0 auto; }
.ds-flow__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.ds-flow__line { position: absolute; left: 10%; right: 10%; top: 35px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #d6d3d1 0%, #d6d3d1 70%, #22c55e 100%); }
.ds-flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.ds-flow__ic { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 10px; border-radius: 20px; background: var(--ic-bg, var(--p-sky)); color: var(--s-ink); }
.ds-flow__ic svg { width: 30px; height: 30px; }
.ds-flow__step:nth-child(1) { --ic-bg: var(--p-butter); }
.ds-flow__step:nth-child(2) { --ic-bg: var(--p-peach); }
.ds-flow__step:nth-child(3) { --ic-bg: var(--p-lavender); }
.ds-flow__step--ivqa .ds-flow__ic { background: var(--c-blue); }
.ds-flow__brand { font: 800 15px/1 var(--s-font-display); letter-spacing: .04em; color: #fff; }
.ds-flow__step--ok .ds-flow__ic { background: var(--c-green); color: #fff; }
.ds-flow__t { font: 600 1.0625rem/1.25 var(--s-font-display); color: var(--s-ink); letter-spacing: -.01em; }
.ds-flow__d { max-width: 200px; font-size: var(--t-small); line-height: 1.45; color: var(--s-muted); }
.ds-flow__pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--c-green-soft); color: #166534; font-size: .85rem; font-weight: 700; }
.ds-flow__pill svg { width: 15px; height: 15px; }
@media (max-width: 899.98px) {
  .ds-flow { max-width: 520px; }
  .ds-flow__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ds-flow__step { display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: start; text-align: left; }
  .ds-flow__ic { grid-row: 1 / span 3; width: 60px; height: 60px; margin: 0; border-radius: 16px; }
  .ds-flow__ic svg { width: 26px; height: 26px; }
  .ds-flow__t { padding-top: 7px; }
  .ds-flow__d { max-width: none; }
  .ds-flow__pill { justify-self: start; }
  .ds-flow__line { left: 29px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; background: linear-gradient(180deg, #d6d3d1 0%, #d6d3d1 70%, #22c55e 100%); transform-origin: 50% 0; }
  .s-cssm.is-armed:not(.is-play) .ds-flow__line { transform: scaleY(0); }
}

/* 5b. Document sheets and the stage: a pastel panel, an owner portrait (optional), credential / document artworks, a card */
.ds-sheet { display: block; filter: drop-shadow(0 1px 2px rgba(17, 17, 17, .08)) drop-shadow(0 14px 22px rgba(17, 17, 17, .16)); }
.ds-sheet img { display: block; width: 100%; height: auto; }
.ds-stage { position: relative; isolation: isolate; width: 100%; max-width: 560px; aspect-ratio: 5 / 4; margin: 0 auto; container-type: inline-size; }
.ds-stage > * { position: absolute; }
.ds-stage__panel { z-index: -1; inset: 7% 3% 3% 9%; border-radius: 24px; background: var(--stage-bg, var(--tone-pastel)); }
.ds-stage__person { z-index: 1; overflow: hidden; border-radius: 20px; background: #e7e5e4; }
.ds-stage__person picture, .ds-stage__person img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-stage__sheet { z-index: 2; }
.ds-stage__card { z-index: 3; }
.ds-stage__card .s-res { box-shadow: var(--s-shadow-float); }
/* a · Issue: portrait right, a document behind on the left, the diploma in front, the QR chip on the portrait's edge */
.ds-stage--a { --stage-bg: var(--p-butter); }
.ds-stage--a .ds-stage__person { right: 6%; top: 0; width: 45%; aspect-ratio: 4 / 5; }
.ds-stage--a .ds-stage__sheet--2 { left: 15%; top: 4%; width: 24%; transform: rotate(-6deg); }
.ds-stage--a .ds-stage__sheet--1 { left: 3%; bottom: 8%; width: 56%; transform: rotate(-2deg); }
.ds-stage--a .ds-stage__card { right: 0; bottom: 14%; }
/* b · Start: two credentials fanned out, the Valid result card in front */
.ds-stage--b { --stage-bg: var(--p-peach); }
.ds-stage--b .ds-stage__sheet--1 { left: 4%; top: 12%; width: 54%; transform: rotate(-4deg); }
.ds-stage--b .ds-stage__sheet--2 { left: 57%; top: 4%; width: 19%; transform: rotate(6deg); }
.ds-stage--b .ds-stage__card { right: 0; bottom: 3%; width: min(60%, 320px); }
/* c · a page hero without its own figure: a document behind, the diploma in front, the result card */
.ds-stage--c .ds-stage__sheet--2 { left: 50%; top: 0; width: 25%; transform: rotate(6deg); }
.ds-stage--c .ds-stage__sheet--1 { left: 0; top: 16%; width: 63%; transform: rotate(-3deg); }
.ds-stage--c .ds-stage__card { right: 0; bottom: 2%; width: min(50%, 270px); }
/* a narrow stage (phones, small columns): the result card keeps its state block and first row, without the sentence */
@container (max-width: 440px) {
  .ds-stage__card .s-res { padding: 12px; }
  .ds-stage__card .s-res__sent, .ds-stage__card .s-res__meta { display: none; }
  .ds-stage--b .ds-stage__card, .ds-stage--c .ds-stage__card { width: 60%; }
}
/* chips (QR generated, CSV checked) */
.ds-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--s-line); box-shadow: var(--s-shadow-float); white-space: nowrap; }
.ds-chip > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--c-green-soft); color: var(--c-green-ink); }
.ds-chip > span:first-child svg { width: 20px; height: 20px; }
.ds-chip b { display: block; font-size: .875rem; line-height: 1.25; color: var(--s-ink); }
.ds-chip small { display: block; font-size: .75rem; line-height: 1.3; color: var(--s-muted); }
@media (max-width: 479.98px) { .ds-chip { padding: 8px 12px 8px 8px; gap: 8px; } .ds-chip > span:first-child { width: 32px; height: 32px; } }

/* ---- 6. The home: white · white · white · light blue · white · stone · white · stone · white (IVQA_SITE_HUMAN_20261006) -- */
/* S3 what gets issued: each tile a white card with its document on its own pastel (Certifier-style feature tiles) */
.s-section.hm-issued { background: #fff; }
.hm-issued__row, .hm-issued__row--co { background: var(--c-stone); }
.hm-issued__row .hm-org__mark { color: #1d4ed8; background: #fff; }
.s-body a.hm-tile { border-color: var(--s-line); box-shadow: none; }
.s-body a.hm-tile:hover { border-color: #c9c6c3; box-shadow: none; }
.s-body .hm-tile__art { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 8px 8px 0; padding: 0; border-radius: 12px; background: var(--tile-bg, var(--p-sky)); }
.s-body .hm-tile__art img { width: auto; height: auto; max-width: 74%; max-height: 74%; filter: drop-shadow(0 6px 10px rgba(17, 17, 17, .12)); }
.hm-issued__row--inst li:nth-child(1) { --tile-bg: var(--p-butter); }
.hm-issued__row--inst li:nth-child(2) { --tile-bg: var(--p-peach); }
.hm-issued__row--inst li:nth-child(3) { --tile-bg: var(--p-sky); }
.hm-issued__row--inst li:nth-child(4) { --tile-bg: var(--p-lavender); }
.hm-issued__row--inst li:nth-child(5) { --tile-bg: var(--p-mint); }
.hm-issued__row--co li:nth-child(1) { --tile-bg: var(--p-sky); }
.hm-issued__row--co li:nth-child(2) { --tile-bg: var(--p-sand); }
.hm-issued__row--co li:nth-child(3) { --tile-bg: var(--p-pink); }
/* S3 three steps to issue: numbered steps beside the stage */
.hm-steps { list-style: none; counter-reset: hmstep; margin: 22px 0 6px; padding: 0; display: grid; gap: 14px; }
.hm-steps li { counter-increment: hmstep; position: relative; padding-left: 50px; color: var(--s-muted); line-height: 1.5; }
.hm-steps li::before { content: counter(hmstep); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--p-butter); color: var(--s-ink); font: 600 .95rem/1 var(--s-font-display); }
.hm-steps b { color: var(--s-ink); font-weight: 600; }
@media (max-width: 1199.98px) { .hm-send .hm-steps { max-width: 560px; margin-left: auto; margin-right: auto; text-align: left; } }
/* S5 one scan, one clear answer: the one light-blue band of the page */
.s-section.hm-check { background: var(--c-sky); }
/* S6 the record, not the file */
.s-section.hm-record { background: #fff; }
.hm-record .s-eyebrow { color: #15803d; }
/* S7 analytics */
.s-section.hm-insight { background: var(--c-stone); }
/* S8 two paths: white cards on white, the start of each path under a hairline */
.s-section.hm-orgs { background: #fff; }
.hm-orgs .hm-org { border-color: var(--s-line); box-shadow: none; }
.hm-org--inst .hm-org__mark { color: #1d4ed8; background: var(--p-butter); }
.hm-org--co .hm-org__mark { color: #1d4ed8; background: var(--p-sky); }
.hm-org__path { display: grid; gap: 10px; justify-items: start; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--s-line); }
.s-body .hm-org__path p { margin: 0; font-size: var(--t-small); color: var(--s-muted); }
.hm-org__body > .s-link { margin: 0 0 14px; }
.s-body .hm-orgs__demo { margin: 26px 0 0; text-align: center; color: var(--s-muted); }
.s-body .hm-orgs__demo a.s-link { color: var(--c-blue); }
.s-body .hm-orgs__demo a.s-link:hover { color: var(--c-blue-ink); }
@media (max-width: 767.98px) { .hm-org__path .s-btn { width: 100%; } }
/* S8 security, in short (IVQA_SITE_HUMAN_20261006): stone, the four facts as a plain list between hairlines */
.s-section.hm-trust { background: var(--c-stone); }
.hm-trust__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.hm-trust__list { list-style: none; margin: 0; padding: 0; }
.hm-trust__list li { padding: 18px 0; border-top: 1px solid var(--s-line-strong); color: var(--s-muted); line-height: 1.6; }
.hm-trust__list li:last-child { border-bottom: 1px solid var(--s-line-strong); }
.hm-trust__list b { color: var(--s-ink); font-weight: 600; }
@media (max-width: 991.98px) { .hm-trust__grid { grid-template-columns: minmax(0, 1fr); } }
/* S9 try it (IVQA_SITE_HUMAN_20261006): one flat light-blue band, text left, the two actions right; the sample-data line under it */
.s-body .hm-start__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 3.5vw, 48px); border-radius: 22px; color: var(--s-text); background: var(--c-sky); border: 0; }
.s-body .hm-start__band h2 { margin: 0 0 8px; color: var(--s-ink); text-align: left; font-size: var(--t-h2); }
.s-body .hm-start__text > p { margin: 0; max-width: 560px; color: var(--s-muted); font-size: var(--t-lg); }
.hm-start__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.s-body .hm-sample { margin: 18px 0 0; font-size: var(--t-caption); color: var(--s-muted); }
@media (max-width: 575.98px) { .hm-start__cta { flex-direction: column; align-items: stretch; width: 100%; } .hm-start__cta .hm-cta { width: 100%; } }
/* the home pilot reads left to right like a page someone wrote: heads, links and notes left-aligned (IVQA_SITE_HUMAN_20261006) */
.hm-head { max-width: 760px; }
.hm-links, .hm-split--solo .hm-split__text .hm-links { justify-content: flex-start; }
.s-body .hm-check__share { margin: 28px 0 0; max-width: none; text-align: left; }
.s-body .hm-orgs__demo { text-align: left; }
@media (max-width: 1199.98px) { .hm-split__text { text-align: left; } .hm-split__text .hm-links { justify-content: flex-start; } }

/* ---- 7. Door, shared and content pages ------------------------------------------------------------------------------------ */
/* cards and tiles: white, hairline border, no shadow */
.s-body :is(.s-tile, .dr-card, .s-feature, .hm-org) { border-color: var(--s-line); box-shadow: none; }
/* the family tint of the door pages (credential thumbs, "also" notes, step icons) is a pastel */
.dr--inst { --dr-tint: var(--p-butter); }
.dr--co { --dr-tint: var(--p-sky); }
.dr--sh { --dr-tint: var(--tone-pastel); }
/* /about: the hero text beside a static composition (stage c); stacked below 992 px like every split */
@media (min-width: 992px) { .ab-hero .s-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 4vw, 64px); } }
.ab-hero__fig .ds-stage { max-width: 500px; }
@media (max-width: 991.98px) { .ab-hero__fig .ds-stage { max-width: 440px; } }
/* plain lists (IVQA_SITE_COPY_20261007): a title and a sentence between hairlines instead of a grid of identical icon cards
   (/about principles; the "Good to know" facts of the credential and document pages). 3 columns, or 2 with --2. */
.s-plain-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.s-plain-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-plain-list > div { padding: 20px 0; border-top: 1px solid var(--s-line-strong); }
.s-body .s-plain-list h3 { margin: 0 0 6px; font-size: var(--t-h3); }
.s-body .s-plain-list p { margin: 0; color: var(--s-muted); }
@media (max-width: 899.98px) { .s-plain-list, .s-plain-list--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---- 7b. Space and polish (IVQA_SITE_SPACE_20261007, owner: "no unnecessary space, on phones too; pro and human") ----------
   - two stone sections in a row share one band: the second starts at its content (their paddings no longer add up);
   - the home: the hero sits close to the first section; the issue steps follow the tiles at half a section; on phones the
     hero lead reserves three lines (the new copy needs no fourth);
   - no eyebrow labels anywhere (the homepage pilot, approved, applied site-wide; the markup stays for now);
   - links keep their look but get a 44 px tap area on phones (an invisible ::before, so nothing moves). */
.s-body :is(.s-section--alt, .s-section--soft, .s-section--warm, .s-section.dr-bg) + :is(.s-section--alt, .s-section--soft, .s-section--warm, .s-section.dr-bg, .cx) { padding-top: 0; }
.s-body .hm-issued + .hm-send { padding-top: calc(var(--sp-section) * .5); }
.s-body .s-eyebrow { display: none; }
@media (max-width: 767.98px) {
  .hm-hero { padding-bottom: 24px; }
  .s-body a.s-link { position: relative; }
  .s-body a.s-link::before { content: ""; position: absolute; inset: -9px -6px; }
}
@media (max-width: 444.98px) { .hm-hero .s-lead { min-height: calc(3 * 1.6em); } }

/* ---- 8. Header: the primary action reads "Sign up for free" (menu.php); measured with nav_check.php, the 1200 px row keeps
   44 px (1100) to 100 px (1440+) between the menu and the actions, so Verify keeps its short visible label ------------------ */

/* ---- 9. Motion: buttons no longer lift; the flow is a CSSM stepper (finished state as rendered under reduced motion) ------ */
@media (prefers-reduced-motion: reduce) {
  .s-btn:hover, .s-btn.s-btn--primary:hover, .s-btn.s-btn--secondary:hover, .s-btn.s-btn--dark:hover, .s-btn.s-btn--verify:hover { transform: none; }
}
/* IVQA_SITE_BUTTONS_20261013 — owner 2026-10-13: every ivqa.org button looks like the app's button (app.ivqa.org
   ivqa-buttons.css): the asymmetric 16px 0 16px 0 corners, a bold label, a blue gradient (#2563eb to #2d6cef, so a white label keeps 4.5:1 or more) with a soft blue shadow for the
   main action, and white with a blue label and a light blue border for the second action. Sizes, spacing and tap areas
   stay as they are. Left alone on purpose: text links (.s-btn--text, .s-link), the header menu triggers, the pricing
   Education / Companies switch and the hero demo's pause control. The blog filters keep their meaning: the active filter
   is filled, the others are white. <button> elements now take the site font (font-family: inherit); before, the blog
   filters and the form buttons fell back to the browser's default font. */
.s-body .s-btn:not(.s-btn--text), .s-body a.hm-cta, .s-body a.s-nav__verify { border-radius: 16px 0 16px 0; border-width: 1px; border-style: solid; font-family: inherit; font-weight: 700; letter-spacing: .01em; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
/* main action: blue gradient */
.s-body .s-btn.s-btn--primary, .s-body .s-btn.s-btn--dark, .s-body .s-btn.s-btn--verify, .s-body a.hm-cta--primary, .s-body .s-btn[data-blog-cat].is-active { background: linear-gradient(135deg, #2563eb 0%, #2d6cef 100%); border-color: #2563eb; color: #fff; box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .55); }
.s-body .s-btn.s-btn--primary:hover, .s-body .s-btn.s-btn--dark:hover, .s-body .s-btn.s-btn--verify:hover, .s-body a.hm-cta--primary:hover, .s-body .s-btn[data-blog-cat].is-active:hover { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); border-color: #1d4ed8; color: #fff; box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .65); transform: translateY(-1px); }
.s-body .s-btn.s-btn--primary:active, .s-body .s-btn.s-btn--dark:active, .s-body .s-btn.s-btn--verify:active, .s-body a.hm-cta--primary:active { background: #1e40af; border-color: #1e40af; box-shadow: 0 2px 6px rgba(37, 99, 235, .35); transform: none; }
/* second action: white, blue label, light blue border */
.s-body .s-btn.s-btn--secondary, .s-body .s-btn.s-btn--ghost, .s-body .s-btn.s-btn--light, .s-body a.hm-cta--secondary, .s-body a.s-nav__verify { background: #fff; border-color: rgba(37, 99, 235, .35); color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, .10); }
.s-body .s-btn.s-btn--secondary:hover, .s-body .s-btn.s-btn--ghost:hover, .s-body .s-btn.s-btn--light:hover, .s-body a.hm-cta--secondary:hover, .s-body a.s-nav__verify:hover { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .45); transform: translateY(-1px); }
.s-body .s-btn.s-btn--secondary:active, .s-body .s-btn.s-btn--ghost:active, .s-body .s-btn.s-btn--light:active, .s-body a.hm-cta--secondary:active, .s-body a.s-nav__verify:active { background: #dbeafe; border-color: #1e40af; color: #1e40af; box-shadow: none; transform: none; }
.s-body .s-btn:focus-visible, .s-body a.hm-cta:focus-visible, .s-body a.s-nav__verify:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.s-body .s-btn:disabled { background: #e5e7eb; border-color: #e5e7eb; color: #94a3b8; box-shadow: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .s-body .s-btn, .s-body a.hm-cta, .s-body a.s-nav__verify { transition: none; } .s-body .s-btn:hover, .s-body a.hm-cta:hover, .s-body a.s-nav__verify:hover { transform: none; } }

/* ==========================================================================================================================
   IVQA_SITE_PHOTOS_20261015 — Unsplash photos (owner 2026-10-15), partials/site_photo.php: the home people row under the hero
   (the Checkr pattern: photos with a small Valid tag) and one framed photo with a check.ivqa.org card inside a section's text
   column (the Accredible / Deel pattern). Decorative: alt="", cards aria-hidden. Uses the design tokens of ivqa-site.css.
   ========================================================================================================================== */
.s-body .ph-photo { display: block; overflow: hidden; border-radius: var(--s-radius-lg); background: var(--s-sand); box-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 26px 48px -30px rgba(17, 17, 17, .38); }
.s-body .ph-photo picture, .s-body .ph-photo img { display: block; width: 100%; height: 100%; }
.s-body .ph-photo img { object-fit: cover; }
.s-body .ph-fig { position: relative; width: 100%; max-width: 360px; margin: 32px 0 0; }
.s-body .ph-fig--tall .ph-photo { aspect-ratio: 4 / 5; }
.s-body .ph-fig--wide { max-width: 520px; }
.s-body .ph-fig--wide .ph-photo { aspect-ratio: 7 / 5; }
.s-body .ph-fig--center { max-width: 720px; margin: 48px auto 0; }
.s-body .ph-card { position: absolute; left: -28px; bottom: 32px; display: grid; justify-items: start; gap: 6px; min-width: 172px; padding: 12px 16px 14px; background: #fff; border-radius: var(--s-radius); box-shadow: var(--s-shadow-float); }
.s-body .ph-fig--r .ph-card { left: auto; right: -32px; }
.s-body .ph-card__h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3; color: var(--s-muted); }
.s-body .ph-card__h svg { width: 13px; height: 13px; flex: none; }
.s-body .ph-card__t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--s-ink); }
.s-body .ph-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--s-ok-bg); color: var(--s-ok); font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.s-body .ph-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* the home row: four people, two per row on tablets and phones */
.s-body .s-section.ph-people { padding-top: 8px; }
.s-body .ph-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.s-body .ph-person { display: grid; gap: 14px; align-content: start; margin: 0; }
.s-body .ph-strip > .ph-person:nth-child(2) { transition-delay: .07s; }
.s-body .ph-strip > .ph-person:nth-child(3) { transition-delay: .14s; }
.s-body .ph-strip > .ph-person:nth-child(4) { transition-delay: .21s; }
.s-body .ph-person__fig { position: relative; display: block; }
.s-body .ph-person .ph-photo { aspect-ratio: 4 / 5; }
.s-body .ph-tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px 11px 6px 7px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--s-ink); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: var(--s-shadow-float); }
.s-body .ph-tag svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: var(--s-ok-bg); color: var(--s-ok); }
.s-body .ph-tag b { color: var(--s-ok); font-weight: 700; }
.s-body .ph-person__t { display: block; font-size: 15px; line-height: 1.5; color: var(--s-text); }
.s-body .ph-person__t b { display: block; color: var(--s-ink); font-weight: 600; }
/* the contact page head: text left, the photo right; the photo is left out below 900 px so the form stays near the top */
.s-body .ph-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
.s-body .ph-head .ph-fig { margin: 0; }
@media (max-width: 991.98px) {
  .s-body .ph-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .s-body .dr-split__text .ph-fig { margin-left: auto; margin-right: auto; }
}
@media (max-width: 899.98px) {
  .s-body .ph-head { grid-template-columns: minmax(0, 1fr); }
  .s-body .ph-head .ph-fig { display: none; }
}
@media (max-width: 767.98px) {
  .s-body .ph-fig { margin-top: 24px; }
  .s-body .ph-fig--center { margin-top: 32px; }
  .s-body .ph-card, .s-body .ph-fig--r .ph-card { left: 12px; right: auto; bottom: 12px; min-width: 0; padding: 10px 12px 12px; }
}
@media (max-width: 479.98px) {
  .s-body .ph-strip { gap: 14px; }
  .s-body .ph-tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 8px 5px 5px; font-size: 11.5px; }
  .s-body .ph-tag svg { width: 16px; height: 16px; }
  .s-body .ph-tag__t { display: none; }   /* phones: the tag says Valid; the line under the photo names who it is */
  .s-body .ph-person__t { font-size: 14px; }
}

/* IVQA_SITE_PHOTOS_MARQUEE_20261016 — the home people row slides slowly and endlessly (owner 2026-10-16). The track holds the
   list twice and moves left by exactly one list, so the loop has no seam; the edges fade out. Pointer over the row, a tap
   (.is-paused, ivqa-site.js) or the keyboard control pauses it. Reduced motion: no movement, the copy is hidden and the row
   scrolls by hand. Only transform animates. */
.s-body .ph-marquee { position: relative; overflow: hidden; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.s-body .ph-marquee__track { display: flex; width: max-content; animation: ph-run 64s linear infinite; will-change: transform; }
.s-body .ph-strip.ph-strip--run { display: flex; flex: none; gap: 24px; padding-right: 24px; }
.s-body .ph-strip--run > .ph-person { flex: none; width: 270px; }
.s-body .ph-marquee:hover .ph-marquee__track, .s-body .ph-marquee:focus-within .ph-marquee__track, .s-body .ph-marquee.is-paused .ph-marquee__track { animation-play-state: paused; }
.s-body .ph-marquee__ctl { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 8px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--s-ink); font: 600 13px/1.2 var(--s-font); box-shadow: var(--s-shadow-float); cursor: pointer; }
.s-body .ph-marquee__ctl:not(:focus-visible) { width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); box-shadow: none; }
.s-body .ph-marquee__ctl:focus-visible { outline: 2px solid var(--s-blue); outline-offset: 2px; }
@keyframes ph-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 575.98px) {
  .s-body .ph-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
  .s-body .ph-strip.ph-strip--run { gap: 14px; padding-right: 14px; }
  .s-body .ph-strip--run > .ph-person { width: 190px; }
  .s-body .ph-marquee__track { animation-duration: 52s; }
}
@media (prefers-reduced-motion: reduce) {
  .s-body .ph-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .s-body .ph-marquee__track { animation: none; }
  .s-body .ph-strip--run[aria-hidden="true"], .s-body .ph-marquee__ctl { display: none; }
}