/* ============================================================
   THE ELEMENT KIT — Stripe and Mollie patterns, in our own colours.

   NOTHING HERE INTRODUCES A COLOUR. Every value resolves through
   palette.css: one accent (--yellow), the ink foundation and its
   shades, the warm paper ramp, the cool slate. The reference
   sheets these were lifted from carried a third chromatic colour
   for "the platform's own share" and for accent nodes; that is
   the one thing not copied, because the singularity is the power.

   NOTHING HERE SETS SECTION PADDING either. --sec-y is the single
   rhythm token for the whole site and components do not get to
   argue with it.

   The set pieces share the module stage's grammar deliberately —
   teal ground, fine dot grid, hairline rails, paper dots in
   motion, yellow reserved for the one thing that matters in each
   frame. Two visual languages on one page would read as two
   products.

   Behaviour lives in /scripts/kit.js. Classes are hk- prefixed so
   they cannot collide with nx- (module stage), mx- (module map),
   xp- (experiences) or cp- (content pages).
   ============================================================ */

/* ---------------------------------------------------------------
   1 · COUNTERS
   No styles of its own. data-count is a behaviour that composes
   with whatever it is put on — .kpi .n already owns the type.
   The one thing worth asserting is tabular figures, so a number
   counting up does not jiggle its own width while it climbs.
   --------------------------------------------------------------- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------
   2 · HOVER LIFT
   Mollie's cards do almost exactly this, and the shadow does more
   work than the movement — four pixels of rise reads as attention,
   twelve reads as a toy. A modifier, not a card component: the
   site already has cards and they keep their own borders.
   --------------------------------------------------------------- */
.hk-lift{transition:transform var(--t-base) var(--ease),
                    box-shadow var(--t-base) var(--ease),
                    border-color var(--t-base) var(--ease)}
@media(hover:hover){
  .hk-lift:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -22px rgb(var(--ink-deep-rgb) / .24);
    border-color:rgb(var(--ink-rgb) / .18);
  }
}

/* ---------------------------------------------------------------
   3 · SCROLL-DRAWN CHAIN
   The custody chain is the one story on this site that IS a
   sequence, so drawing it in sequence is meaning rather than
   decoration. Everything else gets a reveal; this gets a draw.

   Driven by the existing .rv/.in observer rather than a view()
   timeline: view() is Chrome-only, and the site already reveals
   a thousand elements this way in every engine. Adopting the
   timeline here would have LOST the effect in Firefox and Safari.
   --------------------------------------------------------------- */
.hk-chain-wrap{margin-top:48px}
/* On a phone the 900-unit viewBox would scale the labels to about five pixels,
   which is a diagram nobody can read pretending to be one they can. Below the
   breakpoint it scrolls inside its own box instead — the page body still never
   moves sideways, which is the rule that actually matters. */
@media(max-width:760px){
  .hk-chain-wrap{overflow-x:auto;overscroll-behavior-x:contain}
  .hk-chain{min-width:720px}
}
.hk-chain{width:100%;height:auto;display:block}
.hk-chain .hk-line{
  stroke:var(--teal-mid);stroke-width:2;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
}
.js .hk-chain.in .hk-line{
  transition:stroke-dashoffset 1.4s var(--ease-move);
  stroke-dashoffset:0;
}
.hk-chain .hk-node{opacity:0;transform:scale(.8);transform-origin:center;transform-box:fill-box}
.js .hk-chain.in .hk-node{
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
  opacity:1;transform:none;
}
/* Nodes arrive behind the line as it passes them, not all at once. */
.js .hk-chain.in .hk-node:nth-of-type(1){transition-delay:.10s}
.js .hk-chain.in .hk-node:nth-of-type(2){transition-delay:.38s}
.js .hk-chain.in .hk-node:nth-of-type(3){transition-delay:.66s}
.js .hk-chain.in .hk-node:nth-of-type(4){transition-delay:.94s}
.js .hk-chain.in .hk-node:nth-of-type(5){transition-delay:1.22s}
.hk-chain .hk-node-end circle{fill:var(--ink);stroke:var(--ink)}
/* The chain lives on paper, so it carries NO yellow. --yellow on --paper is
   almost no contrast; the accent is a signal for the dark stage, and on light
   ground the emphasis is weight and ink instead. */
.hk-chain .hk-gap{stroke:rgb(var(--ink-rgb) / .22);stroke-width:2;stroke-dasharray:4 7;fill:none}
.hk-chain .hk-lane{font-family:var(--mono);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--ink);text-anchor:start}
.hk-chain .hk-miss{fill:var(--muted);font-style:italic;text-transform:none;letter-spacing:0;font-size:15px}
.hk-chain text{font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--muted)}

/* ---------------------------------------------------------------
   4 · PINNED NARRATIVE
   The visual holds; the story moves. Stripe's signature move, and
   the spec is right that it should be spent on custody rather
   than scattered across four sections.
   --------------------------------------------------------------- */
.hk-pin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
/* The figure holds the full viewport height and centres its canvas inside it,
   rather than pinning to the top. Steps are centred in their own tall blocks,
   so a top-pinned figure drifts away from the sentence it is illustrating —
   the two only stay level if both are centred on the same line.
   Width is capped by the available HEIGHT so a square canvas can never grow
   taller than the viewport it is pinned inside; aspect-ratio then keeps it
   square rather than letting max-height squash it. */
.hk-pin-fig{
  position:sticky;top:var(--header-h,71px);
  height:calc(100svh - var(--header-h,71px));
  display:flex;align-items:center;
}
.hk-pin-canvas{
  position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;
  width:min(100%, calc(100svh - var(--header-h,71px) - 96px));
  margin-inline:auto;
  /* GROUND AND GRID COPIED EXACTLY FROM .nx-anim, not approximated.
     This was --ink-deep, which is a full shade darker and is reserved by
     palette.css for the hero background and the deepest scrims — not for a
     component surface. The module stage's drawing ground is --teal, and a kit
     that claims to share its grammar has to share its actual values. */
  background-color:var(--teal);
  background-image:radial-gradient(rgb(var(--paper-rgb) / .11) .9px,transparent 1.15px);
  background-size:26px 26px;background-position:13px 13px;
  border:1px solid rgb(var(--paper-rgb) / .17);
}
.hk-pin-v{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:scale(.97);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
}
.hk-pin-v.is-on{opacity:1;transform:none}
.hk-pin-step{
  min-height:56vh;display:flex;flex-direction:column;justify-content:center;
  padding:32px 0;opacity:.32;transition:opacity var(--t-base) var(--ease);
}
.hk-pin-step.is-on{opacity:1}
.hk-pin-step .hk-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
/* A small shared vocabulary for the stacked visuals, so a new pinned section
   only has to draw shapes rather than restate how they are painted. */
.hk-pin-v svg{width:82%;height:auto}
.hk-pin-v .hk-o{fill:none;stroke:rgb(var(--paper-rgb) / .5);stroke-width:2}
.hk-pin-v .hk-y{fill:none;stroke:var(--yellow);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round}
.hk-pin-v .hk-fill{fill:rgb(var(--paper-rgb) / .07)}
.hk-pin-v .hk-dash{stroke-dasharray:5 7}
.hk-pin-v .hk-t{fill:rgb(var(--paper-rgb) / .55);font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;text-anchor:middle}

/* Flat mode: no sticky, no dimming, every step simply readable. Set by kit.js
   under reduced motion and when there is no observer to drive the swap. */
.hk-pin-flat .hk-pin-fig{position:static;height:auto;display:block}
.hk-pin-flat .hk-pin-step{opacity:1;min-height:0}
@media(max-width:860px){
  .hk-pin{grid-template-columns:1fr;gap:32px}
  .hk-pin-fig{position:static;height:auto;display:block}
  .hk-pin-canvas{width:100%}
  .hk-pin-step{min-height:0;opacity:1}
}

