/* /how-it-works: page-local drawing layouts (HS-HIW-01, the five-step map, the step plates).
   Built only from the shared tokens (--nd-*, --line-c, --seal, --ok, --warn, --rule, --label, --plate); every label is HTML. */

/* In numbers: the two small tracks under the figures */
.hiw-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;row-gap:28px;margin-top:40px}
.hiw-trk .track-art{height:40px}
.hiw-trk .track-l{margin-top:8px}

.hiw-emph{font-weight:600}
.st.out{color:var(--warn)!important}

/* shared: the custody wall, drawn as a hatched band */
.hiw-wall,.fm-wall,.tf-wall{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--warn) 60%,transparent) 0 1.2px,transparent 1.2px 7px)}

/* ── HS-HIW-01: the custody boundary in one view ── */
.hiw{display:grid;grid-template-columns:minmax(0,1fr) minmax(104px,.6fr) minmax(0,1.3fr) minmax(104px,.6fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto}
.hiw-zh{grid-column:1 / -1;grid-row:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:14px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.hiw-c1{grid-column:1;grid-row:2;align-self:center}
.hiw-c2{grid-column:2;grid-row:2}
.hiw-c3{grid-column:3;grid-row:2}
.hiw-c4{grid-column:4;grid-row:2}
.hiw-c5{grid-column:5;grid-row:2;align-self:center}
.hiw-chk{display:flex;align-items:center;gap:8px;margin-top:12px!important;padding-top:10px;border-top:1px solid var(--rule)}
.hiw-chk svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:2;fill:none}
.hiw-wl{grid-column:4 / -1;grid-row:3;justify-self:end;align-self:end;padding-top:30px;font:600 14px/1.35 var(--f-sans);letter-spacing:.02em;color:var(--warn);text-align:right}
.hiw-wall{grid-column:1 / -1;grid-row:4;height:16px;margin:10px 0;border-top:1.5px solid var(--warn);border-bottom:1.5px solid var(--warn)}
.hiw-out{grid-column:1 / 3;grid-row:5;align-self:start;font:600 14px/1.35 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.hiw-v{grid-column:3;grid-row:3 / 6;justify-self:center;position:relative;z-index:2;width:0;margin-top:0}
.hiw-v i{position:absolute;top:0;bottom:0;left:-1px;border-left:1.5px dashed var(--seal)}
.hiw-v i::before,.hiw-v i::after{content:"";position:absolute;left:-5.6px;border:5.25px solid transparent}
.hiw-v i::before{top:-1px;border-bottom:8px solid var(--seal);border-top:0}
.hiw-v i::after{bottom:-1px;border-top:8px solid var(--seal);border-bottom:0}
.hiw-vl{grid-column:3;grid-row:5;justify-self:center;align-self:center;position:relative;z-index:3;margin:18px 0;padding:5px 10px;border-radius:6px;border:1px solid var(--seal);background:var(--plate);font:600 14px/1.3 var(--f-sans);color:var(--seal);text-align:center}
.hiw-leg{grid-column:1 / 3;grid-row:6;align-self:end;padding-right:28px}
.hiw-leg ul{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.hiw-leg li{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.4;color:var(--body)}
.sw{flex:none;display:inline-block;width:32px}
.sw-flow{height:0;border-top:1.5px solid var(--line-c)}
.sw-dash{height:0;border-top:1.5px dashed var(--seal)}
.sw-wall{height:10px;border-top:1.5px solid var(--warn);border-bottom:1.5px solid var(--warn);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--warn) 60%,transparent) 0 1.2px,transparent 1.2px 7px)}
.hiw-hs{grid-column:3;grid-row:6}
.hiw-tb{grid-column:4 / -1;grid-row:6;align-self:end;margin:0 0 0 28px}

/* narrow HS-HIW-01: one column, top to bottom */
@container (max-width: 720px){
  .hiw{display:flex;flex-direction:column}
  .hiw>*{align-self:stretch}
  .hiw>.hiw-vl,.hiw>.hiw-v{align-self:center}
  .hiw>.hiw-wl{align-self:flex-start}
  .hiw-zh{margin-bottom:18px}
  .hiw-c1{order:1}.hiw-c2{order:2}.hiw-c3{order:3}.hiw-c4{order:4}.hiw-c5{order:5}
  .hiw-wl{order:6;align-self:flex-start;padding-top:22px;text-align:left}
  .hiw-wall{order:7}
  .hiw-out{order:8}
  .hiw-vl{order:9;align-self:center;margin:14px 0 0}
  .hiw-v{order:10;align-self:center;height:44px;margin:4px 0 10px}
  .hiw-hs{order:11}
  .hiw-leg{order:12;margin-top:26px;padding-right:0}
  .hiw-tb{order:13;margin:18px 0 0}
}

