/* css/onboarding.css — onboarding.html only: what this Platform page has that platform.html
   and the other product pages do not. The skin is css/site.css (loaded first, and it carries
   platform.html's devices: .cmp, .journey, .caps, .pts, .record-grid, .anno-item, .rec-card,
   .irows, .faq); the product finish — bare icons, the connected-context panel with its paper
   skin, and the lifecycle chain — is css/product.css (loaded after this sheet, so it wins
   where the two overlap); the bar is css/nav.css, loaded last. */

/* --- skip link (site.css styles the nav, not this) --- */
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--blue);
  color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: top .2s ease; }
.skip:focus { top: 16px; }

/* --- hero: the onboarding photograph (05 Assets/Photos/KYC_onboarding_01.png, 1672x941): an
   applicant at a laptop against the skyline at dusk, the verification panels floating beside
   her — an ID card, the portrait in its frame, a document, a fingerprint and the confirming
   tick. The frame is composed left to right, so the desktop crop sits a little above centre
   and the copy overlays the figure under the veil; the portrait source is the 530x941 window
   centred at 36%, around the figure and the first two panels, for phones held upright. --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--onboarding .hero-media img { object-position: 50% 42%; }
@media (max-width: 760px) { .hero--onboarding .hero-media img { object-position: 50% 50%; } }

/* --- inline links inside body copy: weight and a hairline rule, never a browser underline.
   On a night band they lift to the light blue. --- */
.lede a, .anno-item p a, .pt p a, .cap p a, .chain-step p a { font-weight: 500; text-decoration: none;
  color: var(--blue); box-shadow: 0 1px 0 rgba(13,79,211,.34); transition: box-shadow .25s ease, opacity .25s ease; }
.lede a:hover, .anno-item p a:hover, .pt p a:hover, .cap p a:hover, .chain-step p a:hover { opacity: .8; }
section.night .lede a, section.night .anno-item p a, section.night .j-body p a,
section.night .chain-step p a { color: #BFD4FF; box-shadow: 0 1px 0 rgba(191,212,255,.4); }
section.night .lede a:hover, section.night .anno-item p a:hover, section.night .j-body p a:hover,
section.night .chain-step p a:hover { opacity: .8; }

/* --- numbered notes and the record caption on a plain white band: css/site.css inks them for
   night and for .tint, so the white band restates the paper treatment (the same lines the
   other product pages carry) --- */
.anno-item { cursor: default; }
section:not(.night):not(.tint) .anno-item { border-top-color: var(--line); }
section:not(.night):not(.tint) .anno-item h3 { color: var(--ink); }
section:not(.night):not(.tint) .anno-item p { color: var(--sub); }
section:not(.night):not(.tint) .rec-cap { color: var(--sub); }

/* --- the connected-context panel with eight sources rather than four: as on bank.html the
   chips keep their four columns and run to two rows on short labels, and a little side
   padding is given back to the label so the longest ("Portrait") stays on one line down to
   1024px, where css/product.css already takes the grid to two columns at 640px --- */
.sig--onb .sig-src li { padding-left: 4px; padding-right: 4px; }

/* --- icon-gutter points three across (the screening points): below 760px the plain
   .pts--ico rule in css/site.css loses to .pts.c3 on specificity, so the single column is
   restated, as the other product pages do --- */
@media (max-width: 760px) { .pts--ico.c3 { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } }

/* --- two journey marks this page adds to the set in css/site.css: the identity document is
   ticked once its checks pass, and the decision is written into the record. site.css already
   dashes .ric-tick and .ric-stem for the draw. --- */
.ric .ric-pen { stroke-dasharray: 1; }
.ric--verify .ric-tick { animation: icDraw 4s cubic-bezier(.4,0,.2,1) infinite; }
.ric--verify .ric-badge { transform-box: fill-box; transform-origin: 50% 50%;
  animation: icBeat 4s ease-in-out .5s infinite; }
.ric--decide .ric-pen { animation: icDraw 4.2s cubic-bezier(.4,0,.2,1) infinite; }
.ric--decide .ric-mark { transform-box: fill-box; transform-origin: 50% 50%;
  animation: icBeat 4.2s ease-in-out .9s infinite; }

/* --- the two record grids (#verify, #kyb): css/site.css top-aligns the columns, so the panel
   on the right stopped short of the five-item list beside it. As on the other product pages
   the right column stretches to the row and its panel fills it: the identity panel spreads
   the remainder across its body, the flow diagram taking the first 34px (its paths already
   scale, preserveAspectRatio none) and the gaps between its blocks the rest; the KYB record
   card's rows share it equally with their content centred. Under 920px the grid is one
   column, so nothing stretches. The IDs outrank product.css, which loads after this file. --- */
#verify .record-grid, #kyb .record-grid { align-items: stretch; }
#verify .record-grid > :last-child, #kyb .record-grid > :last-child { display: flex; flex-direction: column; }
#verify .record-grid .sig { flex: 1 1 auto; display: flex; flex-direction: column; }
#verify .record-grid .sig .sig-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
#verify .record-grid .sig .sig-core { width: 100%; }
#verify .record-grid .sig .sig-flow { height: auto; flex: 1 1 84px; min-height: 84px; max-height: 118px; }
#kyb .record-grid .rec-card { flex: 1 1 auto; display: flex; flex-direction: column; }
#kyb .record-grid .rec-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#kyb .record-grid .rec-row { flex: 1 1 auto; align-content: center; }