/* ---------------------------------------------------------------
   5 · THE SET-PIECE STAGE
   Shared canvas for the centrepieces, in the module stage's
   grammar so a reader who has seen the nine diagrams recognises
   it instantly.
   --------------------------------------------------------------- */
.hk-stage{
  --hk-pad:clamp(20px,3vw,34px);
  position:relative;border-radius:22px;overflow:hidden;
  /* Same ground, grid and hairline as .nx-stage / .nx-anim — see the note on
     .hk-pin-canvas. The teal-mid wash stays, at a lower alpha now that it sits
     on --teal rather than the darker --ink-deep. */
  background-color:var(--teal);
  border:1px solid rgb(var(--paper-rgb) / .17);
  padding:var(--hk-pad);
}
/* The set pieces are drawn on a 900-unit canvas, which on a phone scales their
   labels to four or five pixels. Below the breakpoint the DRAWING scrolls
   inside its own box rather than the whole stage, so the replay control stays
   put and the page body still never moves sideways. The negative margin lets
   the scroll area reach the stage's padding edges, so a swipe starting at the
   edge does the thing it looks like it should. */
.hk-scroll{position:relative}
@media(max-width:760px){
  .hk-scroll{
    overflow-x:auto;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--hk-pad));padding-inline:var(--hk-pad);
  }
  .hk-scroll svg:not(.hk-mv){min-width:760px}
}
/* The dot grid, at .nx-anim's exact dimensions, with the depth wash over it. */
.hk-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgb(var(--teal-mid-rgb) / .22), transparent 62%),
    radial-gradient(rgb(var(--paper-rgb) / .11) .9px,transparent 1.15px);
  background-size:auto, 26px 26px;
  background-position:0 0, 13px 13px;
}
.hk-stage svg{position:relative;width:100%;height:auto;display:block}
.hk-stage text{font-family:var(--sans)}
.hk-stage .hk-mono{font-family:var(--mono);letter-spacing:.12em}

/* THE CONTROL IS THE VIDEO BANDS' — owner call. It carried a pill reading
   "REPLAY" in the top corner, which was a second vocabulary for the same job.
   kit.js now builds the bands' own .vctl markup inside this element and
   content.css dresses it, so there is ONE control on the site. Nothing
   visual is declared here: whatever the bands wear, the drawings wear. */
.hk-stage .vctl{top:auto}

/* Every part of a set piece starts hidden and is revealed by a stage class.
   Grouped here so a new centrepiece only has to name its parts. */
.hk-stage .hk-p{opacity:0;transform:translateY(8px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.hk-stage .hk-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset .8s var(--ease-move)}

/* ---------------------------------------------------------------
   6 · SPLIT FLOW — the Payments centrepiece
   One payment in, three shares out. Stripe Connect's signature,
   and it is exactly what this product does.

   NO AMOUNTS, DELIBERATELY. The reference drew €500 fanning into
   €350 / €105 / €45, which publishes a commission rate on a page
   anyone can read while every metered figure on /pricing renders
   as "In Pulse". The argument does not need the arithmetic: one
   movement of money, three invoices, and the platform's share
   arriving last rather than standing between the parties.
   --------------------------------------------------------------- */
.hk-split .hk-in rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .26)}
.hk-split .hk-path{stroke-width:2.5;fill:none}
/* --teal-mid is a depth colour and all but disappears against --ink-deep, so
   the two neutral lanes are slate and paper instead. Yellow is on the third —
   the platform's own share — because that is the beat the whole diagram is
   built around: it arrives LAST, and stating it plainly is the argument. */
.hk-split .hk-path-a{stroke:var(--slate)}
.hk-split .hk-path-b{stroke:rgb(var(--paper-rgb) / .55)}
.hk-split .hk-path-c{stroke:var(--yellow)}
.hk-split .hk-out rect{fill:rgb(var(--paper-rgb) / .05)}
.hk-split .hk-out-a rect{stroke:var(--slate)}
.hk-split .hk-out-b rect{stroke:rgb(var(--paper-rgb) / .55)}
.hk-split .hk-out-c rect{stroke:rgb(250 255 36 / .55);fill:rgb(250 255 36 / .07)}
.hk-split .hk-out-c .hk-who{fill:var(--yellow)}
.hk-split .hk-who{fill:var(--paper);font-size:15px;font-weight:500}
.hk-split .hk-why{fill:var(--slate);font-size:12px}
.hk-split .hk-cap{fill:rgb(var(--paper-rgb) / .55);font-size:12.5px}
.hk-split .hk-lede{fill:rgb(var(--paper-rgb) / .55);font-size:11px}
.hk-split .hk-amt{fill:var(--paper);font-size:21px;font-weight:600;letter-spacing:-.02em}

/* EVERY STAGE RULE IS SCOPED TO ITS OWN CENTREPIECE.
   .hk-s5 .hk-foot was not, and the invoices stage runs to eight beats — so its
   closing caption was being revealed at beat five by this block and .hk-s7
   .hk-foot below was dead. Shared beat classes on a shared stage need the
   drawing's own class in the selector, or the next set piece collides too. */
.hk-s0 .hk-split .hk-in{opacity:1;transform:none}
.hk-s1 .hk-split .hk-path-a,.hk-s1 .hk-split .hk-path-b,.hk-s1 .hk-split .hk-path-c{stroke-dashoffset:0}
.hk-s2 .hk-split .hk-out-a{opacity:1;transform:none}
.hk-s3 .hk-split .hk-out-b{opacity:1;transform:none}
.hk-s4 .hk-split .hk-out-c{opacity:1;transform:none}
.hk-s5 .hk-split .hk-foot{opacity:1;transform:none}

/* ---------------------------------------------------------------
   7 · DOCUMENT BUILDER — the Invoices centrepiece
   An invoice assembling itself in SOMEONE ELSE'S name, then
   converting to structured XML and coming back stamped. Most
   invoicing animations stop when the document looks finished;
   this one continues past that, because in a clearance market the
   document is not valid until the index number exists.

   The line items are abstracted bars, never plausible clinical
   detail, and the index resolves to a visibly illustrative token
   rather than a realistic authority number.
   --------------------------------------------------------------- */
.hk-doc .hk-sheet rect{fill:rgb(var(--paper-rgb) / .96)}
.hk-doc .hk-mark{fill:var(--yellow)}
.hk-doc .hk-meta{fill:var(--muted);font-size:10.5px}
.hk-doc .hk-item rect{fill:rgb(var(--ink-rgb) / .10)}
.hk-doc .hk-item .hk-fig{fill:rgb(var(--ink-rgb) / .18)}
.hk-doc .hk-rule{stroke:rgb(var(--ink-rgb) / .16)}
.hk-doc .hk-tot rect{fill:var(--ink)}
.hk-doc .hk-xml rect{fill:var(--ink)}
.hk-doc .hk-xml text{font-family:var(--mono);font-size:11.5px}
.hk-doc .hk-tag{fill:var(--slate)}
/* --teal-mid on --ink is too close to read as a second token, and the palette's
   editor exception is not a licence to reach for it here. Values are paper at
   reduced alpha: still two legible registers, still one hue. */
.hk-doc .hk-val{fill:rgb(var(--paper-rgb) / .82)}
.hk-doc .hk-std{fill:var(--slate);font-size:10px;letter-spacing:.12em}
.hk-doc .hk-arrow{stroke:var(--slate);stroke-width:2;fill:none}
.hk-doc .hk-stamp rect{fill:rgb(250 255 36 / .07);stroke:rgb(250 255 36 / .55);stroke-width:1.6}
.hk-doc .hk-stamp .hk-lbl{fill:var(--yellow);font-size:10.5px;letter-spacing:.14em}
.hk-doc .hk-stamp .hk-idx{fill:var(--paper);font-size:15px;font-weight:600}
/* THE INDEX IS MASKED, AND THAT IS THE POINT.
   The reference stamped a realistic ten-digit authority number onto the
   document. The spec's own restraint rule forbids plausible clinical detail,
   and a fabricated tax-authority index is the same class of thing — it reads
   as a real record. Drawn blocks say "a number came back and we keep it"
   without inventing one, and they cannot be mistaken for data. */