/* the connectors inside page-local grids behave like the shared chain's on a narrow drawing */
@container (max-width: 720px){
  .hiw>.cx{flex-direction:row;justify-content:flex-start;min-height:48px;padding:6px 0 6px 22px;text-align:left}
  .hiw>.cx i{width:1.5px;min-width:0;height:36px;order:-1}
  .hiw>.cx i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .hiw>.cx b{max-width:none}
}

/* ── the five steps against the custody boundary ── */
.fm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px;grid-template-rows:auto auto auto auto auto;text-align:center}
.fm-top{grid-column:1 / -1;grid-row:1;text-align:left;margin-bottom:22px}
.fm-bot{grid-column:1 / -1;grid-row:5;text-align:left;margin-top:22px}
.fm-1{grid-column:1;grid-row:2}
.fm-3{grid-column:3;grid-row:2}
.fm-4{grid-column:4;grid-row:2}
.fm-2{grid-column:2;grid-row:4}
.fm-5{grid-column:5;grid-row:2 / 5;align-self:center;position:relative;z-index:1;padding:14px 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--ok) 55%,transparent);background:var(--plate)}
.fm-wall{grid-column:1 / -1;grid-row:3;height:14px;margin:18px 0;border-top:1.5px solid var(--warn);border-bottom:1.5px solid var(--warn)}
.fm-wl{grid-column:3 / 5;grid-row:4;justify-self:end;align-self:start;text-align:right}
.fm-s{display:flex;flex-direction:column;align-items:center;gap:6px}
.fm-t{font:600 20px/1.3 var(--f-sans);color:var(--head)}
.fm-t a{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.fm-t a:hover{border-bottom-color:currentColor}
.fm-p{font-size:15.5px;line-height:1.4;color:var(--body)}
.fm-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:4px 0;border-radius:50%;border:1.5px solid var(--seal);background:var(--nd-bg);font:600 14px/1 var(--f-sans);color:var(--seal)}
.fm-ok{border-color:var(--ok);color:var(--ok)}
.fm-ok svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
/* narrow: the map turns on its side, your side | the boundary | HiveSilo's side */
@container (max-width: 640px){
  .fm{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);grid-template-rows:auto;column-gap:14px;row-gap:22px}
  .fm-top{grid-column:1;grid-row:1;margin:0}
  .fm-bot{grid-column:3;grid-row:1;margin:0}
  .fm-top,.fm-bot{text-align:center}
  .fm-wall{grid-column:2;grid-row:1 / 7;height:auto;margin:0;border:0;border-left:1.5px solid var(--warn);border-right:1.5px solid var(--warn)}
  .fm-1{grid-column:1;grid-row:2}
  .fm-2{grid-column:3;grid-row:3}
  .fm-3{grid-column:1;grid-row:4}
  .fm-4{grid-column:1;grid-row:5}
  .fm-5{grid-column:1 / -1;grid-row:6}
  .fm-wl{grid-column:1 / -1;grid-row:7;justify-self:center;text-align:center}
  .fm-2 .fm-n{order:0}
}

/* ── step 1 plate: two flows leave your site ── */
.tf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(112px,.62fr) 16px minmax(0,.85fr);grid-template-rows:auto auto auto}
.tf-src{grid-column:1;grid-row:1}
.tf-sig{grid-column:2;grid-row:1}
.tf-wall{grid-column:3;grid-row:1 / 4;border-left:1.5px solid var(--warn);border-right:1.5px solid var(--warn)}
.tf-to{grid-column:4;grid-row:1;align-self:center;margin-left:22px}
.tf-pii{grid-column:1;grid-row:2}
.tf-enc{grid-column:1 / 3;grid-row:3;margin-right:26px}
@container (max-width: 560px){
  .tf{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:16px}
  .tf-src{grid-column:1;grid-row:1}
  .tf-pii{grid-column:1;grid-row:2;padding-left:14px}
  .tf-enc{grid-column:1;grid-row:3;margin:0}
  .tf-sig{grid-column:2;grid-row:1;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 0 0 10px;text-align:left}
  .tf-sig i{width:1.5px;min-width:0;height:44px;order:-1}
  .tf-sig i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .tf-sig b{max-width:none}
  .tf-wall{grid-column:2;grid-row:2;align-self:start;height:14px;margin-top:8px;border:0;border-top:1.5px solid var(--warn);border-bottom:1.5px solid var(--warn)}
  .tf-to{grid-column:2;grid-row:3;align-self:start;margin:0}
}

