/* bank-reconciler-headlines.css · Bank Reconciler landing: one desk mechanism per section headline (built by
   bank-reconciler-headlines.js from [data-hl] over the shared plumbing in iq-headlines.*). Hidden states are
   gated on html.hl-on, which the script adds only when motion is allowed, so without JS or with reduced
   motion nothing here hides anything. Prefix hlr; one block per mechanism, in page order. */
:root{
  --hlr:#5b6eae;--hlr-d:#3d4d7a;--hlr-dd:#2b375a;--hlr-w:#eef0f8;--hlr-pale:#aab6e0;
  --hlr-ok:#4a9080;--hlr-amb:#b07a2a;--hlr-miss:#c4576a;--hlr-cream:#faf8f5;
  --hlr-paper:0 0 0 1px rgba(138,133,120,.24),0 1px 0 rgba(255,255,255,.9) inset,0 14px 26px -16px rgba(20,30,45,.42);
  --hlr-ruled:repeating-linear-gradient(180deg,transparent 0 13px,rgba(91,110,174,.12) 13px 14px);
}
@property --hlr-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --hlr-sweep{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- 01 · #plate · the month ---------- */
html.hl-on .hl--calendar h2{position:relative;isolation:isolate}
.hlr-cal{position:absolute;z-index:-1;display:block;pointer-events:none}
.hlr-cal__cells{position:absolute;inset:8px 0 0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,1fr);border-radius:0 0 4px 4px;overflow:hidden;
  background:rgba(255,255,255,.9);box-shadow:var(--hlr-paper);transform-origin:50% 100%}