.hk-doc .hk-idx-blk rect{fill:rgb(250 255 36 / .65)}
.hk-doc .hk-idx-blk rect:nth-of-type(1){animation-delay:0s}
.hk-doc .hk-cap{fill:rgb(var(--paper-rgb) / .55);font-size:12.5px}

.hk-s0 .hk-doc .hk-sheet{opacity:1;transform:none}
.hk-s1 .hk-doc .hk-head{opacity:1;transform:none}
.hk-s2 .hk-doc .hk-items{opacity:1;transform:none}
.hk-s3 .hk-doc .hk-tot{opacity:1;transform:none}
.hk-s4 .hk-doc .hk-arrow-g{opacity:1;transform:none}
.hk-s4 .hk-doc .hk-arrow{stroke-dashoffset:0}
.hk-s5 .hk-doc .hk-xml{opacity:1;transform:none}
.hk-s6 .hk-doc .hk-stamp{opacity:1;transform:none}
.hk-s7 .hk-doc .hk-foot{opacity:1;transform:none}

/* ---------------------------------------------------------------
   REDUCED MOTION
   Not "switch it off" — land on the finished picture. Every set
   piece's final frame IS the argument, so removing the travel
   while keeping the destination loses nothing that matters. The
   negative delay is the same trick global.css uses: a 1ms
   duration alone is too short to get a frame, so a transition
   that has not started yet never resolves.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hk-lift,.hk-pin-v,.hk-pin-step,.hk-stage .hk-p,.hk-stage .hk-draw,
  .js .hk-chain.in .hk-line,.js .hk-chain.in .hk-node{
    transition-duration:1ms !important;transition-delay:-1ms !important;
  }
  .hk-chain .hk-line{stroke-dashoffset:0 !important}
  .hk-chain .hk-node{opacity:1 !important;transform:none !important}
  .hk-lift:hover{transform:none}
}


/* ---------------------------------------------------------------
   8 · STATUS TIMELINE
   States lighting in sequence — the one shape that four modules
   share (issued → structured → sealed → archived here; custody
   and results reuse it with their own words). Light-ground,
   driven by the .rv observer: when .in lands, the rail draws and
   the states light left to right.
   --------------------------------------------------------------- */
.hk-tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.hk-tl-line{position:absolute;top:7px;left:calc(12.5% );right:calc(12.5%);height:2px;
  background:var(--border);overflow:hidden}
.hk-tl-line::after{content:"";position:absolute;inset:0;background:var(--teal-mid);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease-move) .15s}
.js .hk-tl.in .hk-tl-line::after{transform:none}
.hk-tl-s{position:relative;text-align:center}
.hk-tl-s i{display:block;width:16px;height:16px;margin:0 auto;border-radius:50%;
  background:var(--paper);border:2px solid var(--border);
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.js .hk-tl.in .hk-tl-s i{border-color:var(--teal-mid)}
.js .hk-tl.in .hk-tl-s:last-child i{background:var(--ink);border-color:var(--ink)}
.js .hk-tl.in .hk-tl-s:nth-child(2) i{transition-delay:.2s}
.js .hk-tl.in .hk-tl-s:nth-child(3) i{transition-delay:.5s}
.js .hk-tl.in .hk-tl-s:nth-child(4) i{transition-delay:.8s}
.js .hk-tl.in .hk-tl-s:nth-child(5) i{transition-delay:1.1s}
.hk-tl-s b{display:block;margin-top:12px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.hk-tl-s small{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:640px){.hk-tl{grid-template-columns:repeat(2,1fr);gap:22px 12px}.hk-tl-line{display:none}}

/* ---------------------------------------------------------------
   9 · VERIFICATION CHECKLIST
   Items ticking in sequence. The tick draws; the row does not
   move — a checklist that slides around reads as unfinished.
   --------------------------------------------------------------- */
.hk-check{list-style:none;margin:36px 0 0;padding:0;max-width:560px}
.hk-check li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--border)}
.hk-check li:last-child{border-bottom:0}
.hk-check .hk-ck{flex:0 0 22px;width:22px;height:22px}
.hk-check .hk-ck circle{fill:none;stroke:var(--border);stroke-width:2}
.hk-check .hk-ck path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;
  transition:stroke-dashoffset .45s var(--ease-move)}
.js .hk-check.in .hk-ck path{stroke-dashoffset:0}
.js .hk-check.in li:nth-child(2) .hk-ck path{transition-delay:.25s}
.js .hk-check.in li:nth-child(3) .hk-ck path{transition-delay:.5s}
.js .hk-check.in li:nth-child(4) .hk-ck path{transition-delay:.75s}
.hk-check b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.hk-check span{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}

/* ---------------------------------------------------------------
   10 · PAIRING VISUAL
   Two objects sliding together and locking — the device and the
   panel it is validated for. The wrong pairing is not drawn;
   the point is the fit, not the failure.
   --------------------------------------------------------------- */
.hk-pair{display:flex;align-items:center;justify-content:center;gap:0;margin-top:40px}
.hk-pair-a,.hk-pair-b{
  border:1.5px solid var(--ink);border-radius:14px;padding:18px 26px;background:var(--white);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  transition:transform .8s var(--ease-move)}
.hk-pair-a{border-right:0;border-radius:14px 0 0 14px;transform:translateX(-26px)}
.hk-pair-b{border-left:0;border-radius:0 14px 14px 0;transform:translateX(26px)}
.hk-pair-a small,.hk-pair-b small{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:3px}
.hk-pair-lock{
  position:relative;z-index:1;width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:var(--ink);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:opacity .3s var(--ease) .55s,transform .3s var(--ease) .55s}