/* ── step 2 plate: signals in, one sealed result out ── */
.sc-chain>.sc-box{flex:2.3 1 0}
.sc-chain>.sc-out{flex:.9 1 0;align-self:center}
.sc-chain>.sc-in{min-width:120px}
.sc-method{margin-top:14px;padding:12px 14px;border-radius:8px;border:1px dashed var(--nd-bd);display:grid;gap:2px}

/* ── step 3 plate: two arrivals, one sealed VM ── */
.sd-in{display:flex;justify-content:space-between;gap:16px;padding:0 20% 0 6%}
.sd-in .bd-flow{padding:0 0 12px 22px}
.sd-in .bd-flow i{min-height:44px}
.sd-in .sd-r{padding:0 22px 12px 0;text-align:right}
.sd-in .sd-r i{order:2}
.sd-out{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:4px}
.sd-out .nd-s{margin-top:14px}

/* ── step 4 plate: tiers in your CRM, ranked earlier than a form ── */
.ac-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:32px;align-items:center}
.ac-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.ac-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:9px 0}
.ac-bar{display:block;width:var(--w);height:6px;border-radius:3px;background:color-mix(in srgb,var(--line-c) 32%,transparent)}
.ac-tier{padding:5px 12px;border-radius:999px;border:1px solid var(--nd-bd);font:600 14px/1 var(--f-sans);color:var(--head)}
.ac-tier.hot{border-color:var(--seal);color:var(--seal);background:color-mix(in srgb,var(--seal) 10%,transparent)}
.ac-note{font:500 17px/1.5 var(--f-sans);color:var(--head)}
.ac-tl{position:relative;margin-top:32px;padding-top:34px}
.ac-mk{position:absolute;top:0;left:22%;transform:translateX(-50%);white-space:nowrap}
.ac-line{height:24px}
.ac-dot{position:absolute;top:calc(34px + 12px);border-radius:50%;transform:translate(-50%,-50%)}
.ac-dot.early{left:22%;width:18px;height:18px;border:1.6px solid var(--seal);background:color-mix(in srgb,var(--seal) 18%,var(--plate))}
.ac-dot.form{left:50%;width:12px;height:12px;border:1.6px solid var(--line-c);background:var(--plate)}
@container (max-width: 560px){
  .sd-in{padding:0}
  .sd-in .bd-flow{flex:1 1 0}
  .ac-top{grid-template-columns:1fr;row-gap:14px}
  .ac-mk{left:0;transform:none}
  .ac-dot.early{left:9px}
}