.hlr-cal__cells i{position:relative;border-right:1px solid rgba(91,110,174,.15);border-bottom:1px solid rgba(91,110,174,.15)}
.hlr-cal__cells i:nth-child(7n){border-right:0}
.hlr-cal__cells i:nth-child(n+29){border-bottom:0}
.hlr-cal__cells b{position:absolute;left:4px;top:2px;font:500 9px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:0;font-style:normal;color:rgba(61,77,122,.5)}
.hlr-cal__cells i.is-day::before{content:"";position:absolute;inset:1px;background:rgba(91,110,174,.09);opacity:0}
.hlr-cal__cells i.is-day::after{content:"";position:absolute;left:50%;top:44%;width:4px;height:8px;margin:-5px 0 0 -2px;border:solid var(--hlr-ok);border-width:0 2px 2px 0;rotate:45deg;scale:0}
.hlr-cal__rings{position:absolute;left:0;right:0;top:0;height:8px;z-index:2;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#5b6eae,#3d4d7a);box-shadow:0 -1px 0 rgba(255,255,255,.4) inset}
.hlr-cal__rings i{position:absolute;top:2px;width:4px;height:4px;border-radius:50%;background:#faf8f5;box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
.hlr-cal__rings i:first-child{left:14%}.hlr-cal__rings i:last-child{right:14%}
.hlr-cal__rule{position:absolute;left:8px;right:8px;bottom:-5px;height:5px;border-top:2px solid var(--hlr-d);border-bottom:2px solid var(--hlr-d);box-sizing:border-box;transform:scaleX(0);transform-origin:0 50%}
html.hl-on .hl--calendar .hlr-cal{opacity:0;translate:0 12px;transition:opacity .45s ease .2s,translate .7s var(--hl-spring) .2s}
html.hl-on .hl--calendar .hlr-cal__set{opacity:0;translate:0 .4em;transition:opacity .3s ease calc(var(--j) * 22ms + .1s),translate .7s var(--hl-spring) calc(var(--j) * 22ms + .1s)}
html.hl-on .hl--calendar .hlr-cal__ink{opacity:0;translate:0 .1em;transition:opacity .3s ease calc(var(--d) * 70ms + .7s),translate .45s var(--hl-spring) calc(var(--d) * 70ms + .7s)}
html.hl-on .hl--calendar .eyebrow{opacity:0;translate:0 -8px;rotate:-1.5deg;transform-origin:0 0;transition:opacity .5s ease,translate .7s var(--hl-spring),rotate .7s var(--hl-spring)}
html.hl-on .hl--calendar .dek{position:relative;opacity:0;translate:0 -16px;clip-path:inset(0 0 100% 0);transition:opacity .3s ease 1.55s,translate .8s var(--hl-spring) 1.55s,clip-path .8s var(--hl-soft) 1.55s}
html.hl-on .hl--calendar .dek::before{content:"";position:absolute;left:0;right:0;top:-6px;border-top:2px dashed rgba(91,110,174,.4);transition:opacity .6s ease 2.6s}
html.hl-on .hl--calendar.hl-in .hlr-cal{opacity:1;translate:0 0}
html.hl-on .hl--calendar.hl-in .hlr-cal__cells i.is-day::after{scale:1;transition:scale .32s var(--hl-spring) calc(var(--d) * 70ms + .6s)}
html.hl-on .hl--calendar.hl-in .hlr-cal__cells i.is-day::before{opacity:1;transition:opacity .3s ease calc(var(--d) * 70ms + .6s)}
html.hl-on .hl--calendar.hl-in .hlr-cal__cells{animation:hlrCalFold .75s cubic-bezier(.6,0,.3,1) 2.1s forwards}
@keyframes hlrCalFold{0%{transform:none;opacity:1}65%{transform:scaleY(.08);opacity:.85}100%{transform:scaleY(0);opacity:0}}
html.hl-on .hl--calendar.hl-in .hlr-cal__rings{opacity:0;transition:opacity .35s ease 2.05s}
html.hl-on .hl--calendar.hl-in .hlr-cal__rule{transform:scaleX(1);transition:transform .55s var(--hl-soft) 2.5s,opacity .9s ease}
html.hl-on .hl--calendar.hl-in .hlr-cal__set,html.hl-on .hl--calendar.hl-in .hlr-cal__ink{opacity:1;translate:0 0}
html.hl-on .hl--calendar.hl-in .eyebrow{opacity:1;translate:0 0;rotate:0deg}
html.hl-on .hl--calendar.hl-in .dek{opacity:1;translate:0 0;clip-path:inset(-14px -4px -10% -4px)}
html.hl-on .hl--calendar.hl-done .hlr-cal__cells,html.hl-on .hl--calendar.hl-done .hlr-cal__rings{display:none}
html.hl-on .hl--calendar.hl-done .hlr-cal{background:none;box-shadow:none}
html.hl-on .hl--calendar.hl-done .hlr-cal__rule{opacity:.5}
html.hl-on .hl--calendar.hl-done .dek{clip-path:none}
html.hl-on .hl--calendar.hl-done .dek::before{opacity:0;transition:opacity .6s ease}

/* ---------- 02 · #demo-reel · the film leader ---------- */
html.hl-on .hl--leader h2{position:relative;isolation:isolate}
.hlr-ld{position:absolute;z-index:2;display:block;pointer-events:none;overflow:hidden;border-radius:3px;background:#1d1c1a;box-shadow:0 18px 30px -18px rgba(0,0,0,.6);opacity:0}
.hlr-ld::after{content:"";position:absolute;inset:0;background:#faf8f5;opacity:0}
.hlr-ld__sprk{position:absolute;left:0;right:0;height:5px;background:linear-gradient(90deg,rgba(250,248,245,.82) 0 8px,transparent 8px) 0 0/22px 5px repeat-x}
.hlr-ld__sprk--t{top:4px}.hlr-ld__sprk--b{bottom:4px}
.hlr-ld__dial{position:absolute;left:50%;top:50%;height:72%;aspect-ratio:1;translate:-50% -50%;border-radius:50%}
.hlr-ld__sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(250,248,245,.42) 0 var(--hlr-a),rgba(250,248,245,.07) var(--hlr-a) 360deg)}
.hlr-ld__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(250,248,245,.75)}
.hlr-ld__ring--in{inset:16%;border-width:1px;border-color:rgba(250,248,245,.5)}
.hlr-ld__x,.hlr-ld__y{position:absolute;background:rgba(250,248,245,.45)}
.hlr-ld__x{left:-260%;right:-260%;top:50%;height:1px}
.hlr-ld__y{top:-40%;bottom:-40%;left:50%;width:1px}
.hlr-ld__dial b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 .62em/1 var(--serif,'Fraunces',Georgia,serif);font-style:normal;letter-spacing:0;color:#faf8f5;opacity:0}
.hlr-ld__run{position:relative}
.hlr-ld__edge{position:absolute;left:-26px;top:-4px;bottom:-4px;width:14px;border-radius:2px;background:#1d1c1a linear-gradient(180deg,rgba(250,248,245,.85) 0 7px,transparent 7px) 50% 0/6px 15px repeat-y;opacity:0;pointer-events:none}
html.hl-on .hl--leader .hl-w{opacity:0;filter:blur(5px)}
html.hl-on .hl--leader .eyebrow{opacity:0}
html.hl-on .hl--leader .dek{opacity:0;translate:0 26px;clip-path:inset(100% 0 0 0);transition:opacity .4s ease 1.9s,translate 1s var(--hl-soft) 1.9s,clip-path 1s var(--hl-soft) 1.9s}
html.hl-on .hl--leader.hl-in .hlr-ld{animation:hlrLdLife 1.95s linear .1s forwards}
@keyframes hlrLdLife{0%{opacity:0}8%{opacity:1}76%{opacity:1}80%{opacity:.3}84%{opacity:1}90%{opacity:.45}100%{opacity:0}}
html.hl-on .hl--leader.hl-in .hlr-ld::after{animation:hlrLdFlash .5s linear 1.5s forwards}
@keyframes hlrLdFlash{0%{opacity:0}20%{opacity:.9}45%{opacity:.1}65%{opacity:.6}100%{opacity:0}}
html.hl-on .hl--leader.hl-in .hlr-ld__sprk{animation:hlrLdRun .32s linear .1s 6}
@keyframes hlrLdRun{to{background-position:-22px 0}}
html.hl-on .hl--leader.hl-in .hlr-ld__sweep{animation:hlrLdSweep .42s linear .3s 3}
@keyframes hlrLdSweep{from{--hlr-a:0deg}to{--hlr-a:360deg}}
html.hl-on .hl--leader.hl-in .hlr-ld__dial b{animation:hlrLdNum .42s steps(1,end) forwards}
html.hl-on .hl--leader.hl-in .hlr-ld__dial b:nth-of-type(1){animation-delay:.3s}
html.hl-on .hl--leader.hl-in .hlr-ld__dial b:nth-of-type(2){animation-delay:.72s}
html.hl-on .hl--leader.hl-in .hlr-ld__dial b:nth-of-type(3){animation-delay:1.14s}
@keyframes hlrLdNum{0%{opacity:1}99%{opacity:1}100%{opacity:0}}
html.hl-on .hl--leader.hl-in .hl-w{animation:hlrLdBurn .8s ease calc(1.6s + var(--k) * 70ms) forwards}
@keyframes hlrLdBurn{0%{opacity:0;filter:blur(5px)}30%{opacity:.75;filter:blur(2px)}45%{opacity:.35}70%{opacity:1;filter:blur(.5px)}100%{opacity:1;filter:none}}
html.hl-on .hl--leader.hl-in .eyebrow{animation:hlrLdCard .55s linear .05s forwards}
@keyframes hlrLdCard{0%{opacity:0}30%{opacity:.7}45%{opacity:.2}70%{opacity:1}85%{opacity:.6}100%{opacity:1}}
html.hl-on .hl--leader.hl-in .hlr-ld__edge{animation:hlrLdEdge 1.3s linear 1.85s forwards}
@keyframes hlrLdEdge{0%{opacity:0;background-position:50% 0}15%{opacity:1}80%{opacity:1}100%{opacity:0;background-position:50% -90px}}
html.hl-on .hl--leader.hl-in .dek{opacity:1;translate:0 0;clip-path:inset(-10% -4% -10% -4%)}
html.hl-on .hl--leader.hl-done .hlr-ld{display:none}
html.hl-on .hl--leader.hl-done .dek{clip-path:none}
@media (max-width:640px){.hlr-ld__edge{left:-17px;width:10px}}

/* ---------- 03 · #the-zip · the zip ---------- */
html.hl-on .hl--zip .hl-slice{transition:translate .42s var(--hl-spring) calc(var(--c) * 105ms + .5s),opacity .3s ease .1s}
html.hl-on .hl--zip .hl-slice{opacity:0}
html.hl-on .hl--zip .hl-slice[data-r="0"]{translate:0 calc(-.14em - var(--c) * .028em)}
html.hl-on .hl--zip .hl-slice[data-r="1"]{translate:0 calc(.14em + var(--c) * .028em)}
html.hl-on .hl--zip.hl-in .hl-slice{opacity:1}
html.hl-on .hl--zip.hl-in .hl-slice{translate:0 0}
.hlr-zp__t{position:absolute;top:calc(50% - 3px);height:6px;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,var(--hlr) 0 5px,transparent 5px) 0 0/10px 100% repeat-x;transition:translate .42s var(--hl-spring) calc(var(--c) * 105ms + .5s)}
.hlr-zp__t[data-r="1"]{background-position:5px 0;background-image:linear-gradient(90deg,var(--hlr-d) 0 5px,transparent 5px)}
html.hl-on .hl--zip .hlr-zp__t[data-r="0"]{translate:0 calc(-.14em - var(--c) * .028em - 3px)}
html.hl-on .hl--zip .hlr-zp__t[data-r="1"]{translate:0 calc(.14em + var(--c) * .028em + 3px)}
html.hl-on .hl--zip.hl-in .hlr-zp__t{translate:0 0;animation:hlrZpTeeth 1.25s ease calc(var(--c) * 105ms + .2s) forwards}
@keyframes hlrZpTeeth{0%{opacity:0}22%{opacity:.9}62%{opacity:.9}100%{opacity:0}}
.hlr-zp__pull{position:absolute;left:0;top:50%;width:18px;height:22px;margin:-11px 0 0 -9px;z-index:4;border-radius:5px 5px 8px 8px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,#9aa5cc,#5b6eae 45%,#3d4d7a);box-shadow:0 6px 10px -5px rgba(20,30,45,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.hlr-zp__pull b{position:absolute;left:50%;top:15px;width:12px;height:22px;margin-left:-6px;border-radius:2px 2px 6px 6px;background:linear-gradient(90deg,#8f9ac2,#5b6eae 50%,#3d4d7a);box-shadow:0 5px 8px -5px rgba(20,30,45,.5)}
.hlr-zp__pull b::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:7px;border-radius:3px;background:var(--hlr-cream,#faf8f5)}
html.hl-on .hl--zip.hl-in .hlr-zp__pull{animation:hlrZpPull calc(var(--n) * 105ms + .45s) linear .42s forwards}
@keyframes hlrZpPull{0%{left:0;opacity:0}8%{opacity:1}86%{opacity:1;left:var(--zw,100%)}100%{opacity:0;left:var(--zw,100%)}}
.hlr-zp__coin{position:absolute;z-index:4;display:block;pointer-events:none;perspective:320px;opacity:0;transition:opacity .2s ease}
.hlr-zp__face{position:absolute;inset:0;border-radius:50%;transform-origin:50% 100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 30%,#f6cfa8,#c98450 52%,#8f532d);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),inset 0 0 0 4px #a8653b,0 5px 8px -2px rgba(20,30,45,.4)}
.hlr-zp__face b{font:500 .55em/1 var(--serif,'Fraunces',Georgia,serif);font-style:normal;color:#7a4424;letter-spacing:0}
.hlr-zp__face{font-size:inherit}
html.hl-on .hl--zip.hl-in .hlr-zp__coin{opacity:1;transition-delay:1.75s;animation:hlrZpDrop 1.15s cubic-bezier(.35,0,.5,1) 1.72s both}
@keyframes hlrZpDrop{0%{translate:0 -2.2em}42%{translate:0 0}54%{translate:0 -.22em}66%{translate:0 0}78%{translate:0 -.05em}88%,100%{translate:0 0}}
html.hl-on .hl--zip.hl-in .hlr-zp__face{animation:hlrZpSpin 1.5s cubic-bezier(.2,.6,.3,1) 1.72s both}
@keyframes hlrZpSpin{0%{transform:rotateY(0)}55%{transform:rotateY(900deg)}78%{transform:rotateY(1060deg) rotateX(24deg)}100%{transform:rotateY(1080deg) rotateX(64deg)}}
html.hl-on .hl--zip.hl-done:not(.hlr-zp--rest) .hlr-zp__coin{opacity:0;transition:opacity .5s ease}
html.hl-on .hl--zip .eyebrow{opacity:0;letter-spacing:.52em;transition:opacity .5s ease,letter-spacing 1s var(--hl-soft)}
html.hl-on .hl--zip .dek{clip-path:inset(50% 0 50% 0);transition:clip-path .85s var(--hl-soft) 1.95s}
html.hl-on .hl--zip.hl-in .eyebrow{opacity:1;letter-spacing:.18em}
html.hl-on .hl--zip.hl-in .dek{clip-path:inset(-10% -3% -10% -3%)}
html.hl-on .hl--zip.hl-done .hlr-zp__t,html.hl-on .hl--zip.hl-done .hlr-zp__pull{display:none}
html.hl-on .hl--zip.hl-done .dek{clip-path:none}

/* ---------- 04 · #methods · the jigsaw ---------- */
.hlr-jg__pc{display:inline-block;position:relative;isolation:isolate;padding:.07em .2em .1em;margin:-.07em -.2em -.1em;max-width:calc(100% + .4em);box-sizing:border-box;--kr:.17em;--kc:#5b6eae}
/* a 1px outline that follows the cut (drop-shadows follow the mask), then the lift */
.hlr-jg__pc::before,.hlr-jg__knob{filter:drop-shadow(1px 0 0 var(--kc)) drop-shadow(-1px 0 0 var(--kc)) drop-shadow(0 1px 0 var(--kc)) drop-shadow(0 -1px 0 var(--kc)) drop-shadow(0 9px 9px rgba(20,30,45,.16))}
.hlr-jg__pc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:.05em;background:#fff;transition:opacity .8s ease 2.05s}
.hlr-jg__pc--b::before{background:#eef0f8}
/* the socket: a lobe-shaped hole, centred just inside the edge, that the other piece's tab fills */
.hlr-jg--v .hlr-jg__pc--a::before{-webkit-mask:radial-gradient(circle at calc(var(--kb, 3.3em) + var(--kr)) calc(100% - var(--kr) * .55),transparent var(--kr),#000 calc(var(--kr) + 1px));mask:radial-gradient(circle at calc(var(--kb, 3.3em) + var(--kr)) calc(100% - var(--kr) * .55),transparent var(--kr),#000 calc(var(--kr) + 1px))}
.hlr-jg--v .hlr-jg__pc--b::before{-webkit-mask:radial-gradient(circle at calc(var(--ka, 1.1em) + var(--kr)) calc(var(--kr) * .55),transparent var(--kr),#000 calc(var(--kr) + 1px));mask:radial-gradient(circle at calc(var(--ka, 1.1em) + var(--kr)) calc(var(--kr) * .55),transparent var(--kr),#000 calc(var(--kr) + 1px))}
.hlr-jg--h .hlr-jg__pc--b::before{-webkit-mask:radial-gradient(circle at calc(var(--kr) * .55) 50%,transparent var(--kr),#000 calc(var(--kr) + 1px));mask:radial-gradient(circle at calc(var(--kr) * .55) 50%,transparent var(--kr),#000 calc(var(--kr) + 1px))}
/* the tab: a round lobe standing proud of the edge on a short neck */
.hlr-jg__knob{position:absolute;left:var(--ka, 1.1em);bottom:calc(var(--kr) * -1.55);width:calc(var(--kr) * 2);height:calc(var(--kr) * 2);border-radius:50%;background:#fff;z-index:-2;transition:opacity .8s ease 2.05s}
.hlr-jg__knob::before{content:"";position:absolute;left:28%;right:28%;top:-30%;height:60%;background:inherit}
.hlr-jg__knob--up{left:var(--kb, 3.3em);bottom:auto;top:calc(var(--kr) * -1.55);background:#eef0f8}
.hlr-jg__knob--up::before{top:auto;bottom:-30%}
.hlr-jg--h .hlr-jg__knob{left:auto;bottom:auto;right:calc(var(--kr) * -1.55);top:calc(50% - var(--kr))}
.hlr-jg--h .hlr-jg__knob::before{left:-30%;top:28%;bottom:28%;right:auto;width:60%;height:auto}
.hlr-jg__dek{position:relative}
html.hl-on .hl--jigsaw .hlr-jg__pc--a{opacity:0;translate:max(-70px,-8vw) 0;rotate:-4deg}
html.hl-on .hl--jigsaw .hlr-jg__pc--b{opacity:0;translate:min(70px,8vw) .18em;rotate:3deg}
html.hl-on .hl--jigsaw.hl-in .hlr-jg__pc--a{animation:hlrJgA 1s var(--hl-soft) .25s forwards,hlrJgBump .4s ease 1.38s}
html.hl-on .hl--jigsaw.hl-in .hlr-jg__pc--b{animation:hlrJgB 1.2s cubic-bezier(.3,.8,.3,1) .62s forwards}
@keyframes hlrJgA{0%{opacity:0;translate:max(-70px,-8vw) 0;rotate:-4deg}25%{opacity:1}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes hlrJgB{0%{opacity:0;translate:min(70px,8vw) .18em;rotate:3deg}20%{opacity:1}62%{translate:-3px .06em;rotate:-.6deg}76%{translate:1px .06em;rotate:0deg}88%{translate:0 -.02em}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes hlrJgBump{0%,100%{scale:1}45%{scale:1.012}}
html.hl-on .hl--jigsaw .dek{opacity:0;translate:min(34px,6vw) 0;rotate:1.5deg;transform-origin:100% 50%}
html.hl-on .hl--jigsaw.hl-in .dek{animation:hlrJgDek 1s cubic-bezier(.3,.8,.3,1) 1.35s forwards}
@keyframes hlrJgDek{0%{opacity:0;translate:min(34px,6vw) 0;rotate:1.5deg}30%{opacity:1}70%{translate:-2px 0;rotate:-.3deg}100%{opacity:1;translate:0 0;rotate:0deg}}
html.hl-on .hl--jigsaw .eyebrow{opacity:0;translate:-16px 0;transition:opacity .5s ease,translate .8s var(--hl-spring)}
html.hl-on .hl--jigsaw.hl-in .eyebrow{opacity:1;translate:0 0}
html.hl-on .hl--jigsaw.hl-in .hlr-jg__pc::before,html.hl-on .hl--jigsaw.hl-in .hlr-jg__knob{opacity:0}
html.hl-on .hl--jigsaw.hl-done .hlr-jg__pc::before,html.hl-on .hl--jigsaw.hl-done .hlr-jg__knob{display:none}

/* ---------- 05 · #flow · the pneumatic tube ---------- */
html.hl-on .hl--tube h2{position:relative;isolation:isolate}
.hlr-tb,.hlr-tb__pod{position:absolute;display:block;pointer-events:none}
.hlr-tb{z-index:-1}
.hlr-tb__glass{position:absolute;inset:0;border-radius:999px;border:1.5px solid rgba(255,255,255,.42);transform-origin:0 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 36%,rgba(255,255,255,.015) 64%,rgba(255,255,255,.12));box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 12px 26px -16px rgba(0,0,0,.6)}
.hlr-tb__glass::after{content:"";position:absolute;left:3%;right:3%;top:15%;height:2px;border-radius:2px;background:rgba(255,255,255,.42)}
.hlr-tb__pod{z-index:-1;border-radius:999px;opacity:0;background:linear-gradient(180deg,rgba(238,241,250,.32),rgba(170,182,224,.18) 45%,rgba(91,110,174,.38));box-shadow:inset 0 0 0 1.5px rgba(238,241,250,.55),0 6px 12px -6px rgba(0,0,0,.5)}
.hlr-tb__cap{position:absolute;top:-10%;bottom:-10%;width:22px;background:linear-gradient(180deg,#f6f7fc,#aab6e0 45%,#5b6eae 78%,#3d4d7a);box-shadow:0 3px 6px -2px rgba(0,0,0,.5)}
.hlr-tb__cap--l{left:-12px;border-radius:999px 4px 4px 999px}
.hlr-tb__cap--r{right:-12px;border-radius:4px 999px 999px 4px}
html.hl-on .hl--tube .hlr-tb__glass{opacity:0;scale:0 1;transition:scale .6s var(--hl-soft) .1s,opacity .3s ease .1s}
html.hl-on .hl--tube .hlr-tb__in{opacity:0;translate:-.5em 0;filter:blur(4px);transition:opacity .3s ease calc(var(--k) * 70ms + .2s),translate .55s var(--hl-soft) calc(var(--k) * 70ms + .2s),filter .5s ease calc(var(--k) * 70ms + .2s)}
html.hl-on .hl--tube .hlr-tb__out{opacity:0}
html.hl-on .hl--tube.hl-in .hlr-tb__glass{opacity:1;scale:1 1}
html.hl-on .hl--tube.hl-in .hlr-tb__in{opacity:1;translate:0 0;filter:none}
html.hl-on .hl--tube.hl-in .hlr-tb__out{animation:hlrTbShoot .78s cubic-bezier(.55,0,.8,.5) .7s forwards,hlrTbSettle .5s var(--hl-spring) 1.62s}
html.hl-on .hl--tube.hl-in .hlr-tb__pod{animation:hlrTbShoot .78s cubic-bezier(.55,0,.8,.5) .7s forwards,hlrTbClear .5s ease 1.62s forwards}
@keyframes hlrTbShoot{0%{opacity:0;translate:var(--hlr-tb-run) 0;filter:blur(3px)}12%{opacity:1}86%{translate:6px 0;filter:blur(1.5px)}93%{translate:-3px 0;filter:none}100%{opacity:1;translate:0 0;filter:none}}
@keyframes hlrTbSettle{0%{scale:.96 1}50%{scale:1.02 1}100%{scale:1 1}}
@keyframes hlrTbClear{0%{opacity:1}100%{opacity:0;scale:1.05 1.2}}
html.hl-on .hl--tube.hl-in .hlr-tb__cap--l{animation:hlrTbCapL .55s cubic-bezier(.3,.7,.4,1) 1.5s forwards}
html.hl-on .hl--tube.hl-in .hlr-tb__cap--r{animation:hlrTbCapR .55s cubic-bezier(.3,.7,.4,1) 1.5s forwards}
@keyframes hlrTbCapL{to{translate:-18px -22px;rotate:-70deg;opacity:0}}
@keyframes hlrTbCapR{to{translate:18px -22px;rotate:70deg;opacity:0}}
html.hl-on .hl--tube.hl-in .hlr-tb{opacity:0;transition:opacity .6s ease 2.4s}
html.hl-on .hl--tube .eyebrow{opacity:0;translate:-30px 0}
html.hl-on .hl--tube.hl-in .eyebrow{animation:hlrTbEb .7s cubic-bezier(.5,0,.4,1) .05s forwards}
@keyframes hlrTbEb{0%{opacity:0;translate:-30px 0}60%{opacity:1;translate:3px 0}80%{translate:-1px 0}100%{opacity:1;translate:0 0}}
html.hl-on .hl--tube > p{clip-path:inset(0 0 100% 0);translate:0 -10px;transition:clip-path .8s var(--hl-soft) 2s,translate .8s var(--hl-spring) 2s}
html.hl-on .hl--tube.hl-in > p{clip-path:inset(-10% -3% -10% -3%);translate:0 0}
html.hl-on .hl--tube.hl-done .hlr-tb,html.hl-on .hl--tube.hl-done .hlr-tb__pod{display:none}
html.hl-on .hl--tube.hl-done > p{clip-path:none}

/* ---------- 06 · #features · the stopwatch ---------- */
html.hl-on .hl--stopwatch h2{position:relative;isolation:isolate}
.hlr-sw{position:absolute;z-index:2;display:block;pointer-events:none;opacity:0}
.hlr-sw__face{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 34%,#fff,#f5f2ed 68%,#e8e3d9);
  box-shadow:0 0 0 2px var(--hlr-d),0 0 0 5px #fff,0 0 0 6px rgba(138,133,120,.35),0 16px 22px -12px rgba(20,30,45,.5)}
.hlr-sw__ticks i{position:absolute;left:50%;top:6%;width:2px;height:9%;margin-left:-1px;background:var(--hlr-d);border-radius:1px;transform-origin:50% 488.9%;rotate:var(--a)}
.hlr-sw__hand{position:absolute;left:50%;top:13%;width:2px;height:37%;margin-left:-1px;border-radius:1px;background:var(--hlr-miss);transform-origin:50% 100%}
.hlr-sw__hub{position:absolute;left:50%;top:50%;width:10%;height:10%;translate:-50% -50%;border-radius:50%;background:var(--hlr-d)}
.hlr-sw__crown{position:absolute;left:50%;top:-15%;width:15%;height:12%;margin-left:-7.5%;border-radius:3px 3px 1px 1px;background:linear-gradient(90deg,#3d4d7a,#8f9ac2 50%,#3d4d7a)}
.hlr-sw__crown::before{content:"";position:absolute;left:50%;top:-80%;width:150%;height:90%;margin-left:-75%;border:2px solid var(--hlr-d);border-bottom:0;border-radius:6px 6px 0 0}
.hlr-sw__btn{position:absolute;right:6%;top:2%;width:12%;height:9%;border-radius:2px;background:var(--hlr-d);rotate:42deg}
.hlr-sw__lines{position:absolute;display:block;pointer-events:none;z-index:-1}
.hlr-sw__lines i{position:absolute;left:0;right:0;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(61,77,122,.75));transform-origin:100% 50%;opacity:0}
.hlr-sw__lines i:nth-child(1){top:30%}.hlr-sw__lines i:nth-child(2){top:52%;left:24%}.hlr-sw__lines i:nth-child(3){top:72%;left:10%}
html.hl-on .hl--stopwatch .hlr-sw__beat{opacity:0;translate:0 .25em;scale:.96;transition:opacity .25s ease calc(var(--k) * 85ms + .62s),translate .5s var(--hl-spring) calc(var(--k) * 85ms + .62s),scale .5s var(--hl-spring) calc(var(--k) * 85ms + .62s)}
html.hl-on .hl--stopwatch .hlr-sw__fast{opacity:0}
html.hl-on .hl--stopwatch.hl-in .hlr-sw{animation:hlrSwLife 2.75s ease .1s forwards}
@keyframes hlrSwLife{0%{opacity:0;scale:.6;rotate:-12deg}12%{opacity:1;scale:1.04;rotate:2deg}18%{scale:1;rotate:0deg}82%{opacity:1;scale:1}100%{opacity:0;scale:.86;rotate:8deg}}
html.hl-on .hl--stopwatch.hl-in .hlr-sw__crown{animation:hlrSwPress .3s ease .42s}
@keyframes hlrSwPress{50%{translate:0 35%}}
html.hl-on .hl--stopwatch.hl-in .hlr-sw__hand{animation:hlrSwLap 1.1s cubic-bezier(.45,.05,.25,1) .55s forwards}
@keyframes hlrSwLap{from{rotate:0deg}to{rotate:720deg}}
html.hl-on .hl--stopwatch.hl-in .hlr-sw__beat{opacity:1;translate:0 0;scale:1}
html.hl-on .hl--stopwatch.hl-in .hlr-sw__fast{animation:hlrSwFast .7s cubic-bezier(.2,.8,.25,1.1) 1.55s forwards}
@keyframes hlrSwFast{0%{opacity:0;translate:-1.3em 0;transform:skewX(-16deg)}55%{opacity:1;translate:.06em 0;transform:skewX(5deg)}100%{opacity:1;translate:0 0;transform:none}}
html.hl-on .hl--stopwatch.hl-in .hlr-sw__lines i{animation:hlrSwLine .75s ease-out calc(1.62s + var(--n, 0) * 1s) forwards}
html.hl-on .hl--stopwatch.hl-in .hlr-sw__lines i:nth-child(2){animation-delay:1.68s}html.hl-on .hl--stopwatch.hl-in .hlr-sw__lines i:nth-child(3){animation-delay:1.74s}
@keyframes hlrSwLine{0%{opacity:0;scale:1 1}18%{opacity:.85}100%{opacity:0;scale:0 1}}
html.hl-on .hl--stopwatch .eyebrow{clip-path:inset(-30% 100% -30% 0);transition:clip-path .9s steps(12,end) .05s}
html.hl-on .hl--stopwatch .dek{clip-path:inset(-10% 100% -10% 0);transition:clip-path 1s steps(4,end) 1.75s}
html.hl-on .hl--stopwatch.hl-in .eyebrow{clip-path:inset(-30% -2% -30% 0)}
html.hl-on .hl--stopwatch.hl-in .dek{clip-path:inset(-10% -2% -10% 0)}
html.hl-on .hl--stopwatch.hl-done .hlr-sw,html.hl-on .hl--stopwatch.hl-done .hlr-sw__lines{display:none}
html.hl-on .hl--stopwatch.hl-done .eyebrow,html.hl-on .hl--stopwatch.hl-done .dek{clip-path:none}

/* ---------- 07 · #integrations · the switchboard ---------- */
html.hl-on .hl--switchboard h2{position:relative}
.hlr-sb__panel{position:absolute;display:block;height:10px;border-radius:5px;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(180deg,#5a68a0,#3d4d7a 55%,#2b375a);box-shadow:0 4px 8px -4px rgba(20,30,45,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.hlr-sb__jack{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#171c2e;box-shadow:inset 0 0 0 1.5px #aab6e0}
.hlr-sb__jack::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#171c2e}
.hlr-sb__cords{position:absolute;overflow:visible;pointer-events:none;z-index:1}
.hlr-sb__cords path{fill:none;stroke:var(--hlr-d);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hlr-sb__cords path:nth-of-type(even){stroke:var(--hlr-miss)}
.hlr-sb__cords path:nth-of-type(3n){stroke:var(--hlr-ok)}
.hlr-sb__plug{fill:#2b375a;opacity:0}
html.hl-on .hl--switchboard .hlr-sb__w{opacity:.14}
html.hl-on .hl--switchboard.hl-in .hlr-sb__panel{animation:hlrSbPanel 2.6s ease .1s forwards}
@keyframes hlrSbPanel{0%{opacity:0;scale:0 1}14%{opacity:1;scale:1 1}86%{opacity:1}100%{opacity:0;scale:1 1}}
html.hl-on .hl--switchboard.hl-in .hlr-sb__cords path{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--hl-soft) calc(var(--k) * .24s + .38s)}
html.hl-on .hl--switchboard.hl-in .hlr-sb__plug{animation:hlrSbPlug .3s var(--hl-spring) calc(var(--k) * .24s + .86s) forwards}
@keyframes hlrSbPlug{0%{opacity:0;translate:0 8px}100%{opacity:1;translate:0 0}}
html.hl-on .hl--switchboard.hl-in .hlr-sb__jack::after{animation:hlrSbLamp .5s ease calc(var(--k) * .24s + .95s) forwards}
@keyframes hlrSbLamp{0%{background:#171c2e}40%{background:#ffd27a;box-shadow:0 0 9px 3px rgba(255,190,90,.75)}100%{background:#f0b955;box-shadow:0 0 5px 1px rgba(240,185,85,.6)}}
html.hl-on .hl--switchboard.hl-in .hlr-sb__w{animation:hlrSbLit .6s ease calc(var(--k) * .24s + .95s) forwards}
@keyframes hlrSbLit{0%{opacity:.14}35%{opacity:1;text-shadow:0 0 18px rgba(91,110,174,.6)}100%{opacity:1;text-shadow:none}}
html.hl-on .hl--switchboard.hl-in .hlr-sb__cords{opacity:0;transition:opacity .5s ease 2.25s}
html.hl-on .hl--switchboard .hlr-sb__dek{clip-path:inset(-10% 50% -10% 50%);transition:clip-path .9s var(--hl-soft) 2.35s}
html.hl-on .hl--switchboard.hl-in .hlr-sb__dek{clip-path:inset(-10% -3% -10% -3%)}
html.hl-on .hl--switchboard .eyebrow{opacity:0}
html.hl-on .hl--switchboard.hl-in .eyebrow{animation:hlrSbEb .55s linear .02s forwards}
@keyframes hlrSbEb{0%{opacity:0}25%{opacity:1}40%{opacity:.2}55%{opacity:1}70%{opacity:.45}100%{opacity:1}}
html.hl-on .hl--switchboard.hl-done .hlr-sb__cords,html.hl-on .hl--switchboard.hl-done .hlr-sb__panel{display:none}
html.hl-on .hl--switchboard.hl-done .hlr-sb__dek{clip-path:none}

/* ---------- 08 · #parser · the rollers ---------- */
html.hl-on .hl--mangle h2{position:relative}
.hlr-mg__rig{position:absolute;width:26px;display:block;pointer-events:none;z-index:3;opacity:0}
.hlr-mg__roll{position:absolute;left:0;top:0;bottom:0;width:12px;border-radius:6px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 3px,transparent 3px 9px),linear-gradient(90deg,#2b375a,#8f9ac2 42%,#5b6eae 68%,#2b375a);box-shadow:0 6px 10px -6px rgba(20,30,45,.55)}
.hlr-mg__roll--b{left:13px}
.hlr-mg__cells{position:absolute;inset:0;display:block;pointer-events:none}
.hlr-mg__bar{position:absolute;width:1.5px;margin-left:-.75px;background:rgba(91,110,174,.45);transform:scaleY(0);transform-origin:50% 0}
.hlr-mg__base{position:absolute;height:0;border-top:1.5px dashed rgba(91,110,174,.4);transform:scaleX(0);transform-origin:0 50%}
html.hl-on .hl--mangle .hlr-mg__c{opacity:0;color:var(--ink-3,#6b6b6b);translate:calc(-1 * var(--S, 640px)) 0;transform:translateY(var(--jy)) rotate(var(--jr)) skewX(var(--jk)) scale(.9,var(--js))}
html.hl-on .hl--mangle.hl-in .hlr-mg__c{opacity:1;color:inherit;translate:0 0;transform:none;
  transition:opacity .15s ease var(--t0),translate var(--hlr-mg-dur, .95s) linear var(--t0),transform .2s ease-out var(--tn),color .25s ease var(--tn)}
html.hl-on .hl--mangle.hl-in .hlr-mg__rig{animation:hlrMgRig 3s ease .1s forwards}
@keyframes hlrMgRig{0%{opacity:0}8%{opacity:1}84%{opacity:1}100%{opacity:0}}
html.hl-on .hl--mangle.hl-in .hlr-mg__roll{animation:hlrMgRoll .25s linear .3s 9}
html.hl-on .hl--mangle.hl-in .hlr-mg__roll--b{animation-direction:reverse}
@keyframes hlrMgRoll{to{background-position:0 9px,0 0}}
html.hl-on .hl--mangle.hl-in .hlr-mg__bar{transform:scaleY(1);transition:transform .3s var(--hl-spring) var(--t)}
html.hl-on .hl--mangle.hl-in .hlr-mg__base{transform:scaleX(1);transition:transform .45s var(--hl-soft) var(--t)}
html.hl-on .hl--mangle.hl-in .hlr-mg__cells{opacity:0;transition:opacity .6s ease 2.95s}
html.hl-on .hl--mangle .hlr-mg__eb{opacity:0;transform:skewX(-16deg) scaleY(.55);transform-origin:0 100%;transition:opacity .3s ease,transform .6s var(--hl-spring)}
html.hl-on .hl--mangle.hl-in .hlr-mg__eb{opacity:1;transform:none}
html.hl-on .hl--mangle .dek{opacity:0;transform:translateX(-26px) skewX(10deg) scaleY(.86);transform-origin:0 50%;transition:opacity .4s ease 1.85s,transform .8s var(--hl-spring) 1.85s}
html.hl-on .hl--mangle.hl-in .dek{opacity:1;transform:none}
html.hl-on .hl--mangle.hl-done .hlr-mg__rig,html.hl-on .hl--mangle.hl-done .hlr-mg__cells{display:none}

/* ---------- 09 · #personas · the stamp ---------- */
html.hl-on .hl--stamp h2{position:relative;isolation:isolate}
.hlr-st__grid{position:absolute;z-index:-1;display:block;pointer-events:none;border-radius:2px;
  background-color:rgba(255,255,255,.8);background-image:linear-gradient(90deg,rgba(100,124,112,.3) 1px,transparent 1px),linear-gradient(180deg,rgba(100,124,112,.3) 1px,transparent 1px);background-size:var(--cw,60px) var(--ch,22px);box-shadow:0 0 0 1px rgba(100,124,112,.32)}
.hlr-st__cell{position:absolute;left:0;top:0;width:var(--cw,60px);height:var(--ch,22px);border:2px solid #2e7d52;box-sizing:border-box;opacity:0}
.hlr-st__imp{position:absolute;z-index:-1;display:block;pointer-events:none;border:3px solid rgba(61,77,122,.82);border-radius:9px;rotate:-2deg;opacity:0}
.hlr-st__imp::before{content:"";position:absolute;inset:3px;border:1px dashed rgba(61,77,122,.5);border-radius:6px}
.hlr-st__tick{position:absolute;right:-.2em;top:-.22em;width:.42em;height:.42em;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px rgba(61,77,122,.9);scale:0}
.hlr-st__tick svg{width:100%;height:100%;display:block;fill:none;stroke:var(--hlr-d);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hlr-st__blot{position:absolute;z-index:-2;display:block;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at center,rgba(91,110,174,.28),rgba(91,110,174,.08) 55%,transparent 72%);opacity:0}
.hlr-st__tool{position:absolute;z-index:3;display:block;pointer-events:none;opacity:0}
.hlr-st__base{position:absolute;inset:0;border-radius:9px;background:linear-gradient(160deg,#6c7bb6,#3d4d7a 55%,#2b375a);box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -6px 10px -4px rgba(0,0,0,.35),0 22px 30px -14px rgba(20,30,45,.55)}
.hlr-st__neck{position:absolute;left:50%;top:50%;width:22%;max-width:70px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;background:radial-gradient(circle at 40% 35%,#8a6a46,#5e4630 70%);box-shadow:0 6px 10px -4px rgba(0,0,0,.5)}
.hlr-st__knob{position:absolute;left:50%;top:50%;width:14%;max-width:46px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:2;background:radial-gradient(circle at 38% 32%,#c49a6c,#8a6a46 65%);box-shadow:0 3px 6px rgba(0,0,0,.35)}
html.hl-on .hl--stamp .hlr-st__set{opacity:0;translate:0 .18em;transition:opacity .3s ease calc(var(--k) * 90ms + .15s),translate .5s var(--hl-spring) calc(var(--k) * 90ms + .15s)}
html.hl-on .hl--stamp .hlr-st__ink{opacity:0}
html.hl-on .hl--stamp .hlr-st__grid{clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--hl-soft) .25s}
html.hl-on .hl--stamp.hl-in .hlr-st__grid{clip-path:inset(-2px -2px -2px -2px);animation:hlrStGridOut .5s ease 1.45s forwards}
@keyframes hlrStGridOut{to{opacity:0}}
html.hl-on .hl--stamp.hl-in .hlr-st__cell{animation:hlrStCell 1.05s steps(1,end) .45s forwards}
@keyframes hlrStCell{0%{opacity:1;translate:0 0}25%{translate:calc(var(--cw,60px) * 2) var(--ch,22px)}50%{translate:var(--cw,60px) 0}75%{translate:calc(var(--cw,60px) * 3) calc(var(--ch,22px) * 2)}100%{opacity:0;translate:calc(var(--cw,60px) * 3) calc(var(--ch,22px) * 2)}}
html.hl-on .hl--stamp.hl-in .hlr-st__set{opacity:1;translate:0 0}
html.hl-on .hl--stamp.hl-in .hlr-st__tool{animation:hlrStTool 1.15s cubic-bezier(.5,0,.5,1) 1.3s forwards}
@keyframes hlrStTool{0%{opacity:0;scale:1.55;translate:10px -26px}30%{opacity:1;scale:1.06}38%{scale:1;translate:0 0}44%{scale:.97 .94}52%{scale:1}62%{opacity:1;scale:1;translate:0 0}100%{opacity:0;scale:1.35;translate:14px -40px}}
html.hl-on .hl--stamp.hl-in .hlr-st__ink{animation:hlrStInk .5s ease 1.78s forwards}
@keyframes hlrStInk{0%{opacity:0;filter:blur(2px)}30%{opacity:.85}100%{opacity:1;filter:none}}
html.hl-on .hl--stamp.hl-in .hlr-st__imp{animation:hlrStImp 1.5s ease 1.76s forwards}
@keyframes hlrStImp{0%{opacity:0;scale:1.06}10%{opacity:1;scale:1}72%{opacity:1}100%{opacity:0;scale:1}}
html.hl-on .hl--stamp.hl-in .hlr-st__blot{animation:hlrStBlot .9s ease-out 1.74s forwards}
@keyframes hlrStBlot{0%{opacity:0;scale:.6}25%{opacity:1}100%{opacity:0;scale:1.28}}
html.hl-on .hl--stamp.hl-in .hlr-st__tick{scale:1;transition:scale .45s cubic-bezier(.3,1.7,.4,1) 2.05s}
html.hl-on .hl--stamp.hl-done .hlr-st__imp,html.hl-on .hl--stamp.hl-done .hlr-st__tool,html.hl-on .hl--stamp.hl-done .hlr-st__grid,html.hl-on .hl--stamp.hl-done .hlr-st__blot{display:none}
.hlr-st__sel{position:relative}
.hlr-st__sel::before{content:"";position:absolute;inset:-4px -6px;border:1.5px solid #2e7d52;background:rgba(46,125,82,.07);border-radius:2px;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
html.hl-on .hl--stamp .dek{clip-path:inset(-6% 100% -6% 0);transition:clip-path .9s var(--hl-snap) 2.05s}
html.hl-on .hl--stamp.hl-in .dek{clip-path:inset(-6% -3% -6% 0)}
html.hl-on .hl--stamp.hl-in .hlr-st__sel::before{animation:hlrStSel 1.5s var(--hl-snap) 2.05s forwards}
@keyframes hlrStSel{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
html.hl-on .hl--stamp .eyebrow{opacity:0}
html.hl-on .hl--stamp.hl-in .eyebrow{animation:hlrStRow .9s ease .02s forwards}
@keyframes hlrStRow{0%{opacity:0;box-shadow:inset 0 0 0 999px rgba(46,125,82,0)}20%{opacity:1;box-shadow:inset 0 0 0 999px rgba(46,125,82,.14),0 0 0 1.5px rgba(46,125,82,.5)}100%{opacity:1;box-shadow:inset 0 0 0 999px rgba(46,125,82,0),0 0 0 1.5px rgba(46,125,82,0)}}
html.hl-on .hl--stamp.hl-done .dek{clip-path:none}

/* ---------- 10 · #roi-calculator · the abacus ---------- */
html.hl-on .hl--abacus h2{position:relative}
.hlr-ab{position:absolute;inset:0;display:block;pointer-events:none;z-index:1}
.hlr-ab__rod{position:absolute;height:2px;border-radius:1px;background:linear-gradient(90deg,#8a8578,#cfcabf 50%,#8a8578);transform-origin:0 50%;scale:0 1}
.hlr-ab__post{position:absolute;width:6px;margin-left:-3px;border-radius:3px;background:linear-gradient(90deg,#2b375a,#5b6eae 50%,#2b375a);box-shadow:0 4px 6px -3px rgba(20,30,45,.5);scale:1 0;transform-origin:50% 100%}
.hlr-ab__bead{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 30%,#d4daf0,#5b6eae 52%,#3d4d7a);box-shadow:0 3px 4px -2px rgba(20,30,45,.5);opacity:0}
.hlr-ab__bead:nth-child(4n+1){background:radial-gradient(circle at 40% 30%,#f0d4da,#c4576a 52%,#9a4455)}
html.hl-on .hl--abacus.hl-in .hlr-ab__rod{scale:1 1;transition:scale .55s var(--hl-soft) .1s}
html.hl-on .hl--abacus.hl-in .hlr-ab__post{scale:1 1;transition:scale .45s var(--hl-spring) .1s}
html.hl-on .hl--abacus.hl-in .hlr-ab__bead{animation:hlrAbFlick .55s cubic-bezier(.2,.85,.3,1.05) var(--d) forwards}
@keyframes hlrAbFlick{0%{opacity:1;translate:0 0}82%{translate:calc(var(--dx) + 2px) 0}100%{opacity:1;translate:var(--dx) 0}}
html.hl-on .hl--abacus .hlr-ab__w{opacity:0;translate:0 .38em;transition:opacity .25s ease calc(var(--d) + .45s),translate .55s var(--hl-spring) calc(var(--d) + .45s)}
html.hl-on .hl--abacus.hl-in .hlr-ab__w{opacity:1;translate:0 0}
html.hl-on .hl--abacus.hl-in .hlr-ab{opacity:0;transition:opacity .6s ease 2.45s}
.hlr-ab__eb{position:relative}
.hlr-ab__ebead{position:absolute;left:0;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#d4daf0,#5b6eae 52%,#3d4d7a);opacity:0;pointer-events:none}
html.hl-on .hl--abacus .hlr-ab__eb{clip-path:inset(-40% 100% -40% 0);transition:clip-path .8s cubic-bezier(.3,.7,.3,1) .05s}
html.hl-on .hl--abacus.hl-in .hlr-ab__eb{clip-path:inset(-40% calc(100% - var(--ebw, 100%) - 14px) -40% -12px)}
html.hl-on .hl--abacus.hl-in .hlr-ab__ebead{animation:hlrAbEb .8s cubic-bezier(.3,.7,.3,1) .05s forwards}
@keyframes hlrAbEb{0%{opacity:1;left:0}85%{opacity:1}100%{opacity:0;left:calc(var(--ebw, 100%) + 8px)}}
html.hl-on .hl--abacus .dek{opacity:0;translate:24px 0}
html.hl-on .hl--abacus.hl-in .dek{animation:hlrAbDek 1s ease 1.75s forwards}
@keyframes hlrAbDek{0%{opacity:0;translate:24px 0}22%{opacity:1;translate:9px 0}40%,58%{translate:9px 0}78%{translate:-1px 0}100%{opacity:1;translate:0 0}}
html.hl-on .hl--abacus.hl-done .hlr-ab,html.hl-on .hl--abacus.hl-done .hlr-ab__ebead{display:none}
html.hl-on .hl--abacus.hl-done .hlr-ab__eb{clip-path:none}

/* ---------- 11 · #iq-suite-context · nesting trays ---------- */
.hlr-ns{position:relative;isolation:isolate;perspective:1200px}
.hlr-ns__tray{position:absolute;z-index:-2;pointer-events:none;border-radius:8px;inset:calc(-16px + var(--i) * 6%) calc(-20px + var(--i) * 4.5%);
  background:linear-gradient(180deg,#ece7de,#fff 34%);box-shadow:inset 0 3px 0 var(--tc,#5b6eae),inset 0 12px 14px -10px rgba(20,30,45,.35),0 0 0 1.5px rgba(91,110,174,.3),0 14px 24px -18px rgba(20,30,45,.4)}
.hlr-ns__lid{position:absolute;inset:-16px -20px;z-index:-1;pointer-events:none;border-radius:8px;transform-origin:50% 0;
  background:#fff var(--hlr-ruled);box-shadow:0 0 0 1.5px rgba(91,110,174,.32),0 1px 0 rgba(255,255,255,.9) inset,0 24px 36px -24px rgba(20,30,45,.5)}
.hlr-ns__lid::after{content:"";position:absolute;left:0;right:0;top:14px;height:0;border-top:1px solid rgba(91,110,174,.22)}
html.hl-on .hl--nest .hlr-ns__tray,html.hl-on .hl--nest .hlr-ns__lid{opacity:0}
html.hl-on .hl--nest.hl-in .hlr-ns__tray{animation:hlrNsDrop .62s cubic-bezier(.3,1.3,.5,1) calc(.2s + var(--i) * .24s) forwards,hlrNsOut .6s ease 2.7s forwards}
@keyframes hlrNsDrop{0%{opacity:0;translate:0 -34px;scale:1.05}45%{opacity:1}100%{opacity:1;translate:0 0;scale:1}}
html.hl-on .hl--nest.hl-in .hlr-ns__lid{animation:hlrNsLid .75s cubic-bezier(.3,1.15,.4,1) calc(.3s + var(--n) * .24s) forwards,hlrNsOut .6s ease 2.7s forwards}
@keyframes hlrNsLid{0%{opacity:0;transform:translateY(-44px) rotateX(32deg)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hlrNsOut{to{opacity:0}}
html.hl-on .hl--nest .hl-w{opacity:0;translate:0 .14em;scale:.98;transition:opacity .35s ease calc(.85s + var(--n) * .24s + var(--k) * 45ms),translate .5s var(--hl-spring) calc(.85s + var(--n) * .24s + var(--k) * 45ms),scale .5s var(--hl-spring) calc(.85s + var(--n) * .24s + var(--k) * 45ms)}
html.hl-on .hl--nest.hl-in .hl-w{opacity:1;translate:0 0;scale:1}
html.hl-on .hl--nest .eyebrow{opacity:0;translate:0 -10px;scale:.92;transform-origin:0 50%;transition:opacity .4s ease,translate .6s var(--hl-spring),scale .6s var(--hl-spring)}
html.hl-on .hl--nest.hl-in .eyebrow{opacity:1;translate:0 0;scale:1}
html.hl-on .hl--nest .dek{clip-path:inset(100% 0 0 0);translate:0 16px;transition:clip-path .8s var(--hl-soft) 2.15s,translate .8s var(--hl-spring) 2.15s}
html.hl-on .hl--nest.hl-in .dek{clip-path:inset(-10% -3% -10% -3%);translate:0 0}
html.hl-on .hl--nest.hl-done .hlr-ns__tray,html.hl-on .hl--nest.hl-done .hlr-ns__lid{display:none}
html.hl-on .hl--nest.hl-done .dek{clip-path:none}

/* ---------- 12 · #why · the speedometer ---------- */
html.hl-on .hl--gauge h2{position:relative;isolation:isolate}
.hlr-gg__win{display:inline-block;clip-path:inset(-.08em -.14em -.18em -.14em)}
.hlr-gg__drum{position:relative}
.hlr-gg__drum::before,.hlr-gg__drum::after{position:absolute;left:50%;translate:-50% 0;color:rgba(170,182,224,.3);font-style:normal}
.hlr-gg__drum::before{content:attr(data-a);top:-1.02em}
.hlr-gg__drum::after{content:attr(data-b);top:-2.04em}
.hlr-gg__dial{position:absolute;z-index:-1;overflow:visible;pointer-events:none;opacity:0;transition:opacity .4s ease .1s}
.hlr-gg__arc{fill:none;stroke:rgba(250,248,245,.13);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hlr-gg__red{fill:none;stroke:#e08a98;stroke-width:4;stroke-linecap:round;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1}
.hlr-gg__ticks path{stroke:rgba(250,248,245,.18);stroke-width:1.5;stroke-linecap:round;opacity:0}
.hlr-gg__needle{transform-box:view-box;transform-origin:100px 104px;transform:rotate(-90deg)}
.hlr-gg__needle path{stroke:#faf8f5;stroke-width:1.6;stroke-linecap:round;opacity:.5}
.hlr-gg__needle circle{fill:#faf8f5;opacity:.5}
html.hl-on .hl--gauge .hlr-gg__drum{translate:0 3.1em}
html.hl-on .hl--gauge .hlr-gg__fast{opacity:0;translate:-.5em 0;filter:blur(6px);transition:opacity .35s ease calc(1.3s + var(--k) * 60ms),translate .6s cubic-bezier(.2,.9,.25,1.05) calc(1.3s + var(--k) * 60ms),filter .6s ease calc(1.3s + var(--k) * 60ms)}
html.hl-on .hl--gauge.hl-in .hlr-gg__dial{opacity:1}
html.hl-on .hl--gauge.hl-in .hlr-gg__arc{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--hl-soft) .1s}
html.hl-on .hl--gauge.hl-in .hlr-gg__red{stroke-dashoffset:0;transition:stroke-dashoffset .4s ease .55s}
html.hl-on .hl--gauge.hl-in .hlr-gg__ticks path{opacity:1;transition:opacity .4s ease .3s}
html.hl-on .hl--gauge.hl-in .hlr-gg__needle{animation:hlrGgNeedle 1.35s cubic-bezier(.4,.05,.3,1) .45s forwards}
@keyframes hlrGgNeedle{0%{transform:rotate(-90deg)}58%{transform:rotate(84deg)}72%{transform:rotate(64deg)}86%{transform:rotate(74deg)}100%{transform:rotate(70deg)}}
html.hl-on .hl--gauge.hl-in .hlr-gg__drum{translate:0 0;transition:translate .75s cubic-bezier(.3,.7,.2,1.03) calc(var(--j) * 18ms + .5s)}
html.hl-on .hl--gauge.hl-in .hlr-gg__fast{opacity:1;translate:0 0;filter:none}
html.hl-on .hl--gauge.hl-done .hlr-gg__dial{opacity:0;transition:opacity .8s ease}
html.hl-on .hl--gauge.hl-done .hlr-gg__win{clip-path:none}
html.hl-on .hl--gauge.hl-done .hlr-gg__drum::before,html.hl-on .hl--gauge.hl-done .hlr-gg__drum::after{content:none}
html.hl-on .hl--gauge .eyebrow{position:relative;opacity:0;transition:opacity .5s ease .05s}
html.hl-on .hl--gauge .eyebrow::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:rgba(250,248,245,.4);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--hl-soft) .15s,opacity .6s ease 2.6s}
html.hl-on .hl--gauge.hl-in .eyebrow{opacity:1}
html.hl-on .hl--gauge.hl-in .eyebrow::after{transform:scaleX(1);opacity:0}
html.hl-on .hl--gauge .dark-plate__lede{clip-path:inset(-5% 100% -5% 0);filter:blur(3px);transition:clip-path .75s cubic-bezier(.7,0,.2,1) 1.9s,filter .55s ease 1.95s}
html.hl-on .hl--gauge.hl-in .dark-plate__lede{clip-path:inset(-5% -2% -5% 0);filter:none}
html.hl-on .hl--gauge.hl-done .dark-plate__lede{clip-path:none}

/* ---------- 13 · #faq · the claw ---------- */
html.hl-on .hl--claw h2{position:relative}
.hlr-cw{position:absolute;display:block;pointer-events:none;z-index:3;opacity:0}
.hlr-cw__cable{position:absolute;left:50%;bottom:72%;width:1.5px;margin-left:-.75px;height:var(--cable,200px);background:linear-gradient(180deg,rgba(138,133,120,0),rgba(138,133,120,.75) 60%)}
.hlr-cw__head{position:absolute;inset:0}
.hlr-cw__hub{position:absolute;left:50%;top:18%;width:46%;height:24%;margin-left:-23%;border-radius:6px 6px 3px 3px;z-index:2;background:linear-gradient(180deg,#9aa5cc,#5b6eae 50%,#3d4d7a);box-shadow:0 3px 5px rgba(20,30,45,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.hlr-cw__arm{position:absolute;top:34%;width:9%;height:58%;border-radius:3px;background:var(--hlr-d);transform-origin:50% 0}
.hlr-cw__arm::after{content:"";position:absolute;bottom:-1px;width:260%;height:16%;border-radius:3px;background:inherit}
.hlr-cw__arm--l{left:32%;rotate:26deg}.hlr-cw__arm--l::after{left:0}
.hlr-cw__arm--r{right:32%;rotate:-26deg}.hlr-cw__arm--r::after{right:0}
html.hl-on .hl--claw .hlr-cw__set{opacity:0;translate:0 -.12em;transition:opacity .35s ease .12s,translate .5s var(--hl-spring) .12s}
html.hl-on .hl--claw .hlr-cw__prize{opacity:0}
html.hl-on .hl--claw.hl-in .hlr-cw__set{opacity:1;translate:0 0}
html.hl-on .hl--claw.hl-in .hlr-cw{animation:hlrCwRun 2.5s cubic-bezier(.45,0,.4,1) .35s forwards}
@keyframes hlrCwRun{0%{opacity:0;translate:0 calc(-1 * var(--up))}6%{opacity:1}30%,38%{translate:0 0}62%,70%{translate:0 calc(-1 * var(--drop))}94%{opacity:1}100%{opacity:0;translate:0 calc(-1 * var(--up) - var(--drop))}}
html.hl-on .hl--claw.hl-in .hlr-cw__arm--l{animation:hlrCwArmL 2.5s ease .35s forwards}
html.hl-on .hl--claw.hl-in .hlr-cw__arm--r{animation:hlrCwArmR 2.5s ease .35s forwards}
@keyframes hlrCwArmL{0%,29%{rotate:26deg}35%,66%{rotate:-7deg}72%,100%{rotate:26deg}}
@keyframes hlrCwArmR{0%,29%{rotate:-26deg}35%,66%{rotate:7deg}72%,100%{rotate:-26deg}}
html.hl-on .hl--claw.hl-in .hlr-cw__prize{animation:hlrCwPrize 2.5s cubic-bezier(.45,0,.4,1) .35s forwards}
@keyframes hlrCwPrize{0%{opacity:0;translate:0 var(--drop)}8%{opacity:.4;translate:0 var(--drop)}38%{opacity:.4;translate:0 var(--drop)}62%{opacity:1;translate:0 0}66%{translate:0 -.035em}71%,100%{opacity:1;translate:0 0}}
html.hl-on .hl--claw .eyebrow .hlr-cw__bulb{opacity:0}
html.hl-on .hl--claw.hl-in .eyebrow .hlr-cw__bulb{animation:hlrCwBulb .95s linear calc(var(--o) * .12s) forwards}
@keyframes hlrCwBulb{0%{opacity:0}18%{opacity:1}36%{opacity:.22}54%{opacity:1}72%{opacity:.35}100%{opacity:1}}
html.hl-on .hl--claw > p{clip-path:inset(0 0 100% 0);translate:0 -10px;transition:clip-path .7s var(--hl-soft) 2.55s,translate .8s var(--hl-spring) 2.55s}
html.hl-on .hl--claw.hl-in > p{clip-path:inset(-10% -3% -10% -3%);translate:0 0}
html.hl-on .hl--claw.hl-done .hlr-cw{display:none}
html.hl-on .hl--claw.hl-done > p{clip-path:none}

/* ---------- 14 · #pricing-preview · the pound coin ---------- */
html.hl-on .hl--coin h2{position:relative}
.hlr-cn{position:absolute;display:block;pointer-events:none;z-index:2;perspective:420px;transition:opacity .5s ease}
.hlr-cn__roll{position:absolute;left:0;top:0;width:var(--S);height:var(--S);opacity:0}
.hlr-cn__coin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-origin:50% 100%;
  clip-path:polygon(98.3% 62.9%,85.4% 85.4%,62.9% 98.3%,37.1% 98.3%,14.6% 85.4%,1.7% 62.9%,1.7% 37.1%,14.6% 14.6%,37.1% 1.7%,62.9% 1.7%,85.4% 14.6%,98.3% 37.1%);
  background:radial-gradient(circle at 34% 28%,#fdf0c4,#e2b754 46%,#a8762e 88%)}
.hlr-cn__coin::before{content:"";position:absolute;inset:13%;clip-path:inherit;background:radial-gradient(circle at 60% 70%,#f6dc8e,#d3a440 70%);box-shadow:inset 0 0 0 1px rgba(126,90,34,.4)}
.hlr-cn__coin b{position:relative;font:500 calc(var(--S) * .44)/1 var(--serif,'Fraunces',Georgia,serif);font-style:normal;letter-spacing:0;color:#7e5a22}
html.hl-on .hl--coin.hl-in .hlr-cn__roll{animation:hlrCnRoll 1.15s cubic-bezier(.25,.5,.3,1) .3s forwards}
@keyframes hlrCnRoll{0%{opacity:0;translate:calc(-1.4 * var(--S)) 0;rotate:0deg}8%{opacity:1}100%{opacity:1;translate:var(--x) 0;rotate:var(--spin, 720deg)}}
html.hl-on .hl--coin.hl-in .hlr-cn__coin{animation:hlrCnTopple 1.1s cubic-bezier(.3,.6,.4,1) 1.42s forwards}
@keyframes hlrCnTopple{0%{transform:rotateX(0)}28%{transform:rotateX(58deg) rotateZ(7deg)}44%{transform:rotateX(34deg) rotateZ(-5deg)}60%{transform:rotateX(70deg) rotateZ(3deg)}76%{transform:rotateX(62deg) rotateZ(-1deg)}100%{transform:rotateX(72deg)}}
html.hl-on .hl--coin .hlr-cn__a{opacity:0;translate:0 .2em;transition:opacity .3s ease calc(.15s + var(--x) * 1.1s),translate .5s var(--hl-spring) calc(.15s + var(--x) * 1.1s)}
html.hl-on .hl--coin .hlr-cn__price{opacity:0;scale:.4;transition:opacity .2s ease calc(.3s + var(--x) * 1.05s),scale .6s cubic-bezier(.3,1.7,.4,1) calc(.3s + var(--x) * 1.05s)}
html.hl-on .hl--coin .hlr-cn__b{opacity:0;transform:perspective(520px) rotateX(-92deg);transform-origin:50% 92%;transition:opacity .25s ease calc(1.55s + var(--i) * .12s),transform .65s var(--hl-spring) calc(1.55s + var(--i) * .12s)}
html.hl-on .hl--coin.hl-in .hlr-cn__a{opacity:1;translate:0 0}
html.hl-on .hl--coin.hl-in .hlr-cn__price{opacity:1;scale:1}
html.hl-on .hl--coin.hl-in .hlr-cn__b{opacity:1;transform:none}
html.hl-on .hl--coin.hl-done:not(.hlr-cn--rest) .hlr-cn{opacity:0}
.hlr-cn__dek{position:relative}
.hlr-cn__rule{position:absolute;left:0;right:0;top:-10px;height:1px;background:var(--hlr-d);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
html.hl-on .hl--coin .dek{clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--hl-soft) 2.25s}
html.hl-on .hl--coin.hl-in .dek{clip-path:inset(-6% -3% -6% -3%)}
html.hl-on .hl--coin.hl-in .hlr-cn__rule{transform:scaleX(1);opacity:0;transition:transform .6s var(--hl-soft) 1.95s,opacity .7s ease 2.9s}
html.hl-on .hl--coin .eyebrow{opacity:0;transform:perspective(400px) rotateX(-180deg);transform-origin:50% 60%}
html.hl-on .hl--coin.hl-in .eyebrow{animation:hlrCnEb .85s cubic-bezier(.3,.8,.3,1.1) .02s forwards}
@keyframes hlrCnEb{0%{opacity:0;transform:perspective(400px) rotateX(-180deg)}40%{opacity:1}100%{opacity:1;transform:perspective(400px) rotateX(0)}}
html.hl-on .hl--coin.hl-done .dek{clip-path:none}
html.hl-on .hl--coin.hl-done .eyebrow{transform:none}

/* ---------- 15 · #cta · the clock runs back ---------- */
html.hl-on .hl--rewind h2{position:relative;isolation:isolate}
.hlr-rw__clock{position:absolute;z-index:-1;overflow:visible;pointer-events:none;opacity:0;transition:opacity .5s ease .1s}
.hlr-rw__face{fill:rgba(250,248,245,.03);stroke:rgba(250,248,245,.22);stroke-width:1.1}
.hlr-rw__ticks path{stroke:rgba(250,248,245,.34);stroke-width:1.5;stroke-linecap:round}
.hlr-rw__hr,.hlr-rw__mn{fill:none;stroke:#aab6e0;stroke-linecap:round;transform-box:view-box;transform-origin:50px 50px}
.hlr-rw__hr{stroke-width:2.8;opacity:.7}.hlr-rw__mn{stroke-width:1.8;opacity:.8}
.hlr-rw__hub{fill:#aab6e0;opacity:.8}
html.hl-on .hl--rewind.hl-in .hlr-rw__clock{opacity:1}
html.hl-on .hl--rewind.hl-in .hlr-rw__mn{animation:hlrRwMn 1.95s cubic-bezier(.2,.6,.25,1) .2s both}
html.hl-on .hl--rewind.hl-in .hlr-rw__hr{animation:hlrRwHr 1.95s cubic-bezier(.2,.6,.25,1) .2s both}
@keyframes hlrRwMn{from{transform:rotate(0deg)}to{transform:rotate(-1080deg)}}
@keyframes hlrRwHr{from{transform:rotate(0deg)}to{transform:rotate(-90deg)}}
html.hl-on .hl--rewind .hlr-rw__w{opacity:0;translate:.7em 0;filter:blur(4px);transition:opacity .4s ease calc(var(--r) * 120ms + .45s),translate .6s cubic-bezier(.2,.8,.25,1) calc(var(--r) * 120ms + .45s),filter .6s ease calc(var(--r) * 120ms + .45s)}
html.hl-on .hl--rewind.hl-in .hlr-rw__w{opacity:1;translate:0 0;filter:none}
html.hl-on .hl--rewind .hlr-rw__aside{-webkit-mask:conic-gradient(from 0deg at 50% 50%,transparent 0deg calc(360deg - var(--hlr-sweep)),#000 calc(360deg - var(--hlr-sweep)));mask:conic-gradient(from 0deg at 50% 50%,transparent 0deg calc(360deg - var(--hlr-sweep)),#000 calc(360deg - var(--hlr-sweep)));--hlr-sweep:0deg;transition:--hlr-sweep 1.2s cubic-bezier(.4,.1,.3,1) 1.45s}
html.hl-on .hl--rewind.hl-in .hlr-rw__aside{--hlr-sweep:360deg}
html.hl-on .hl--rewind.hl-done .hlr-rw__clock{opacity:0;transition:opacity .8s ease}
html.hl-on .hl--rewind.hl-done .hlr-rw__aside{-webkit-mask:none;mask:none}

/* ---------- 16 · .iqbrv · the order spike ---------- */
html.hl-on .hl--spike h2{position:relative}
.hlr-sk{position:absolute;display:block;width:0;pointer-events:none;z-index:2;transition:opacity .5s ease}
.hlr-sk__rod{position:absolute;left:-2px;top:0;bottom:6px;width:4px;z-index:3;background:linear-gradient(90deg,#9fb6d6,#eef3fb 45%,#7d93b5);clip-path:polygon(50% 0,100% 7px,100% 100%,0 100%,0 7px);transform-origin:50% 100%;scale:1 0}
.hlr-sk__base{position:absolute;left:calc(var(--D, 70px) * -.42);bottom:0;width:calc(var(--D, 70px) * .84);height:9px;border-radius:5px;background:linear-gradient(180deg,#61779c,#1e3450);box-shadow:0 6px 10px -6px rgba(0,0,0,.6);opacity:0}
.hlr-sk__dk{position:absolute;left:calc(var(--D, 70px) * -.5);bottom:calc(9px + var(--i) * 5px);width:var(--D, 70px);height:calc(var(--D, 70px) * .6);border-radius:2px;opacity:0;rotate:var(--rot);translate:var(--dx) 0;
  background:#fff repeating-linear-gradient(180deg,transparent 0 8px,rgba(91,110,174,.2) 8px 9px);box-shadow:0 1px 0 rgba(0,0,0,.05),0 8px 14px -8px rgba(0,0,0,.6)}
.hlr-sk__dk::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:rgba(233,201,138,.55)}
.hlr-sk__dk::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#1e3450}
html.hl-on .hl--spike.hl-in .hlr-sk__rod{scale:1 1;transition:scale .5s var(--hl-soft) .12s}
html.hl-on .hl--spike.hl-in .hlr-sk__base{opacity:1;transition:opacity .3s ease .1s}
html.hl-on .hl--spike.hl-in .hlr-sk__dk{animation:hlrSkSlam .45s cubic-bezier(.6,0,.6,1) calc(1.12s + (var(--i) - 1) * .3s) forwards}
html.hl-on .hl--spike.hl-in .hlr-sk__dk:first-of-type{animation:hlrSkPress .6s cubic-bezier(.4,0,.4,1) .42s forwards}
@keyframes hlrSkSlam{0%{opacity:0;translate:var(--dx) calc(var(--D, 70px) * -1.8)}30%{opacity:1}68%{translate:var(--dx) 3px;scale:1.03 .93}84%{translate:var(--dx) -2px;scale:1}100%{opacity:1;translate:var(--dx) 0;scale:1}}
@keyframes hlrSkPress{0%{opacity:0;translate:var(--dx) calc(var(--D, 70px) * -1.2)}35%{opacity:1}80%{translate:var(--dx) 2px}100%{opacity:1;translate:var(--dx) 0}}
html.hl-on .hl--spike .hlr-sk__one{opacity:0;scale:1.07;transition:opacity .3s ease .78s,scale .45s var(--hl-spring) .78s}
html.hl-on .hl--spike.hl-in .hlr-sk__one{opacity:1;scale:1}
html.hl-on .hl--spike .hlr-sk__all{opacity:0}
html.hl-on .hl--spike.hl-in .hlr-sk__all{animation:hlrSkWord .5s cubic-bezier(.3,.9,.3,1.1) calc(1.38s + var(--i) * .3s) forwards}
@keyframes hlrSkWord{0%{opacity:0;translate:0 -.32em;scale:1.1}55%{opacity:1;translate:0 .03em;scale:.98}100%{opacity:1;translate:0 0;scale:1}}
html.hl-on .hl--spike.hl-done:not(.hlr-sk--rest) .hlr-sk{opacity:0}
html.hl-on .hl--spike .hlr-sk__eb{clip-path:inset(-30% 100% -30% 0);transition:clip-path .9s steps(22,end) .05s}
html.hl-on .hl--spike.hl-in .hlr-sk__eb{clip-path:inset(-30% calc(100% - var(--ebw, 100%) - 6px) -30% 0)}
html.hl-on .hl--spike .iqbrv__lede{clip-path:inset(0 0 100% 0);translate:0 -8px;transition:clip-path .8s var(--hl-soft) 2.55s,translate .8s var(--hl-spring) 2.55s}
html.hl-on .hl--spike.hl-in .iqbrv__lede{clip-path:inset(-6% -3% -6% -3%);translate:0 0}
html.hl-on .hl--spike.hl-done .hlr-sk__eb,html.hl-on .hl--spike.hl-done .iqbrv__lede{clip-path:none}

/* ---------- nothing hides, nothing moves, for people who asked for that (the script also stands down) ---------- */
@media (prefers-reduced-motion:reduce){
  .hl *,.hl *::before,.hl *::after{animation:none !important;transition:none !important}
}