.hk-pair-lock svg{width:14px;height:14px;stroke:var(--yellow);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.js .hk-pair.in .hk-pair-a,.js .hk-pair.in .hk-pair-b{transform:none}
.js .hk-pair.in .hk-pair-lock{opacity:1;transform:none}

/* ---------------------------------------------------------------
   11 · COVERAGE MAP
   Deliberately muted: a dotted region, not an atlas. It draws no
   borders and names no market, because per-country claims are
   exactly what sits under counsel — the caption beside it makes
   the one claim that is already published. No motion: a map that
   assembles itself implies a rollout narrative nobody has stated.
   --------------------------------------------------------------- */
.hk-map-row{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:clamp(28px,4vw,64px);align-items:center;margin-top:40px}
@media(max-width:760px){.hk-map-row{grid-template-columns:1fr}}
.hk-map{display:block;width:100%;height:auto}
.hk-map circle{fill:var(--teal-mid);opacity:.34}
.hk-map .hk-map-home circle{opacity:.9}

/* ---------------------------------------------------------------
   12 · DEVICE FRAME
   A phone bezel holding an abstract screen — Flow's portrait.
   The content is shapes, not a mock UI: a mock invites reading,
   and there is nothing real to read.
   --------------------------------------------------------------- */
.hk-phone{display:block;width:min(62vw,248px);height:auto;margin-inline:auto}
.hk-phone .hk-ph-body{fill:var(--ink);stroke:rgb(var(--ink-rgb) / .25);stroke-width:1}
.hk-phone .hk-ph-scr{fill:var(--teal)}
.hk-phone .hk-ph-row{fill:rgb(var(--paper-rgb) / .16)}
.hk-phone .hk-ph-acc{fill:var(--yellow)}
.hk-phone .hk-ph-txt{fill:rgb(var(--paper-rgb) / .55);font-family:var(--mono);
  font-size:9px;letter-spacing:.14em}


/* ---------------------------------------------------------------
   13 · IDENTITY VERIFICATION — the /platform/identity centrepiece
   The spec's brief, verbatim: the tick settles, then REPLICATES
   outward to three counterparties — that second beat is the
   product: verified once, relied on by many. Abstract person
   only; a photograph of someone taking a selfie would undercut
   the seriousness of the page.
   --------------------------------------------------------------- */
.hk-idv .hk-card rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .26)}
.hk-idv .hk-person{fill:none;stroke:var(--paper);stroke-width:1.8;stroke-opacity:.85}
.hk-idv .hk-ring{fill:none;stroke:var(--acc, #FAFF24);stroke:var(--yellow);stroke-width:2.6;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .7s var(--ease-move)}
/* DASHARRAY MUST CLEAR THE PATH. At 30 on a 52-unit tick (and 16 on a 34-unit
   one) the pattern REPEATED — the mark rendered as a stub with a stray dash
   floating beside it. Every draw-on now carries its measured length inline. */
.hk-idv .hk-tick{fill:none;stroke:var(--yellow);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .45s var(--ease-move)}
.hk-idv .hk-badge-bg{fill:var(--teal);stroke:var(--yellow);stroke-width:2}
.hk-idv .hk-badge{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;
  transition:opacity .3s var(--ease),transform .4s var(--ease-move)}
.hk-s1 .hk-idv .hk-badge{opacity:1;transform:none;transition-delay:.5s}
.hk-idv .hk-rail{stroke:rgb(var(--paper-rgb) / .4);stroke-width:1.6;fill:none;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .7s var(--ease-move)}
.hk-idv .hk-cp rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .26)}
.hk-idv .hk-cp text{fill:rgb(var(--paper-rgb) / .8);font-size:13px;font-weight:500}
.hk-idv .hk-cp .hk-mini{fill:none;stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .4s var(--ease-move)}
.hk-idv .hk-lbl{fill:rgb(var(--paper-rgb) / .55);font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.hk-idv .hk-cap{fill:rgb(var(--paper-rgb) / .55);font-size:12.5px}

.hk-s0 .hk-idv .hk-card{opacity:1;transform:none}
.hk-s1 .hk-idv .hk-ring{stroke-dashoffset:0}
.hk-s1 .hk-idv .hk-tick{stroke-dashoffset:0;transition-delay:.35s}
.hk-s2 .hk-idv .hk-rail{stroke-dashoffset:0}
.hk-s3 .hk-idv .hk-cp{opacity:1;transform:none}
.hk-s3 .hk-idv .hk-cp .hk-mini{stroke-dashoffset:0;transition-delay:.3s}
.hk-s3 .hk-idv .hk-cp-2{transition-delay:.15s}
.hk-s3 .hk-idv .hk-cp-2 .hk-mini{transition-delay:.45s}
.hk-s3 .hk-idv .hk-cp-3{transition-delay:.3s}
.hk-s3 .hk-idv .hk-cp-3 .hk-mini{transition-delay:.6s}
.hk-s4 .hk-idv .hk-foot{opacity:1;transform:none}

/* ============================================================
   HELD, THEN SETTLED — platform-payments. Collected at agreement,
   safeguarded with the licensed institution, released along the
   split when the result is delivered; refunded whole when not.
   Stages: s0 chip · s1 into the vault · s2 delivered · s3 routed
   · s4 the foot. Same lane law as hk-split: the platform's own
   share is the yellow one, drawn last.
   ============================================================ */
.hk-hold .hk-in rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .26)}
.hk-hold .hk-lede{fill:rgb(var(--paper-rgb) / .62)}
.hk-hold .hk-amt{fill:var(--paper);font-size:17px;font-weight:500}
.hk-hold .hk-path{stroke-width:2.5;fill:none}
.hk-hold .hk-path-in{stroke:rgb(var(--paper-rgb) / .55)}
.hk-hold .hk-path-a{stroke:var(--slate)}
.hk-hold .hk-path-b{stroke:rgb(var(--paper-rgb) / .55)}
.hk-hold .hk-path-c{stroke:var(--yellow)}
.hk-hold .hk-vault rect{fill:rgb(var(--paper-rgb) / .07);stroke:rgb(var(--paper-rgb) / .34)}
.hk-hold .hk-shield{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linejoin:round}
.hk-hold .hk-shield-dot{fill:var(--yellow)}
.hk-hold .hk-done rect{fill:rgb(250 255 36 / .07);stroke:rgb(250 255 36 / .55)}
.hk-hold .hk-donetxt{fill:var(--yellow);font-size:11px;letter-spacing:.14em}
.hk-hold .hk-donetick{stroke:var(--yellow);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hk-hold .hk-out rect{fill:rgb(var(--paper-rgb) / .05)}
.hk-hold .hk-out-a rect{stroke:var(--slate)}
.hk-hold .hk-out-b rect{stroke:rgb(var(--paper-rgb) / .55)}
.hk-hold .hk-out-c rect{stroke:rgb(250 255 36 / .55);fill:rgb(250 255 36 / .07)}
.hk-hold .hk-out-c .hk-who{fill:var(--yellow)}
.hk-hold .hk-who{fill:var(--paper);font-size:14px;font-weight:500}
.hk-hold .hk-why{fill:rgb(var(--paper-rgb) / .62);font-size:12.5px}
.hk-hold .hk-cap{fill:rgb(var(--paper-rgb) / .62);font-size:13px}
.hk-s0 .hk-hold .hk-in{opacity:1;transform:none}
.hk-s1 .hk-hold .hk-path-in{stroke-dashoffset:0}
.hk-s1 .hk-hold .hk-vault{opacity:1;transform:none;transition-delay:.15s}
.hk-s2 .hk-hold .hk-done{opacity:1;transform:none}
.hk-s2 .hk-hold .hk-donetick{stroke-dashoffset:0;transition-delay:.3s}
.hk-s3 .hk-hold .hk-path-a,.hk-s3 .hk-hold .hk-path-b,.hk-s3 .hk-hold .hk-path-c{stroke-dashoffset:0}
.hk-s3 .hk-hold .hk-out-a{opacity:1;transform:none}
.hk-s3 .hk-hold .hk-out-b{opacity:1;transform:none;transition-delay:.15s}
.hk-s3 .hk-hold .hk-out-c{opacity:1;transform:none;transition-delay:.3s}
.hk-s4 .hk-hold .hk-foot{opacity:1;transform:none}

/* ============================================================
   THE DOSSIER & THE LADDER — platform-identity. Business (KYB)
   enrolment in Pulse: three chip-beats assemble the dossier —
   who signs, what exists, who benefits — then the status walks
   Submitted → In review → Verified → Transacting, and only the
   last node takes the accent. Nodes rest dim from the start:
   the road ahead is visible before it is walked.
   Stages: s0 dossier · s1–s3 chips · s4 ladder + first node ·
   s5 review/verified · s6 transacting + foot.
   ============================================================ */
.hk-kyb .hk-dossier rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .26)}
.hk-kyb .hk-lede{fill:rgb(var(--paper-rgb) / .62)}
.hk-kyb .hk-amt{fill:var(--paper);font-size:17px;font-weight:500}
.hk-kyb .hk-doc1 rect,.hk-kyb .hk-doc2 rect,.hk-kyb .hk-doc3 rect{fill:rgb(var(--paper-rgb) / .07);stroke:rgb(var(--paper-rgb) / .34)}
.hk-kyb .hk-doclbl{fill:var(--paper);font-size:13.5px;font-weight:500}
.hk-kyb .hk-doctick{stroke:var(--yellow);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hk-kyb .hk-lad{stroke:rgb(var(--paper-rgb) / .38);stroke-width:2.5;fill:none}
.hk-kyb .hk-node circle{fill:rgb(var(--paper-rgb) / .14);stroke:rgb(var(--paper-rgb) / .45);stroke-width:2;transition:fill .35s var(--ease),stroke .35s var(--ease)}
.hk-kyb .hk-nlbl{fill:rgb(var(--paper-rgb) / .55);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:fill .35s var(--ease)}
.hk-kyb .hk-cap{fill:rgb(var(--paper-rgb) / .62);font-size:13px}
.hk-s0 .hk-kyb .hk-dossier{opacity:1;transform:none}
.hk-s1 .hk-kyb .hk-doc1{opacity:1;transform:none}
.hk-s1 .hk-kyb .hk-doc1 .hk-doctick{stroke-dashoffset:0;transition-delay:.28s}
.hk-s2 .hk-kyb .hk-doc2{opacity:1;transform:none}
.hk-s2 .hk-kyb .hk-doc2 .hk-doctick{stroke-dashoffset:0;transition-delay:.28s}
.hk-s3 .hk-kyb .hk-doc3{opacity:1;transform:none}
.hk-s3 .hk-kyb .hk-doc3 .hk-doctick{stroke-dashoffset:0;transition-delay:.28s}
.hk-s4 .hk-kyb .hk-lad{stroke-dashoffset:0}
.hk-s4 .hk-kyb .hk-n1 circle{fill:var(--paper);stroke:var(--paper)}
.hk-s4 .hk-kyb .hk-n1 .hk-nlbl{fill:var(--paper)}
.hk-s5 .hk-kyb .hk-n2 circle{fill:var(--paper);stroke:var(--paper)}
.hk-s5 .hk-kyb .hk-n2 .hk-nlbl{fill:var(--paper)}
.hk-s5 .hk-kyb .hk-n3 circle{fill:var(--paper);stroke:var(--paper);transition-delay:.2s}
.hk-s5 .hk-kyb .hk-n3 .hk-nlbl{fill:var(--paper);transition-delay:.2s}
.hk-s6 .hk-kyb .hk-n4 circle{fill:var(--yellow);stroke:var(--yellow)}
.hk-s6 .hk-kyb .hk-n4 .hk-nlbl{fill:var(--yellow)}
.hk-s6 .hk-kyb .hk-foot{opacity:1;transform:none}

/* ============================================================
   IN THE LEDGER — platform-invoices. The sealed invoice stands in
   the Pulse ledger before any money moves; settlement REFERENCES
   the record, never replaces it. Stages: s0 invoice · s1 into the
   ledger, row lit · s2 reference drawn · s3 settlement + tick ·
   s4 the foot.
   ============================================================ */
.hk-ledg .hk-inv rect,.hk-ledg .hk-set rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .26)}
.hk-ledg .hk-lede{fill:rgb(var(--paper-rgb) / .62)}
.hk-ledg .hk-amt{fill:var(--paper);font-size:17px;font-weight:500}
.hk-ledg .hk-path{stroke:rgb(var(--paper-rgb) / .55);stroke-width:2.5;fill:none}
.hk-ledg .hk-ledger rect:first-of-type{fill:rgb(var(--paper-rgb) / .07)}
.hk-ledg .hk-ledger > rect{stroke:rgb(var(--paper-rgb) / .34)}
.hk-ledg .hk-lrow{fill:rgb(var(--paper-rgb) / .14);stroke:none;transition:fill .35s var(--ease)}
.hk-s1 .hk-ledg .hk-lrow-lit{fill:rgb(250 255 36 / .55)}
.hk-ledg .hk-refs{fill:rgb(var(--paper-rgb) / .62);font-size:12px}
.hk-ledg .hk-why{fill:rgb(var(--paper-rgb) / .62);font-size:12.5px}
.hk-ledg .hk-settick{stroke:var(--yellow);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hk-ledg .hk-cap{fill:rgb(var(--paper-rgb) / .62);font-size:13px}
.hk-s0 .hk-ledg .hk-inv{opacity:1;transform:none}
.hk-s1 .hk-ledg .hk-lpath-in{stroke-dashoffset:0}
.hk-s1 .hk-ledg .hk-ledger{opacity:1;transform:none;transition-delay:.15s}
.hk-s2 .hk-ledg .hk-lpath-out{stroke-dashoffset:0}
.hk-s3 .hk-ledg .hk-set{opacity:1;transform:none}
.hk-s3 .hk-ledg .hk-settick{stroke-dashoffset:0;transition-delay:.3s}
.hk-s4 .hk-ledg .hk-foot{opacity:1;transform:none}

/* ============================================================
   THE MOTION LAYER — Stripe-grade life on the flow drawings.
   Travelling dots ride the exact lane paths; safeguard and final
   states breathe. Dots rest invisible OUTSIDE the media query, so
   reduced-motion never sees them; every animation lives INSIDE
   no-preference, so the stage finals stay complete without them.
   ============================================================ */
.hk-split .hk-dot-a,.hk-split .hk-dot-b,.hk-split .hk-dot-c,
.hk-hold .hk-coin,.hk-hold .hk-coin-a,.hk-hold .hk-coin-b,.hk-hold .hk-coin-c,
.hk-ledg .hk-ldot,.hk-kyb .hk-walk{opacity:0}
.hk-kyb .hk-npulse,.hk-hold .hk-vpulse{opacity:0}

@media (prefers-reduced-motion: no-preference){
  @keyframes hk-travel{0%{offset-distance:0%;opacity:0}12%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
  @keyframes hk-ring{0%{opacity:.5;transform:scale(.6)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}

  .hk-split .hk-dot-a{fill:var(--slate)}
  .hk-split .hk-dot-b{fill:var(--paper)}
  .hk-split .hk-dot-c{fill:var(--yellow)}
  .hk-s1 .hk-split .hk-dot-a{animation:hk-travel 1.05s var(--ease-move) .05s forwards}
  .hk-s1 .hk-split .hk-dot-b{animation:hk-travel 1.05s var(--ease-move) .22s forwards}
  .hk-s1 .hk-split .hk-dot-c{animation:hk-travel 1.05s var(--ease-move) .4s forwards}

  .hk-hold .hk-coin{fill:var(--paper)}
  .hk-s1 .hk-hold .hk-coin{animation:hk-travel .85s var(--ease-move) forwards}
  .hk-hold .hk-vpulse{fill:none;stroke:rgb(250 255 36 / .5);stroke-width:2;transform-box:fill-box;transform-origin:center}
  .hk-s1 .hk-hold .hk-vpulse{animation:hk-ring 2.4s ease-out .5s infinite}
  .hk-s3 .hk-hold .hk-vpulse{animation:none}
  .hk-hold .hk-coin-a{fill:var(--slate)}
  .hk-hold .hk-coin-b{fill:var(--paper)}
  .hk-hold .hk-coin-c{fill:var(--yellow)}
  .hk-s3 .hk-hold .hk-coin-a{animation:hk-travel .95s var(--ease-move) forwards}
  .hk-s3 .hk-hold .hk-coin-b{animation:hk-travel .95s var(--ease-move) .15s forwards}
  .hk-s3 .hk-hold .hk-coin-c{animation:hk-travel .95s var(--ease-move) .3s forwards}

  .hk-ledg .hk-ldot{fill:var(--yellow)}
  .hk-s2 .hk-ledg .hk-ldot{animation:hk-travel .9s var(--ease-move) .1s forwards}

  /* the walker strides the ladder node to node; the arc percentages are the
     node positions measured along the path (curve ≈152 units, then straight) */
  .hk-kyb .hk-walk{fill:var(--yellow);offset-distance:0%;transition:offset-distance 1s var(--ease-move),opacity .3s var(--ease)}
  .hk-s4 .hk-kyb .hk-walk{opacity:1;offset-distance:31%}
  .hk-s5 .hk-kyb .hk-walk{offset-distance:77%}
  .hk-s6 .hk-kyb .hk-walk{offset-distance:100%}
  .hk-kyb .hk-npulse{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:center}
  .hk-kyb .hk-npulse{stroke:rgb(var(--paper-rgb) / .5)}
  .hk-kyb .hk-npulse-acc{stroke:rgb(250 255 36 / .6)}
  .hk-s4 .hk-kyb .hk-n1 .hk-npulse{animation:hk-ring 1.6s ease-out 1}
  .hk-s6 .hk-kyb .hk-n4 .hk-npulse{animation:hk-ring 2.4s ease-out .6s infinite}

  /* the dossier chips arc in from the folder's spine rather than rising */
  .hk-kyb .hk-doc1,.hk-kyb .hk-doc2,.hk-kyb .hk-doc3{transform:translateX(-26px)}
}

/* ============================================================
   THE PULSE FRAME — hk-app: a drawn schematic of the operator's
   own screen, shared by the Identity and Payments pages. Sidebar,
   crumb, org chip; every figure is MASKED (hk-blk) by the same
   law that masks the clearance index: real-looking numbers are
   fabricated records. Screens: .hk-appi (enrolment completes,
   status flips, transacting enables) and .hk-appp (balance,
   settlement rows, a payout flipping paid-out on bank confirm —
   statuses named from the integration's own vocabulary).
   ============================================================ */
.hk-app .hk-win{fill:rgb(var(--paper-rgb) / .04);stroke:rgb(var(--paper-rgb) / .22)}
.hk-app .hk-siderule{stroke:rgb(var(--paper-rgb) / .14);stroke-width:1}
.hk-app .hk-brand{fill:rgb(var(--paper-rgb) / .55);font-size:11px;letter-spacing:.22em}
.hk-app .hk-navpill{fill:rgb(var(--paper-rgb) / .12)}
.hk-app .hk-navi{fill:rgb(var(--paper-rgb) / .45);font-size:13px}
.hk-app .hk-navi-on{fill:var(--paper);font-weight:500}
.hk-app .hk-crumb{fill:rgb(var(--paper-rgb) / .5);font-size:10.5px;letter-spacing:.14em}
.hk-app .hk-orgchip rect:first-of-type{fill:rgb(var(--paper-rgb) / .06);stroke:rgb(var(--paper-rgb) / .3)}
.hk-app .hk-blk{fill:rgb(var(--paper-rgb) / .28)}
.hk-app .hk-rowbg{fill:rgb(var(--paper-rgb) / .06);stroke:rgb(var(--paper-rgb) / .18)}
.hk-app .hk-rlbl{fill:var(--paper);font-size:13.5px}
.hk-app .hk-blbl{fill:rgb(var(--paper-rgb) / .5);font-size:10px;letter-spacing:.16em}
.hk-app .hk-chip rect{fill:rgb(var(--paper-rgb) / .08);stroke:rgb(var(--paper-rgb) / .35)}
.hk-app .hk-chip text{fill:rgb(var(--paper-rgb) / .78);font-family:var(--mono);font-size:10px;letter-spacing:.12em}
.hk-app .hk-cap{fill:rgb(var(--paper-rgb) / .62);font-size:13px}
.hk-app .hk-sweep{opacity:0}
.hk-app .hk-rdot{fill:none;stroke:rgb(var(--paper-rgb) / .4);stroke-width:2}
.hk-app .hk-rtick{stroke:var(--yellow);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* — Identity screen — */
.hk-appi .hk-banner > rect{fill:rgb(var(--paper-rgb) / .07);stroke:rgb(var(--paper-rgb) / .3)}
.hk-appi .hk-chip-ver rect{fill:rgb(250 255 36 / .14);stroke:rgb(250 255 36 / .55)}
.hk-appi .hk-chip-ver text{fill:var(--yellow)}
.hk-appi .hk-chip-rev,.hk-appi .hk-chip-ver{transition:opacity .35s var(--ease)}
.hk-appi .hk-chip-ver{opacity:0}
.hk-appi .hk-enab rect{fill:rgb(250 255 36 / .07);stroke:rgb(250 255 36 / .5)}
.hk-appi .hk-endot{fill:var(--yellow)}
.hk-appi .hk-entxt{fill:var(--yellow);font-size:10px;letter-spacing:.14em}
.hk-appi .hk-enpulse{fill:none;stroke:rgb(250 255 36 / .55);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.hk-s0 .hk-appi .hk-frame{opacity:1;transform:none}
.hk-s1 .hk-appi .hk-banner{opacity:1;transform:none}
.hk-s2 .hk-appi .hk-crow-1{opacity:1;transform:none}
.hk-s2 .hk-appi .hk-crow-1 .hk-rtick{stroke-dashoffset:0;transition-delay:.35s}
.hk-s3 .hk-appi .hk-crow-2{opacity:1;transform:none}
.hk-s3 .hk-appi .hk-crow-2 .hk-rtick{stroke-dashoffset:0;transition-delay:.35s}
.hk-s4 .hk-appi .hk-crow-3{opacity:1;transform:none}
.hk-s4 .hk-appi .hk-crow-3 .hk-rtick{stroke-dashoffset:0;transition-delay:.35s}
.hk-s5 .hk-appi .hk-chip-rev{opacity:0}
.hk-s5 .hk-appi .hk-chip-ver{opacity:1}
.hk-s6 .hk-appi .hk-enab{opacity:1;transform:none}
.hk-s6 .hk-appi .hk-foot{opacity:1;transform:none}

/* — Payments screen — */
.hk-appp .hk-sched{fill:var(--paper);font-size:13px}
.hk-appp .hk-chip-paid rect,.hk-appp .hk-chip-paid2 rect{fill:rgb(250 255 36 / .14);stroke:rgb(250 255 36 / .55)}
.hk-appp .hk-chip-paid text,.hk-appp .hk-chip-paid2 text{fill:var(--yellow)}
.hk-appp .hk-chip-proc,.hk-appp .hk-chip-paid2{transition:opacity .35s var(--ease)}
.hk-appp .hk-chip-paid2{opacity:0}
.hk-appp .hk-bankpath{stroke:none}
.hk-appp .hk-bankdot{opacity:0}
.hk-s0 .hk-appp .hk-frame{opacity:1;transform:none}
.hk-s1 .hk-appp .hk-bal{opacity:1;transform:none}
.hk-s2 .hk-appp .hk-srow-1{opacity:1;transform:none}
.hk-s2 .hk-appp .hk-srow-2{opacity:1;transform:none;transition-delay:.15s}
.hk-s2 .hk-appp .hk-srow-3{opacity:1;transform:none;transition-delay:.3s}
.hk-s3 .hk-appp .hk-chip-proc{opacity:0}
.hk-s3 .hk-appp .hk-chip-paid2{opacity:1}
.hk-s5 .hk-appp .hk-foot{opacity:1;transform:none}

@media (prefers-reduced-motion: no-preference){
  @keyframes hk-sweepx{0%{opacity:0;transform:translateX(0) skewX(-14deg)}12%{opacity:1}100%{opacity:0;transform:translateX(560px) skewX(-14deg)}}
  .hk-app .hk-sweep{fill:rgb(var(--paper-rgb) / .1);transform-box:fill-box}
  .hk-s2 .hk-appi .hk-crow-1 .hk-sweep{animation:hk-sweepx .9s var(--ease-move)}
  .hk-s3 .hk-appi .hk-crow-2 .hk-sweep{animation:hk-sweepx .9s var(--ease-move)}
  .hk-s4 .hk-appi .hk-crow-3 .hk-sweep{animation:hk-sweepx .9s var(--ease-move)}
  .hk-s6 .hk-appi .hk-enpulse{animation:hk-ring 2.4s ease-out .4s infinite}
  .hk-s2 .hk-appp .hk-srow-2 .hk-sweep{animation:hk-sweepx .9s var(--ease-move) .35s}
  .hk-appp .hk-bankdot{fill:var(--yellow)}
  .hk-s4 .hk-appp .hk-bankdot{animation:hk-travel .9s var(--ease-move) forwards}
}

/* ============================================================
   MOBILE VARIANTS — every flow drawing and every Pulse screen has
   a portrait recomposition (.hk-mv) with the SAME internal class
   names, so one set of stage rules drives both. On phones the
   wide drawing hides and the portrait one takes its place — no
   horizontal scrolling through an animation. Motion paths live
   INLINE on each traveller, per variant.
   ============================================================ */
/* SPECIFICITY, NOT WISHES. `.hk-stage svg{display:block}` is class+element and
   outranks a bare `.hk-mv{display:none}` — so the portrait variants rendered on
   DESKTOP too, at full column width, and the doubled stage grew past the
   runner's 0.35 visibility threshold, which is why nothing played. Both
   switches now match that specificity exactly. */
.hk-stage svg.hk-mv{display:none}
@media(max-width:760px){
  .hk-scroll:has(.hk-mv){overflow-x:visible;margin-inline:0;padding-inline:0}
  .hk-stage .hk-scroll:has(.hk-mv) svg:not(.hk-mv){display:none}
  .hk-stage svg.hk-mv{display:block;max-width:440px;margin-inline:auto}
}
/* the walker still needs its rest offset + transition wherever it lives */
.hk-kyb .hk-walk{offset-distance:0%}
/* Engines without offset-path (older WebKit) would paint every traveller at
   the drawing's origin — a stray dot in the corner. They lose the travellers
   and keep the complete finals. */
@supports not (offset-path: path('M0 0 H1')){
  .hk-split .hk-dot-a,.hk-split .hk-dot-b,.hk-split .hk-dot-c,
  .hk-hold .hk-coin,.hk-hold .hk-coin-a,.hk-hold .hk-coin-b,.hk-hold .hk-coin-c,
  .hk-ledg .hk-ldot,.hk-kyb .hk-walk,.hk-appp .hk-bankdot{display:none !important;animation:none !important}
}

/* ============================================================
   THREE MORE SCREENS — Custody's chain (hk-appc), the Invoices
   ledger (hk-appv), and Flow, the person's phone (hk-flowscr).
   Same frame, same masking law, same runner.
   ============================================================ */
.hk-appc .hk-note,.hk-appv .hk-note{fill:rgb(var(--paper-rgb) / .62);font-size:13px}
.hk-s0 .hk-appc .hk-frame{opacity:1;transform:none}
.hk-s1 .hk-appc .hk-erow-1{opacity:1;transform:none}
.hk-s1 .hk-appc .hk-erow-1 .hk-rtick{stroke-dashoffset:0;transition-delay:.3s}
.hk-s2 .hk-appc .hk-erow-2{opacity:1;transform:none}
.hk-s2 .hk-appc .hk-erow-2 .hk-rtick{stroke-dashoffset:0;transition-delay:.3s}
.hk-s3 .hk-appc .hk-erow-3{opacity:1;transform:none}
.hk-s3 .hk-appc .hk-erow-3 .hk-rtick{stroke-dashoffset:0;transition-delay:.3s}
.hk-s4 .hk-appc .hk-erow-4{opacity:1;transform:none}
.hk-s4 .hk-appc .hk-erow-4 .hk-rtick{stroke-dashoffset:0;transition-delay:.3s}
.hk-s5 .hk-appc .hk-enab{opacity:1;transform:none}
.hk-s6 .hk-appc .hk-foot{opacity:1;transform:none}

.hk-appv .hk-chip-sealed rect,.hk-appv .hk-chip-sealed2 rect{fill:rgb(250 255 36 / .14);stroke:rgb(250 255 36 / .55)}
.hk-appv .hk-chip-sealed text,.hk-appv .hk-chip-sealed2 text{fill:var(--yellow)}
.hk-appv .hk-chip-draft rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .25)}
.hk-appv .hk-chip-draft text{fill:rgb(var(--paper-rgb) / .5)}
.hk-appv .hk-chip-issuing,.hk-appv .hk-chip-sealed2{transition:opacity .35s var(--ease)}
.hk-appv .hk-chip-sealed2{opacity:0}
.hk-appv .hk-refnote{fill:rgb(250 255 36 / .8);font-size:9px;letter-spacing:.12em;opacity:0;transition:opacity .35s var(--ease)}
.hk-appv .hk-reftick{transition-delay:.2s}
.hk-s0 .hk-appv .hk-frame{opacity:1;transform:none}
.hk-s1 .hk-appv .hk-vrow-1{opacity:1;transform:none}
.hk-s1 .hk-appv .hk-vrow-2{opacity:1;transform:none;transition-delay:.15s}
.hk-s1 .hk-appv .hk-vrow-3{opacity:1;transform:none;transition-delay:.3s}
.hk-s2 .hk-appv .hk-chip-issuing{opacity:0}
.hk-s2 .hk-appv .hk-chip-sealed2{opacity:1}
.hk-s3 .hk-appv .hk-reftick{stroke-dashoffset:0}
.hk-s3 .hk-appv .hk-refnote{opacity:1}
.hk-s4 .hk-appv .hk-note{opacity:1;transform:none}
.hk-s5 .hk-appv .hk-foot{opacity:1;transform:none}

.hk-stage svg.hk-flowscr{width:min(66vw,264px);margin-inline:auto}
.hk-flowscr .hk-fs-card{fill:rgb(var(--paper-rgb) / .07);stroke:rgb(var(--paper-rgb) / .3)}
.hk-flowscr .hk-blk-f{fill:rgb(var(--paper-rgb) / .32)}
.hk-flowscr .hk-fs-btn{fill:var(--yellow)}
.hk-flowscr .hk-fs-btntxt{fill:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:600}
.hk-flowscr .hk-fs-person{fill:rgb(var(--paper-rgb) / .8)}
.hk-flowscr .hk-fs-ring{fill:none;stroke:var(--yellow);stroke-width:2.6}
.hk-flowscr .hk-fs-tick{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hk-flowscr .hk-fs-chip{fill:rgb(250 255 36 / .1);stroke:rgb(250 255 36 / .5)}
.hk-flowscr .hk-fs-dot{fill:var(--yellow)}
.hk-flowscr .hk-fs-chiptxt{fill:var(--yellow);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em}
.hk-s0 .hk-flowscr .hk-ph-txt{opacity:1;transform:none}
.hk-s1 .hk-flowscr .hk-fs-offer{opacity:1;transform:none}
.hk-s2 .hk-flowscr .hk-fs-pay{opacity:1;transform:none}
.hk-s3 .hk-flowscr .hk-fs-live{opacity:1;transform:none}
.hk-s3 .hk-flowscr .hk-fs-ring{stroke-dashoffset:0}
.hk-s3 .hk-flowscr .hk-fs-tick{stroke-dashoffset:0;transition-delay:.45s}
.hk-s4 .hk-flowscr .hk-fs-consent{opacity:1;transform:none}
.hk-s5 .hk-flowscr .hk-fs-foot{opacity:1;transform:none}

/* ============================================================
   DELIVERED, NOT EMAILED — hk-send, platform-invoices. Sealed →
   converted per counterparty → delivered into the recipient's own
   system → the status returns. The integration's claims, carried
   whitelabeled; network and regime names stay counsel-gated.
   ============================================================ */
.hk-send .hk-in rect,.hk-send .hk-dest rect{fill:rgb(var(--paper-rgb) / .05);stroke:rgb(var(--paper-rgb) / .26)}
.hk-send .hk-conv rect:first-of-type{fill:rgb(var(--paper-rgb) / .07);stroke:rgb(var(--paper-rgb) / .34)}
.hk-send .hk-lede{fill:rgb(var(--paper-rgb) / .62)}
.hk-send .hk-amt{fill:var(--paper);font-size:16px;font-weight:500}
.hk-send .hk-why{fill:rgb(var(--paper-rgb) / .62);font-size:12.5px}
.hk-send .hk-path{stroke:rgb(var(--paper-rgb) / .55);stroke-width:2.5;fill:none}
.hk-send .hk-spath-3{stroke:rgb(250 255 36 / .5)}
.hk-send .hk-fmt{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hk-send .hk-fmt-a{fill:rgb(var(--paper-rgb) / .2)}
.hk-send .hk-fmt-b{fill:rgb(250 255 36 / .14);stroke:rgb(250 255 36 / .55);opacity:0;transform:translate(0,4px)}
.hk-send .hk-stick{stroke:var(--yellow);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hk-send .hk-srtn{fill:rgb(250 255 36 / .8);font-size:10px;letter-spacing:.16em}
.hk-send .hk-cap{fill:rgb(var(--paper-rgb) / .62);font-size:13px}
.hk-send .hk-sdot1,.hk-send .hk-sdot2{fill:var(--paper);opacity:0}
.hk-send .hk-sdot3{fill:var(--yellow);opacity:0}
.hk-s0 .hk-send .hk-in{opacity:1;transform:none}
.hk-s1 .hk-send .hk-spath-1{stroke-dashoffset:0}
.hk-s1 .hk-send .hk-conv{opacity:1;transform:none;transition-delay:.15s}
.hk-s2 .hk-send .hk-fmt-b{opacity:1;transform:none}
.hk-s3 .hk-send .hk-spath-2{stroke-dashoffset:0}
.hk-s3 .hk-send .hk-dest{opacity:1;transform:none;transition-delay:.15s}
.hk-s3 .hk-send .hk-stick{stroke-dashoffset:0;transition-delay:.45s}
.hk-s4 .hk-send .hk-spath-3{stroke-dashoffset:0}
.hk-s4 .hk-send .hk-srtn{opacity:1;transform:none;transition-delay:.4s}
.hk-s5 .hk-send .hk-foot{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  .hk-s1 .hk-send .hk-sdot1{animation:hk-travel .8s var(--ease-move) forwards}
  .hk-s3 .hk-send .hk-sdot2{animation:hk-travel .8s var(--ease-move) forwards}
  .hk-s4 .hk-send .hk-sdot3{animation:hk-travel 1.3s var(--ease-move) .1s forwards}
}
@supports not (offset-path: path('M0 0 H1')){
  .hk-send .hk-sdot1,.hk-send .hk-sdot2,.hk-send .hk-sdot3{display:none !important;animation:none !important}
}

/* ============================================================
   THEIR METHODS, WHEREVER THEY ARE — pmx, platform-payments. The
   country tabs swap the method set with a staggered rise; local
   rails carry the accent monogram. Names are the schemes' own,
   used nominatively; no foreign logos on this site.
   ============================================================ */
.pmx-tabs{display:flex;flex-wrap:wrap;gap:8px}
.pmx-tab{appearance:none;border:1px solid var(--border);background:var(--cream);color:var(--ink);
  padding:8px 16px;border-radius:100px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:background var(--t-quick) var(--ease),border-color var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.pmx-tab:hover{border-color:rgb(var(--ink-rgb) / .3)}
.pmx-tab[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:var(--yellow)}
.pmx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:26px;min-height:220px}
.pmx-card{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--border);
  border-radius:14px;background:var(--paper)}
.pmx-mono{flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:var(--teal);color:var(--paper);font-family:var(--mono);font-size:13px;letter-spacing:.02em;font-weight:600}
.pmx-card.is-local .pmx-mono{background:var(--yellow);color:var(--ink)}
.pmx-name{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pmx-kind{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;font-weight:400}
.pmx-note{margin-top:22px;font-size:12.5px;color:var(--muted);max-width:60ch}
@media (prefers-reduced-motion: no-preference){
  .pmx-card{opacity:0;transform:translateY(8px);animation:pmxRise .45s var(--ease) forwards;animation-delay:calc(var(--i) * 45ms)}
  @keyframes pmxRise{to{opacity:1;transform:none}}
}
@media (max-width:600px){.pmx-grid{grid-template-columns:1fr 1fr}.pmx-card{flex-direction:column;align-items:flex-start;gap:8px}}

/* pmx marks: the schemes' own artwork on a quiet white tile — brand marks are
   the one documented exemption from the palette (as the YourBio mark already
   is). Local rails keep the accent on the tile's ring, never on the mark. */
.pmx-logo{flex:0 0 56px;width:56px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);overflow:hidden}
.pmx-card.is-local .pmx-logo{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.pmx-logo img{max-width:44px;max-height:28px;display:block}

/* ============================================================
   IDENTITY, REFINED — the three drawings earn their detail.
   · the confirmation REPLICATES: a tick-coloured dot rides each
     rail outward, which is the page's whole argument in motion
   · the liveness ring keeps breathing once it has closed
   · the KYB ladder fills behind its walker, like a real tracker
   · the Pulse screen counts its items and meters them
   Every addition is opacity/transform/dash only — no filtered
   layer, no animated geometry on anything composited.
   ============================================================ */
.hk-idv .hk-livepulse{fill:none;stroke:rgb(250 255 36 / .45);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center}
.hk-idv .hk-rep{fill:var(--yellow);opacity:0}
.hk-idv .hk-cp rect{transition:stroke .45s var(--ease),fill .45s var(--ease)}
.hk-s3 .hk-idv .hk-cp rect{stroke:rgb(250 255 36 / .38);fill:rgb(250 255 36 / .05)}
.hk-s3 .hk-idv .hk-cp-2 rect{transition-delay:.15s}
.hk-s3 .hk-idv .hk-cp-3 rect{transition-delay:.3s}
.hk-s4 .hk-idv .hk-cp text{fill:var(--paper)}

.hk-kyb .hk-ladfill{fill:none;stroke:var(--yellow);stroke-width:2;stroke-linecap:round;stroke-opacity:.85;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1s var(--ease-move)}
.hk-s4 .hk-kyb .hk-ladfill{stroke-dashoffset:calc(var(--len) * .69)}
.hk-s5 .hk-kyb .hk-ladfill{stroke-dashoffset:calc(var(--len) * .23)}
.hk-s6 .hk-kyb .hk-ladfill{stroke-dashoffset:0}

.hk-appi .hk-count{fill:rgb(var(--paper-rgb) / .5);font-size:10px;letter-spacing:.14em;opacity:0;
  transition:opacity .3s var(--ease)}
.hk-appi .hk-count-0{opacity:1}
.hk-s2 .hk-appi .hk-count-0,.hk-s3 .hk-appi .hk-count-1,.hk-s4 .hk-appi .hk-count-2{opacity:0}
.hk-s2 .hk-appi .hk-count-1,.hk-s3 .hk-appi .hk-count-2,.hk-s4 .hk-appi .hk-count-3{opacity:1}
.hk-s3 .hk-appi .hk-count-1,.hk-s4 .hk-appi .hk-count-2{opacity:0}
.hk-appi .hk-banner > rect.hk-mtrack{fill:rgb(var(--paper-rgb) / .14);stroke:none}
.hk-appi .hk-banner > rect.hk-mfill{fill:var(--yellow);stroke:none;transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0);transition:transform .6s var(--ease-move)}
.hk-s2 .hk-appi .hk-banner > rect.hk-mfill{transform:scaleX(.333)}
.hk-s3 .hk-appi .hk-banner > rect.hk-mfill{transform:scaleX(.667)}
.hk-s4 .hk-appi .hk-banner > rect.hk-mfill{transform:scaleX(1)}

@media (prefers-reduced-motion: no-preference){
  .hk-s1 .hk-idv .hk-livepulse{animation:hk-ring 2.6s ease-out 1s infinite}
  .hk-s2 .hk-idv .hk-rep-1{animation:hk-travel .85s var(--ease-move) .05s forwards}
  .hk-s2 .hk-idv .hk-rep-2{animation:hk-travel .85s var(--ease-move) .2s forwards}
  .hk-s2 .hk-idv .hk-rep-3{animation:hk-travel .85s var(--ease-move) .35s forwards}
}
@supports not (offset-path: path('M0 0 H1')){
  .hk-idv .hk-rep{display:none !important;animation:none !important}
}