/* ── step 5 plate: build and enclave match, receipts, the verify API ── */
.vf-low{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:28px;align-items:end;margin-top:28px}
.vf-bars{display:grid;gap:8px;margin:12px 0}
.vf-bars li{position:relative;height:22px;border-radius:4px;border:1px solid var(--nd-bd);background:var(--nd-bg)}
.vf-bars li::before{content:"";position:absolute;left:14px;top:9px;width:var(--w);height:3px;border-radius:2px;background:color-mix(in srgb,var(--line-c) 35%,transparent)}
.vf-bars li::after{content:"";position:absolute;right:14px;top:5px;width:10px;height:5px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);transform:rotate(-45deg)}
.vf-api{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.vf-ring{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.6px solid var(--ok);color:var(--ok)}
.vf-ring svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
@container (max-width: 560px){
  .vf-low{grid-template-columns:1fr;row-gap:20px}
}

@media (max-width:699px){
  .hiw-tracks{grid-template-columns:1fr}
}
/* a stacked table keeps its caption full width on a phone */
@media (max-width:699px){ .tbl.stack caption{display:block;width:auto} }

/* phone: a horizontal track cannot keep its labels at their ticks, so each timeline turns vertical,
   one tick per label, every label beside its own tick (the drawn line steps aside) */
@media (max-width:699px){
  .hiw-trk .track-art,.ac-tl .ac-line,.ac-tl .ac-dot{display:none}
  .hiw-trk .track-l,.ac-tl .track-l{position:relative;display:grid;grid-template-columns:1fr;gap:16px;margin-top:0;padding-left:30px}
  .hiw-trk .track-l::before,.ac-tl .track-l::before{content:"";position:absolute;left:8px;top:.7em;bottom:.7em;border-left:1.5px solid var(--line-c)}
  .hiw-trk:first-child .track-l::before{border-left-color:var(--ok)}
  .hiw-trk .track-l li,.ac-tl .track-l li{position:relative;text-align:left}
  .hiw-trk .track-l li::before,.ac-tl .track-l li::before{content:"";position:absolute;left:-26px;top:.7em;width:10px;height:10px;border-radius:50%;background:var(--line-c);transform:translateY(-50%)}
  .hiw-trk .track-l li.ok::before{width:12px;height:12px;left:-27px;background:var(--ok)}
  .ac-tl{padding-top:0}
  .ac-mk{position:static;margin-bottom:12px}
  .ac-tl .track-l li:first-child::before{width:16px;height:16px;left:-29px;border:1.6px solid var(--seal);background:color-mix(in srgb,var(--seal) 18%,var(--plate))}
  .ac-tl .track-l li:nth-child(2)::before{border:1.6px solid var(--line-c);background:var(--plate)}
  .ac-tl .track-l li:last-child::before{width:12px;height:1.5px;left:-27px;border-radius:0;background:var(--line-c)}
}

/* ── the custody pipeline, live: the old homepage's scene, every word kept (/assets/pages/how-it-works.js draws it) ──
   A wide plate flows left to right; a narrow one (under 560px of drawing: a phone, a tablet's column) flows top to
   bottom. --pipe-v tells the script which, so the drawing and its box never disagree. Without script there is nothing
   to draw, so there is no plate. */
html:not(.js) .pipe,.pipe.off{display:none}
/* the counters' figures stay invisible until the drawing writes its first tallies (the class "tallied"), so the markup's
   static 0 is never painted. visibility, not display: the strip and its labels keep their layout while a figure is hidden */
.pipe:not(.tallied) .pipe-stats b{visibility:hidden}
.pipe-h{margin-bottom:20px}
.pipe-t{display:flex;align-items:center;gap:12px;font:600 18px/1.3 var(--f-sans);color:var(--head)}
.pipe-t::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.pipe-leg{display:flex;flex-wrap:wrap;gap:8px 22px}
.pipe-leg li{display:flex;align-items:center;gap:9px;font:500 14.5px/1.35 var(--f-sans);color:var(--body);white-space:nowrap}
.pipe-leg i{flex:none;width:9px;height:9px;border-radius:50%}
.pipe-leg .lg-bot i{border:1.5px solid var(--warn)}
.pipe-leg .lg-sig i{background:var(--seal)}
.pipe-leg .lg-id i{background:var(--head)}
.pipe-leg .lg-int i{background:var(--ok)}
.pipe-stats{display:inline-flex;flex-wrap:wrap;gap:4px 20px;padding:8px 14px;border-radius:8px;border:1px solid var(--nd-bd);background:var(--nd-bg);font:500 14px/1.4 var(--f-sans);color:var(--label)}
.pipe-stats b{font-weight:600;color:var(--head);font-variant-numeric:tabular-nums lining-nums}
.pipe-wrap{--pipe-v:0;position:relative;height:clamp(360px,48cqi,440px);margin-top:14px}
.pipe-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pipe-f{display:flex;margin-top:14px}
.pipe-verify{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);font:600 14.5px/1.3 var(--f-sans);color:var(--ok)}
.pipe-verify svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the badge draws itself the first time the machine comes on screen; the dot beside the title breathes while it runs */
@media (prefers-reduced-motion:no-preference){
  .pipe.live .pipe-t::before{animation:pipe-live 2.4s ease-in-out infinite}
  .pipe.seen .pipe-verify .ring{stroke-dasharray:44;stroke-dashoffset:44;animation:pipe-draw 1s var(--ease) 1.1s forwards}
  .pipe.seen .pipe-verify .tick{stroke-dasharray:16;stroke-dashoffset:16;animation:pipe-draw .45s ease 1.9s forwards}
}
@keyframes pipe-live{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 0%,transparent)}}
@keyframes pipe-draw{to{stroke-dashoffset:0}}
.pipe-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:40px}
.pipe-lead{font:500 19px/1.5 var(--f-sans);color:var(--head)}
@media (max-width:699px){ .pipe-h{gap:12px} }
/* narrow: the machine turns to flow down the plate; the counters stack two by two, figure over label */
@container (max-width: 559px){
  .pipe-wrap{--pipe-v:1;height:clamp(680px,210cqi,760px)}
  .pipe-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;width:100%;padding:10px 14px}
  .pipe-stats li{display:flex;flex-direction:column;line-height:1.3}
  .pipe-stats b{font-size:18px}
}