/* codeiq-headlines.css · CodeIQ landing: one paper mechanism per section headline (built by
   codeiq-headlines.js from [data-hl] on top of the shared iq-headlines.js plumbing). Every hidden state is
   gated on html.hl-on, which the plumbing adds only when motion is allowed, so without JS or with reduced
   motion nothing here hides anything. Props are built by the script, so they only exist when it ran.
   Prefix hlc; one block per mechanism, in page order. */
.hl{--hlc-rose:#c4576a;--hlc-deep:#9a4455;--hlc-wash:#f5e8ea;--hlc-blush:#f2b8c2;--hlc-cover:#6e2f3b;
  --hlc-ruled:repeating-linear-gradient(180deg,transparent 0 27px,rgba(196,87,106,.14) 27px 28px);
  --hlc-lift:0 0 0 1px rgba(138,133,120,.22),0 14px 22px -16px rgba(20,30,45,.5)}
/* the eyebrows on this page are inline spans: transforms need a box */
.hl .eyebrow{display:inline-block}

/* ---------- 01 · #review-screen · the index tabs ---------- */
.hl--tabs h2{position:relative;z-index:0}
.hlc-tb__slip{position:relative;z-index:0}
.hlc-tb__slip::before{content:"";position:absolute;inset:.15em -.09em .03em;z-index:-1;border-radius:3px;background:#fff;box-shadow:var(--hlc-lift);transition:opacity .6s ease}
.hlc-tb__tab{position:absolute;left:.07em;top:.03em;width:min(1.3em,64%);height:.17em;z-index:-2;border-radius:.07em .07em 0 0;background:var(--tc,#c4576a);display:flex;align-items:center;justify-content:flex-end;padding-right:.05em;box-sizing:border-box;translate:0 .15em;
  transition:translate .55s var(--hl-spring) calc(var(--k) * 120ms + .62s),opacity .5s ease}
.hlc-tb__tab--em{background:var(--hlc-rose)}
.hlc-tb__tab svg{display:block;width:.13em;height:.11em;opacity:0;transition:opacity .2s ease calc(var(--k) * 120ms + 1s)}
html.hl-on .hl--tabs .hlc-tb__slip{opacity:0;translate:0 -.34em;rotate:var(--tilt);
  transition:opacity .18s ease calc(var(--k) * 120ms + .2s),translate .62s var(--hl-spring) calc(var(--k) * 120ms + .2s),rotate .62s var(--hl-spring) calc(var(--k) * 120ms + .2s)}
html.hl-on .hl--tabs.hl-in .hlc-tb__slip{opacity:1;translate:0 0;rotate:0deg}
.hl--tabs.hl-in .hlc-tb__tab{translate:0 -.07em}
.hl--tabs.hl-in .hlc-tb__tab svg{opacity:1}
.hl--tabs.hl-done .hlc-tb__slip::before,.hl--tabs.hl-done .hlc-tb__tab{opacity:0}
html.hl-on .hl--tabs .eyebrow{clip-path:inset(0 -4% 100% -4%);translate:0 100%;transition:clip-path .6s var(--hl-soft) .05s,translate .6s var(--hl-soft) .05s}
html.hl-on .hl--tabs.hl-in .eyebrow{clip-path:inset(-30% -4% -30% -4%);translate:0 0}
.hl--tabs.hl-done .eyebrow{clip-path:none}
.hlc-tb__lede{position:relative;z-index:0}
.hlc-tb__lede::before{content:"";position:absolute;inset:-12px -16px;z-index:-1;border-radius:3px;background:#fff var(--hlc-ruled);box-shadow:var(--hlc-lift);opacity:0;transition:opacity .4s ease 1.55s}
html.hl-on .hl--tabs .hlc-tb__lede{opacity:0;translate:-34px 0;rotate:-1.4deg;transition:opacity .3s ease 1.55s,translate .8s var(--hl-spring) 1.55s,rotate .8s var(--hl-spring) 1.55s}
html.hl-on .hl--tabs.hl-in .hlc-tb__lede{opacity:1;translate:0 0;rotate:0deg}
.hl--tabs.hl-in .hlc-tb__lede::before{opacity:1}
.hl--tabs.hl-done .hlc-tb__lede::before{opacity:0;transition:opacity .6s ease}

/* ---------- 02 · #demo-video · the hopper ---------- */
.hlc-hp__h2{position:relative;z-index:0}
.hlc-hp__funnel{position:absolute;z-index:-1;pointer-events:none;transform-origin:50% 100%;scale:1 0;opacity:0;transition:scale .65s var(--hl-spring) .05s,opacity .25s ease .05s}
.hlc-hp__funnel svg{display:block;width:100%;height:100%;filter:drop-shadow(0 14px 14px rgba(20,30,45,.14))}
.hlc-hp__spout{position:absolute;z-index:-1;border-radius:0 0 7px 7px;background:linear-gradient(180deg,#ece7de,#d6d0c3);box-shadow:0 0 0 1px rgba(138,133,120,.4);opacity:0;transition:opacity .3s ease .45s}
.hlc-hp__belt{position:absolute;height:10px;z-index:-1;border-radius:5px;background:repeating-linear-gradient(90deg,#3d3d3d 0 10px,#6b6b6b 10px 20px);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 7px 10px -6px rgba(20,30,45,.5);clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--hl-soft) .85s}
.hlc-hp__belt b{position:absolute;top:-3px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#f5f2ed 0 3px,#8a8578 3.5px 100%);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.hlc-hp__belt b:first-child{left:-7px}.hlc-hp__belt b:last-child{right:-7px}
.hl--hopper.hl-in .hlc-hp__funnel{scale:1 1;opacity:1}
.hl--hopper.hl-in .hlc-hp__spout{opacity:1}
.hl--hopper.hl-in .hlc-hp__belt{clip-path:inset(-8px -10px -8px -10px);animation:hlcBelt .45s linear .85s 5}
@keyframes hlcBelt{to{background-position:20px 0}}
html.hl-on .hl--hopper .hlc-hp__in{opacity:0}
html.hl-on .hl--hopper.hl-in .hlc-hp__in{animation:hlcTip 2.5s cubic-bezier(.3,.6,.3,1) calc(var(--o) * 110ms + .3s) both}
@keyframes hlcTip{0%{opacity:0;transform:translateY(-1.5em) rotate(calc(var(--tilt) * 2))}12%{opacity:1}32%{transform:translateY(.05em) rotate(var(--rest))}40%{transform:translateY(-.04em) rotate(var(--rest))}48%,74%{transform:translateY(0) rotate(var(--rest))}100%{opacity:1;transform:none}}
html.hl-on .hl--hopper .hlc-hp__out{opacity:0}
html.hl-on .hl--hopper.hl-in .hlc-hp__out{animation:hlcSpout .9s cubic-bezier(.2,.8,.3,1.1) calc(var(--o) * 150ms + 1.05s) both}
@keyframes hlcSpout{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}25%{opacity:1}100%{opacity:1;transform:none}}
.hl--hopper.hl-done .hlc-hp__funnel,.hl--hopper.hl-done .hlc-hp__spout,.hl--hopper.hl-done .hlc-hp__belt{opacity:0;transition:opacity .6s ease}
html.hl-on .hl--hopper .eyebrow{opacity:0;scale:.25 1;transition:opacity .3s ease,scale .7s var(--hl-spring)}
html.hl-on .hl--hopper.hl-in .eyebrow{opacity:1;scale:1 1}
html.hl-on .hl--hopper .hlc-hp__lede{opacity:0;translate:-70px 0;transition:opacity .4s ease 1.9s,translate 1s cubic-bezier(.25,.6,.3,1) 1.9s}
html.hl-on .hl--hopper.hl-in .hlc-hp__lede{opacity:1;translate:0 0}

/* ---------- 03 · #phases · the punch card ---------- */
@property --hlc-pp{syntax:'<percentage>';inherits:false;initial-value:100%}
@property --hlc-gap{syntax:'<length>';inherits:false;initial-value:0px}
.hlc-pc__bed{position:relative;z-index:0}
.hlc-pc__card{position:absolute;inset:-16px -22px -14px;z-index:-1;pointer-events:none;filter:drop-shadow(0 0 1px rgba(168,118,46,.35)) drop-shadow(0 16px 16px rgba(20,30,45,.16));opacity:0;translate:0 26px;transition:opacity .35s ease .05s,translate .7s var(--hl-spring) .05s}
.hlc-pc__face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;padding:8px 16px;overflow:hidden;border-radius:4px;background:#f6eedb;clip-path:polygon(30px 0,100% 0,100% 100%,0 100%,0 30px)}
.hlc-pc__face b{display:block;font:500 9px/1 var(--mono);letter-spacing:.95em;color:rgba(126,90,34,.3);white-space:nowrap;overflow:hidden}
.hl--punch.hl-in .hlc-pc__card{opacity:1;translate:0 0}
.hl--punch.hl-done .hlc-pc__card{opacity:0;transition:opacity .8s ease}
.hlc-pc__head{position:absolute;left:6.25%;top:-34px;width:22px;height:36px;margin-left:-11px;z-index:2;pointer-events:none;opacity:0}
.hlc-pc__head::before{content:"";position:absolute;left:2px;right:2px;top:0;height:22px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#4a4a4a,#1a1a1a);box-shadow:0 3px 5px -2px rgba(0,0,0,.4)}
.hlc-pc__head b{position:absolute;left:8px;right:8px;top:20px;height:14px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#6b6b6b,#9a968c,#6b6b6b)}
.hlc-pc__head::after{content:"";position:absolute;left:8px;top:34px;width:6px;height:9px;border-radius:1px;background:#f6eedb;box-shadow:0 0 0 1px rgba(126,90,34,.35);opacity:0}
.hl--punch.hl-in .hlc-pc__head{animation:hlcHeadX 1.8s steps(8,jump-none) .55s both,hlcHeadFade 2.3s linear .5s both}
@keyframes hlcHeadX{from{left:6.25%}to{left:93.75%}}
.hl--punch.hl-done .hlc-pc__head{display:none}
@keyframes hlcHeadFade{0%{opacity:0}4%,90%{opacity:1}100%{opacity:0}}
.hl--punch.hl-in .hlc-pc__head b{animation:hlcThunk .225s ease-in-out .55s 8}
.hl--punch.hl-in .hlc-pc__head::after{animation:hlcChad .225s ease-in .55s 8}
@keyframes hlcThunk{0%,100%{translate:0 0}45%{translate:0 11px}}
@keyframes hlcChad{0%,40%{opacity:0;translate:0 0;rotate:0deg}50%{opacity:1}100%{opacity:0;translate:-3px 34px;rotate:50deg}}
html.hl-on .hl--punch .hlc-pc__h2{--hlc-pp:0%;--hlc-gap:7px;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--hlc-pp),transparent var(--hlc-pp)),repeating-linear-gradient(90deg,#000 0 calc(12px - var(--hlc-gap)),transparent calc(12px - var(--hlc-gap)) 12px),repeating-linear-gradient(180deg,#000 0 calc(19px - var(--hlc-gap)),transparent calc(19px - var(--hlc-gap)) 19px);
  mask-image:linear-gradient(90deg,#000 var(--hlc-pp),transparent var(--hlc-pp)),repeating-linear-gradient(90deg,#000 0 calc(12px - var(--hlc-gap)),transparent calc(12px - var(--hlc-gap)) 12px),repeating-linear-gradient(180deg,#000 0 calc(19px - var(--hlc-gap)),transparent calc(19px - var(--hlc-gap)) 19px);
  mask-composite:intersect;transition:--hlc-gap .7s var(--hl-soft) 2.45s}
html.hl-on .hl--punch.hl-in .hlc-pc__h2{--hlc-gap:0px;animation:hlcPunchP 1.8s steps(8,start) .55s both}
@keyframes hlcPunchP{from{--hlc-pp:0%}to{--hlc-pp:100%}}
.hl--punch.hl-done .hlc-pc__h2{-webkit-mask-image:none;mask-image:none}
html.hl-on .hl--punch .hlc-pc__eb{clip-path:inset(-30% 100% -30% 0)}
html.hl-on .hl--punch.hl-in .hlc-pc__eb{clip-path:inset(-30% -2% -30% 0);transition:clip-path .95s steps(var(--n,24),end) .15s}
.hl--punch.hl-done .hlc-pc__eb{clip-path:none}
html.hl-on .hl--punch .hlc-pc__lede{clip-path:inset(0 -2% 100% -2%);translate:0 -12px}
html.hl-on .hl--punch.hl-in .hlc-pc__lede{clip-path:inset(-10% -2% -10% -2%);translate:0 0;transition:clip-path .9s steps(4,end) 2.35s,translate .9s steps(4,end) 2.35s}
.hl--punch.hl-done .hlc-pc__lede{clip-path:none}

/* ---------- 04 · #the-line · the train ---------- */
.hlc-tr__h2{position:relative;z-index:0}
.hlc-tr__track,.hlc-tr__line::after{background:linear-gradient(#8a8578,#8a8578) 0 2px/100% 2px no-repeat,linear-gradient(#8a8578,#8a8578) 0 8px/100% 2px no-repeat,repeating-linear-gradient(90deg,#c9b38a 0 5px,transparent 5px 16px)}
.hlc-tr__track{position:absolute;height:12px;z-index:-1;pointer-events:none;transform-origin:0 50%;scale:0 1}
.hl--train.hl-in .hlc-tr__track{scale:1 1;transition:scale var(--td,1.2s) linear var(--ts,.5s)}
.hl--train.hl-done .hlc-tr__track,.hl--train.hl-done .hlc-tr__line{opacity:0;transition:opacity .8s ease}
.hlc-tr__loco{position:absolute;left:0;z-index:2;opacity:0;pointer-events:none;translate:var(--x0) 0}
.hlc-tr__loco svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px rgba(20,30,45,.3))}
.hlc-tr__loco b{position:absolute;left:20%;top:-10%;width:22%;aspect-ratio:1;border-radius:50%;background:rgba(237,234,228,.96);box-shadow:0 0 0 1px rgba(138,133,120,.25);opacity:0}
.hl--train.hl-in .hlc-tr__loco{animation:hlcLoco 1.45s linear .3s both}
@keyframes hlcLoco{0%{opacity:0;translate:var(--x0) 0}6%{opacity:1}88%{opacity:1}100%{opacity:0;translate:var(--x1) 0}}
.hl--train.hl-in .hlc-tr__loco b{animation:hlcPuff .7s ease-out .4s 2}
.hl--train.hl-in .hlc-tr__loco b:nth-of-type(2){animation-delay:.62s}
.hl--train.hl-in .hlc-tr__loco b:nth-of-type(3){animation-delay:.84s}
@keyframes hlcPuff{0%{opacity:0;translate:0 0;scale:.4}20%{opacity:.95}100%{opacity:0;translate:-180% -220%;scale:1.8}}
.hlc-tr__car{position:relative}
.hlc-tr__car::after{content:"";position:absolute;left:.05em;right:.05em;bottom:.01em;height:.11em;pointer-events:none;
  background:radial-gradient(circle at 16% 72%,#1a1a1a 0 .034em,transparent .038em),radial-gradient(circle at 84% 72%,#1a1a1a 0 .034em,transparent .038em),linear-gradient(var(--hlc-deep),var(--hlc-deep)) 0 0/100% .04em no-repeat;transition:opacity .6s ease}
html.hl-on .hl--train .hlc-tr__car{opacity:0;translate:-1.1em 0;transition:opacity .2s ease var(--d),translate .95s cubic-bezier(.2,.75,.3,1.12) var(--d)}
html.hl-on .hl--train.hl-in .hlc-tr__car{opacity:1;translate:0 0}
.hl--train.hl-done .hlc-tr__car::after{opacity:0}
.hlc-tr__line{position:absolute;height:12px;z-index:-1;pointer-events:none}
.hlc-tr__line::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:1px;background:#6b6b6b;opacity:.7;transform-origin:0 50%;scale:0 1}
.hlc-tr__line::after{content:"";position:absolute;inset:0;opacity:0}
.hl--train.hl-in .hlc-tr__line::before{scale:1 1;transition:scale var(--pd) linear var(--ps),opacity .4s ease calc(var(--ps) + var(--pd) + .1s);opacity:0}
.hl--train.hl-in .hlc-tr__line::after{opacity:1;transition:opacity .5s ease calc(var(--ps) + var(--pd) + .05s)}
.hlc-tr__pencil{position:absolute;left:0;z-index:3;opacity:0;pointer-events:none;translate:var(--x0) 0;filter:drop-shadow(2px 5px 4px rgba(20,30,45,.3))}
.hlc-tr__pencil svg{display:block;width:100%;height:100%}
.hl--train.hl-in .hlc-tr__pencil{animation:hlcPencil var(--pd) linear var(--ps) both}
@keyframes hlcPencil{0%{opacity:0;translate:var(--x0) -6px}8%{opacity:1;translate:var(--x0) 0}20%{translate:calc(var(--x0) + (var(--x1) - var(--x0)) * .2) -2px}40%{translate:calc(var(--x0) + (var(--x1) - var(--x0)) * .4) 0}60%{translate:calc(var(--x0) + (var(--x1) - var(--x0)) * .6) -2px}80%{translate:calc(var(--x0) + (var(--x1) - var(--x0)) * .8) 0}92%{opacity:1}100%{opacity:0;translate:var(--x1) -10px}}
html.hl-on .hl--train .hlc-tr__drawn{clip-path:inset(-25% 100% -25% -3%);color:#a39e93;transition:clip-path .4s linear var(--d),color .9s ease calc(var(--d) + .4s)}
html.hl-on .hl--train.hl-in .hlc-tr__drawn{clip-path:inset(-25% -6% -25% -3%);color:inherit}
.hl--train.hl-done .hlc-tr__drawn{clip-path:none}
html.hl-on .hl--train .eyebrow{opacity:0;translate:-38px 0;transition:opacity .3s ease .1s,translate .8s cubic-bezier(.2,.8,.3,1.25) .1s}
html.hl-on .hl--train.hl-in .eyebrow{opacity:1;translate:0 0}
html.hl-on .hl--train .hlc-tr__lede{opacity:0;translate:-44px 0;transition:opacity .5s ease 2.35s,translate .9s var(--hl-soft) 2.35s}
html.hl-on .hl--train.hl-in .hlc-tr__lede{opacity:1;translate:0 0}

/* ---------- 05 · #roi · the cash register ---------- */
.hlc-tl__key{position:relative;z-index:0}
.hlc-tl__key::before{content:"";position:absolute;inset:.17em -.08em .05em;z-index:-1;border-radius:.09em;background:linear-gradient(180deg,#fff,#f1ece3);box-shadow:0 .05em 0 #d6cebf,0 .08em .12em -.04em rgba(20,30,45,.45),0 0 0 1px rgba(138,133,120,.22);transition:opacity .6s ease}
html.hl-on .hl--till .hlc-tl__key{opacity:0}
html.hl-on .hl--till.hl-in .hlc-tl__key{animation:hlcKey .5s ease calc(var(--o) * 140ms + .15s) both}
@keyframes hlcKey{0%{opacity:0;transform:translateY(-.12em)}25%{opacity:1;transform:translateY(-.02em)}45%{transform:translateY(.05em)}70%{transform:translateY(-.015em)}100%{opacity:1;transform:none}}
.hl--till.hl-done .hlc-tl__key::before{opacity:0}
.hlc-tl__win{display:inline-block;clip-path:inset(-.12em -.14em -.02em -.14em)}
.hlc-tl__flag{position:relative;z-index:0}
.hlc-tl__flag::before{content:"";position:absolute;inset:.13em -.08em -.08em;z-index:-1;border-radius:.06em .06em 0 0;background:linear-gradient(180deg,var(--hlc-rose) 0 .07em,#fff .07em);box-shadow:0 0 0 1px rgba(138,133,120,.22);transition:opacity .6s ease}
html.hl-on .hl--till .hlc-tl__flag{translate:0 108%}
html.hl-on .hl--till.hl-in .hlc-tl__flag{translate:0 0;transition:translate .7s cubic-bezier(.25,1.55,.4,1) calc(var(--ko) * 140ms + var(--o) * 170ms + .45s)}
.hl--till.hl-done .hlc-tl__flag::before{opacity:0}
.hl--till.hl-done .hlc-tl__win{clip-path:none}
.hlc-tl__ebwin{display:inline-block;clip-path:inset(-40% -4% 0 -4%)}
html.hl-on .hl--till .hlc-tl__ebwin .eyebrow{translate:0 110%;transition:translate .6s cubic-bezier(.25,1.5,.4,1) .05s}
html.hl-on .hl--till.hl-in .hlc-tl__ebwin .eyebrow{translate:0 0}
.hl--till.hl-done .hlc-tl__ebwin{clip-path:none}
.hlc-tl__drawer{position:relative}
.hlc-tl__drawer::after{content:"";position:absolute;left:-12px;right:-12px;bottom:-14px;height:5px;border-radius:3px;background:var(--hlc-deep);box-shadow:0 4px 8px -4px rgba(20,30,45,.5);opacity:0}
.hlc-tl__drawer::before{content:"";position:absolute;left:50%;bottom:-24px;width:44px;height:8px;margin-left:-22px;border-radius:0 0 6px 6px;background:var(--hlc-rose);opacity:0}
html.hl-on .hl--till .hlc-tl__drawer{clip-path:inset(100% -14px -30px -14px);translate:0 -40px}
html.hl-on .hl--till.hl-in .hlc-tl__drawer{clip-path:inset(-10% -14px -30px -14px);translate:0 0;transition:clip-path .6s cubic-bezier(.3,1.5,.5,1) 1.6s,translate .6s cubic-bezier(.3,1.5,.5,1) 1.6s}
.hl--till.hl-in .hlc-tl__drawer::after,.hl--till.hl-in .hlc-tl__drawer::before{opacity:1;transition:opacity .2s ease 1.6s}
.hl--till.hl-done .hlc-tl__drawer{clip-path:none}
.hl--till.hl-done .hlc-tl__drawer::after,.hl--till.hl-done .hlc-tl__drawer::before{opacity:0;transition:opacity .6s ease}

/* ---------- 06 · #riq-integration · rack and pinion ---------- */
.hlc-rk__h2{position:relative;z-index:0}
.hlc-rk__rack{position:absolute;height:10px;z-index:-1;pointer-events:none;border-radius:2px;transform-origin:0 50%;scale:0 1;transition:scale .55s var(--hl-soft) .1s;
  background:linear-gradient(var(--hlc-deep),var(--hlc-deep)) 0 100%/100% 5px no-repeat,repeating-linear-gradient(90deg,var(--hlc-rose) 0 5px,transparent 5px 9.4px) 0 0/100% 5px no-repeat}
.hl--rack.hl-in .hlc-rk__rack{scale:1 1}
.hl--rack.hl-done .hlc-rk__rack{opacity:0;transition:opacity .7s ease}
.hlc-rk__gear{position:absolute;left:0;z-index:1;pointer-events:none;opacity:0;translate:var(--x0) 0}
.hlc-rk__gear svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(20,30,45,.3))}
.hl--rack.hl-in .hlc-rk__gear{animation:hlcGear 1.7s linear .5s both}
@keyframes hlcGear{0%{opacity:0;translate:var(--x0) 0;rotate:0deg}7%{opacity:1}93%{opacity:1}100%{opacity:0;translate:var(--x1) 0;rotate:var(--turn)}}
html.hl-on .hl--rack .hlc-rk__w{opacity:0;translate:0 .42em;rotate:var(--tilt);transform-origin:0 100%;transition:opacity .25s ease var(--d),translate .65s var(--hl-spring) var(--d),rotate .65s var(--hl-spring) var(--d)}
html.hl-on .hl--rack.hl-in .hlc-rk__w{opacity:1;translate:0 0;rotate:0deg}
html.hl-on .hl--rack .hlc-rk__eb{opacity:0;rotate:-9deg;translate:-8px 6px;transform-origin:0 100%;transition:opacity .3s ease .1s,rotate .6s var(--hl-spring) .1s,translate .6s var(--hl-spring) .1s}
html.hl-on .hl--rack.hl-in .hlc-rk__eb{opacity:1;rotate:0deg;translate:0 0}
html.hl-on .hl--rack .hlc-rk__lede{opacity:0;translate:-46px 0;transition:opacity .4s ease 1.95s,translate .8s cubic-bezier(.2,.8,.3,1) 1.95s}
html.hl-on .hl--rack.hl-in .hlc-rk__lede{opacity:1;translate:0 0}

/* ---------- 07 · #comparison · the margin ---------- */
.hlc-mg__host{position:relative;z-index:0}
.hlc-mg__lines{position:absolute;inset:-14px -18px;z-index:-1;pointer-events:none;background:var(--hlc-ruled);clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--hl-soft) .05s}
.hl--margin.hl-in .hlc-mg__lines{clip-path:inset(0 0 0 0)}
.hl--margin.hl-done .hlc-mg__lines{opacity:0;transition:opacity .8s ease}
.hlc-mg__h2{position:relative}
.hlc-mg__rule{position:absolute;z-index:1;pointer-events:none;transform-origin:50% 0;scale:1 0;transition:scale .5s var(--hl-soft) .35s}
.hlc-mg__rule svg{display:block;width:100%;height:100%;overflow:visible}
.hlc-mg__rule path{fill:none;stroke:var(--hlc-rose);stroke-width:1.8;vector-effect:non-scaling-stroke}
.hlc-mg__rule .hlc-mg__b{stroke-width:1.1;opacity:.75}
.hl--margin.hl-in .hlc-mg__rule{scale:1 1}
.hl--margin.hl-in .hlc-mg__a{animation:hlcKinkA 1.05s cubic-bezier(.3,.7,.3,1) 1.05s both}
.hl--margin.hl-in .hlc-mg__b{animation:hlcKinkB 1.05s cubic-bezier(.3,.7,.3,1) 1.05s both}
@keyframes hlcKinkA{0%{d:path("M3 0 Q3 50 3 100")}30%{d:path("M3 0 Q13 50 3 100")}55%{d:path("M3 0 Q-1.5 50 3 100")}76%{d:path("M3 0 Q4.6 50 3 100")}100%{d:path("M3 0 Q3 50 3 100")}}
@keyframes hlcKinkB{0%{d:path("M7 0 Q7 50 7 100")}30%{d:path("M7 0 Q17 50 7 100")}55%{d:path("M7 0 Q2.5 50 7 100")}76%{d:path("M7 0 Q8.6 50 7 100")}100%{d:path("M7 0 Q7 50 7 100")}}
.hl--margin.hl-done .hlc-mg__rule{opacity:0;transition:opacity .7s ease}
.hlc-mg__win{clip-path:inset(-40% -40% -40% var(--cl,0px))}
html.hl-on .hl--margin .hlc-mg__out{translate:var(--sx) 0;transition:translate .8s cubic-bezier(.2,.75,.3,1.1) 1.05s}
html.hl-on .hl--margin.hl-in .hlc-mg__out{translate:0 0}
.hl--margin.hl-done .hlc-mg__win{clip-path:none}
html.hl-on .hl--margin .hlc-mg__in{opacity:0;translate:0 -.2em;transition:opacity .3s ease calc(var(--k) * 90ms + .5s),translate .55s var(--hl-spring) calc(var(--k) * 90ms + .5s)}
html.hl-on .hl--margin.hl-in .hlc-mg__in{opacity:1;translate:0 0}
html.hl-on .hl--margin .hlc-mg__eb{opacity:0;translate:0 -14px;transition:opacity .3s ease .25s,translate .55s cubic-bezier(.3,1.6,.5,1) .25s}
html.hl-on .hl--margin.hl-in .hlc-mg__eb{opacity:1;translate:0 0}
html.hl-on .hl--margin .hlc-mg__lede{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;transition:mask-position 1.1s cubic-bezier(.4,.1,.4,1) 1.65s,-webkit-mask-position 1.1s cubic-bezier(.4,.1,.4,1) 1.65s}
html.hl-on .hl--margin.hl-in .hlc-mg__lede{-webkit-mask-position:0 0;mask-position:0 0}
.hl--margin.hl-done .hlc-mg__lede{-webkit-mask-image:none;mask-image:none}

/* ---------- 08 · objections · the speech balloon ---------- */
.hlc-bl__bed{position:relative;z-index:0}
.hlc-bl__ball{position:absolute;z-index:-1;pointer-events:none;border-radius:28px;background:#fff;box-shadow:var(--hlc-lift);transform-origin:5% 100%;scale:0;opacity:0;transition:scale .6s cubic-bezier(.3,1.5,.45,1) .55s,opacity .15s ease .55s}
.hlc-bl__ball::after{content:"";position:absolute;left:26px;bottom:-17px;width:32px;height:20px;background:#fff;clip-path:polygon(0 0,100% 0,6% 100%)}
.hl--balloon.hl-in .hlc-bl__ball{scale:1;opacity:1}
.hlc-bl__dots{position:absolute;left:30px;top:50%;display:flex;gap:9px;translate:0 -50%;opacity:0}
.hlc-bl__dots b{display:block;width:13px;height:13px;border-radius:50%;background:var(--hlc-rose)}
.hl--balloon.hl-in .hlc-bl__dots{animation:hlcDotsLife 1.2s ease 1s both}
@keyframes hlcDotsLife{0%{opacity:0}10%,78%{opacity:1;scale:1}100%{opacity:0;scale:.5}}
.hl--balloon.hl-in .hlc-bl__dots b{animation:hlcDot .42s ease-in-out 1.05s 2}
.hl--balloon.hl-in .hlc-bl__dots b:nth-child(2){animation-delay:1.15s}
.hl--balloon.hl-in .hlc-bl__dots b:nth-child(3){animation-delay:1.25s}
@keyframes hlcDot{0%,100%{translate:0 0;opacity:.55}50%{translate:0 -11px;opacity:1}}
.hlc-bl__puffs{position:absolute;width:0;height:0;z-index:-1;pointer-events:none}
.hlc-bl__puffs b{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(138,133,120,.25),0 6px 10px -6px rgba(20,30,45,.4);scale:0;transition:scale .35s cubic-bezier(.3,1.7,.45,1),opacity .6s ease}
.hlc-bl__puffs b:nth-child(1){width:9px;height:9px;left:-16px;top:34px;transition-delay:.1s}
.hlc-bl__puffs b:nth-child(2){width:14px;height:14px;left:-4px;top:16px;transition-delay:.24s}
.hlc-bl__puffs b:nth-child(3){width:21px;height:21px;left:12px;top:-4px;transition-delay:.38s}
.hl--balloon.hl-in .hlc-bl__puffs b{scale:1}
.hl--balloon.hl-done .hlc-bl__ball,.hl--balloon.hl-done .hlc-bl__puffs b{opacity:0;transition:opacity .7s ease}
html.hl-on .hl--balloon .hlc-bl__w{opacity:0;scale:.45;transition:opacity .2s ease calc(var(--k) * 80ms + 1.75s),scale .5s cubic-bezier(.3,1.6,.45,1) calc(var(--k) * 80ms + 1.75s)}
html.hl-on .hl--balloon.hl-in .hlc-bl__w{opacity:1;scale:1}
.hlc-bl__reply{position:relative;z-index:0}
.hlc-bl__reply::before{content:"";position:absolute;inset:-12px -18px;z-index:-1;border-radius:18px;background:var(--hlc-wash);box-shadow:0 0 0 1px rgba(196,87,106,.16);transform-origin:96% 100%;scale:0;transition:scale .5s cubic-bezier(.3,1.5,.45,1) 2.15s,opacity .7s ease}
.hlc-bl__reply::after{content:"";position:absolute;right:30px;bottom:-27px;width:24px;height:16px;background:var(--hlc-wash);clip-path:polygon(0 0,100% 0,92% 100%);transform-origin:50% 0;scale:0;transition:scale .3s ease 2.45s,opacity .7s ease}
html.hl-on .hl--balloon .hlc-bl__reply > *{opacity:0;transition:opacity .45s ease 2.35s}
html.hl-on .hl--balloon.hl-in .hlc-bl__reply > *{opacity:1}
.hl--balloon.hl-in .hlc-bl__reply::before,.hl--balloon.hl-in .hlc-bl__reply::after{scale:1}
.hl--balloon.hl-done .hlc-bl__reply::before,.hl--balloon.hl-done .hlc-bl__reply::after{opacity:0}
html.hl-on .hl--balloon .eyebrow{opacity:0;scale:.6;transform-origin:0 100%;transition:opacity .25s ease .05s,scale .5s cubic-bezier(.3,1.7,.45,1) .05s}
html.hl-on .hl--balloon.hl-in .eyebrow{opacity:1;scale:1}

/* ---------- 09 · #invoice-ocr · drag, drop, scan ---------- */
.hlc-sc__h2{position:relative;z-index:0}
.hlc-sc__drag{position:relative}
.hlc-sc__cursor{position:absolute;right:-.16em;bottom:-.04em;width:max(.24em,14px);aspect-ratio:24/30;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(20,30,45,.35));transition:opacity .3s ease 1s,translate .5s ease 1s}
.hlc-sc__cursor svg{display:block;width:100%;height:100%}
html.hl-on .hl--scan .hlc-sc__drag{opacity:0;translate:-1.6em .25em;transition:opacity .2s ease .1s,translate .85s cubic-bezier(.25,.8,.3,1) .1s}
html.hl-on .hl--scan.hl-in .hlc-sc__drag{opacity:1;translate:0 0}
.hl--scan.hl-in .hlc-sc__cursor{opacity:0;translate:.4em .3em}
.hlc-sc__drop{position:relative}
.hlc-sc__drop::before{content:"";position:absolute;inset:.14em -.1em .03em;border:2px dashed rgba(138,133,120,.75);border-radius:.07em;opacity:0;pointer-events:none;
  transition:opacity .2s ease calc(var(--o) * 180ms + .55s),border-color .2s ease calc(var(--o) * 180ms + 1.12s),background-color .3s ease calc(var(--o) * 180ms + 1.12s)}
.hl--scan.hl-in .hlc-sc__drop::before{opacity:1;border-color:var(--hlc-rose);background-color:rgba(196,87,106,.08)}
.hl--scan.hl-done .hlc-sc__drop::before{opacity:0;transition:opacity .6s ease}
html.hl-on .hl--scan .hlc-sc__drop .hl-c{opacity:0;translate:0 -.75em;transition:opacity .12s ease calc(var(--o) * 180ms + .82s),translate .42s cubic-bezier(.45,0,.6,1.45) calc(var(--o) * 180ms + .82s)}
html.hl-on .hl--scan.hl-in .hlc-sc__drop .hl-c{opacity:1;translate:0 0}
.hlc-sc__read .hl-c{position:relative}
html.hl-on .hl--scan .hlc-sc__read .hl-c{color:transparent;transition:color .12s linear var(--t)}
html.hl-on .hl--scan.hl-in .hlc-sc__read .hl-c{color:inherit}
.hlc-sc__read .hl-c::after{content:attr(data-g);position:absolute;left:0;right:0;top:0;text-align:center;color:var(--hlc-deep);font-family:var(--mono);font-style:normal;font-weight:500;font-size:.6em;line-height:1.75;opacity:0;pointer-events:none}
.hl--scan.hl-in .hlc-sc__read .hl-c::after{animation:hlcNoise var(--life,.5s) linear 1.05s both,hlcFlick .2s steps(1,end) 1.05s infinite}
@keyframes hlcNoise{0%{opacity:0}8%,88%{opacity:.85}100%{opacity:0}}
@keyframes hlcFlick{0%{content:attr(data-g);translate:0 0}50%{content:attr(data-h);translate:.04em -.03em}}
.hl--scan.hl-done .hlc-sc__read .hl-c::after{content:none;animation:none}
.hlc-sc__bar{position:absolute;left:0;width:4px;z-index:3;border-radius:2px;background:var(--hlc-rose);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 18px 5px rgba(196,87,106,.4);opacity:0;pointer-events:none}
.hlc-sc__bar::before{content:"";position:absolute;right:4px;top:0;bottom:0;width:64px;background:linear-gradient(90deg,transparent,rgba(196,87,106,.15))}
.hl--scan.hl-in .hlc-sc__bar{animation:hlcBar 1.05s linear 1.35s both}
@keyframes hlcBar{0%{opacity:0;translate:0 0}8%,92%{opacity:1}100%{opacity:0;translate:var(--bw) 0}}
.hlc-sc__eb{position:relative}
.hlc-sc__eb::after{content:"";position:absolute;inset:-5px -8px;border:1.5px dashed var(--hlc-rose);border-radius:3px;opacity:0;scale:1.2;pointer-events:none}
.hl--scan.hl-in .hlc-sc__eb::after{animation:hlcDetect 1.6s ease .05s both}
@keyframes hlcDetect{0%{opacity:0;scale:1.2}25%,75%{opacity:1;scale:1}100%{opacity:0;scale:1}}
html.hl-on .hl--scan .hlc-sc__eb{opacity:0;transition:opacity .4s ease .35s}
html.hl-on .hl--scan.hl-in .hlc-sc__eb{opacity:1}
.hlc-sc__lede{position:relative;z-index:0}
.hlc-sc__lede::before{content:"";position:absolute;inset:-5px -9px;z-index:-1;border-radius:3px;background:rgba(196,87,106,.13);transform-origin:0 50%;scale:0 1;pointer-events:none}
.hl--scan.hl-in .hlc-sc__lede::before{animation:hlcBand 1.4s cubic-bezier(.3,.7,.3,1) 2.15s both}
@keyframes hlcBand{0%{scale:0 1;opacity:1}42%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
html.hl-on .hl--scan .hlc-sc__lede{-webkit-text-fill-color:transparent;transition:-webkit-text-fill-color .5s ease 2.5s}
html.hl-on .hl--scan.hl-in .hlc-sc__lede{-webkit-text-fill-color:currentColor}

/* ---------- 10 · #concurrent-sessions · the lanes ---------- */
.hlc-ln__h2{position:relative;z-index:0}
.hlc-ln__lanes{position:absolute;z-index:-1;pointer-events:none}
.hlc-ln__lanes b{position:absolute;left:0;right:0;top:calc(var(--i) / (var(--n,10) - 1) * 100%);height:0;border-top:1.5px dashed rgba(196,87,106,.3);transform-origin:0 50%;scale:0 1;transition:scale .6s var(--hl-soft) calc(var(--i) * 35ms + .05s)}
.hl--lanes.hl-in .hlc-ln__lanes b{scale:1 1}
.hl--lanes.hl-done .hlc-ln__lanes{opacity:0;transition:opacity .8s ease}
html.hl-on .hl--lanes .hlc-ln__slow{opacity:0}
html.hl-on .hl--lanes.hl-in .hlc-ln__slow{animation:hlcPlod 1.3s linear .25s both}
@keyframes hlcPlod{0%{opacity:0;transform:translate(-1em,0)}10%{opacity:1}20%{transform:translate(-.82em,-.06em)}33%{transform:translate(-.66em,0)}47%{transform:translate(-.46em,-.06em)}60%{transform:translate(-.32em,0)}74%{transform:translate(-.14em,-.06em)}88%,100%{opacity:1;transform:none}}
html.hl-on .hl--lanes .hlc-ln__vs{opacity:0;scale:.3}
html.hl-on .hl--lanes.hl-in .hlc-ln__vs{opacity:1;scale:1;transition:opacity .15s ease 1.45s,scale .5s cubic-bezier(.3,1.8,.45,1) 1.45s}
.hlc-ln__fast{position:relative}
.hlc-ln__fast::before{content:"";position:absolute;right:100%;top:52%;width:2.6em;height:.05em;border-radius:.03em;background:linear-gradient(90deg,transparent,rgba(196,87,106,.6));transform-origin:100% 50%;opacity:0;pointer-events:none}
html.hl-on .hl--lanes .hlc-ln__fast{opacity:0}
html.hl-on .hl--lanes.hl-in .hlc-ln__fast{animation:hlcSprint .8s cubic-bezier(.1,.75,.2,1) calc(var(--o) * 55ms + 1.65s) both}
@keyframes hlcSprint{0%{opacity:0;transform:translate(var(--lx),var(--ly))}12%{opacity:1}55%{transform:translate(.05em,calc(var(--ly) * .04))}100%{opacity:1;transform:none}}
.hl--lanes.hl-in .hlc-ln__fast::before{animation:hlcStreak .95s ease-out calc(var(--o) * 55ms + 1.65s) both}
@keyframes hlcStreak{0%{opacity:0;scale:1.5 1}18%{opacity:1}100%{opacity:0;scale:.15 1}}
html.hl-on .hl--lanes .hlc-ln__eb{opacity:0;translate:-64px 0;filter:blur(4px);transition:opacity .25s ease .05s,translate .45s cubic-bezier(.1,.8,.2,1) .05s,filter .5s ease .05s}
html.hl-on .hl--lanes.hl-in .hlc-ln__eb{opacity:1;translate:0 0;filter:blur(0)}
.hl--lanes.hl-done .hlc-ln__eb{filter:none}
.hlc-ln__lede{position:relative}
.hlc-ln__lede::after{content:"";position:absolute;left:0;right:0;bottom:-10px;border-top:1.5px dashed rgba(196,87,106,.38);transform-origin:0 50%;scale:0 1;transition:scale .7s var(--hl-soft) 2.15s,opacity .7s ease;pointer-events:none}
html.hl-on .hl--lanes .hlc-ln__lede{opacity:0;translate:-56px 0;transition:opacity .4s ease 2.3s,translate .75s cubic-bezier(.15,.8,.25,1) 2.3s}
html.hl-on .hl--lanes.hl-in .hlc-ln__lede{opacity:1;translate:0 0}
.hl--lanes.hl-in .hlc-ln__lede::after{scale:1 1}
.hl--lanes.hl-done .hlc-ln__lede::after{opacity:0}

/* ---------- 11 · #merchant-accounts · the parcel labels ---------- */
.hlc-lb__h2{position:relative;z-index:0}
.hlc-lb__label{display:inline-block;position:relative;z-index:0;rotate:var(--rest,0deg);transition:rotate .6s var(--hl-soft)}
.hlc-lb__label::before{content:"";position:absolute;inset:.13em -.12em -.07em;z-index:-1;border-radius:.05em;background:#fff;box-shadow:var(--hlc-lift);transition:opacity .6s ease}
.hlc-lb__label::after{content:"";position:absolute;right:-.12em;top:.13em;width:.2em;height:.2em;background:linear-gradient(225deg,#f5f2ed 50%,#e4ded2 50%);transition:opacity .6s ease}
.hlc-lb__code{position:absolute;right:.04em;bottom:-.035em;width:.72em;height:.1em;pointer-events:none;opacity:.78;transition:opacity .6s ease;
  background:repeating-linear-gradient(90deg,#1a1a1a 0 2px,transparent 2px 3px,#1a1a1a 3px 4px,transparent 4px 7px,#1a1a1a 7px 10px,transparent 10px 11px,#1a1a1a 11px 12px,transparent 12px 15px)}
html.hl-on .hl--labels .hlc-lb__label{opacity:0}
html.hl-on .hl--labels.hl-in .hlc-lb__label{animation:hlcSlap .6s cubic-bezier(.3,.9,.4,1) calc(var(--i) * 280ms + .2s) both}
@keyframes hlcSlap{0%{opacity:0;transform:translateY(-.25em) scale(1.45) rotate(-9deg)}35%{opacity:1;transform:scale(.96) rotate(1deg)}65%{transform:scale(1.015)}100%{opacity:1;transform:none}}
.hl--labels.hl-done .hlc-lb__label{rotate:0deg}
.hl--labels.hl-done .hlc-lb__label::before,.hl--labels.hl-done .hlc-lb__label::after,.hl--labels.hl-done .hlc-lb__code{opacity:0}
html.hl-on .hl--labels .hlc-lb__print{opacity:0;filter:blur(3px);translate:0 .05em;transition:opacity .25s ease var(--d),filter .5s ease var(--d),translate .5s ease var(--d)}
html.hl-on .hl--labels.hl-in .hlc-lb__print{opacity:1;filter:blur(0);translate:0 0}
.hl--labels.hl-done .hlc-lb__print{filter:none}
.hlc-lb__beam{position:absolute;left:0;width:3px;z-index:3;border-radius:2px;background:#d23c4f;box-shadow:0 0 12px 3px rgba(210,60,79,.45);opacity:0;pointer-events:none;translate:var(--x0) 0}
.hl--labels.hl-in .hlc-lb__beam{animation:hlcBeam 1s linear var(--s,1.2s) both}
@keyframes hlcBeam{0%{opacity:0;translate:var(--x0) 0}10%,90%{opacity:1}100%{opacity:0;translate:var(--x1) 0}}
.hlc-lb__eb{position:relative}
.hlc-lb__eb::after{content:"";position:absolute;top:-3px;bottom:-3px;left:0;width:2px;background:#d23c4f;box-shadow:0 0 8px 2px rgba(210,60,79,.5);opacity:0;pointer-events:none}
html.hl-on .hl--labels .hlc-lb__eb{clip-path:inset(-30% 100% -30% -2%);transition:clip-path .55s linear .05s}
html.hl-on .hl--labels.hl-in .hlc-lb__eb{clip-path:inset(-30% -6px -30% -2%)}
.hl--labels.hl-in .hlc-lb__eb::after{animation:hlcEbBeam .55s linear .05s both}
@keyframes hlcEbBeam{0%{opacity:1;left:0}90%{opacity:1}100%{opacity:0;left:100%}}
.hl--labels.hl-done .hlc-lb__eb{clip-path:none}
.hlc-lb__slip{position:relative;z-index:0}
.hlc-lb__slip::before{content:"";position:absolute;inset:-10px -14px;z-index:-1;border-radius:3px;background:#fff var(--hlc-ruled);box-shadow:var(--hlc-lift);transition:opacity .6s ease}
html.hl-on .hl--labels .hlc-lb__slip{opacity:0;translate:0 28px;rotate:-2.5deg;transition:opacity .4s ease 2.25s,translate .8s var(--hl-spring) 2.25s,rotate .8s var(--hl-spring) 2.25s}
html.hl-on .hl--labels.hl-in .hlc-lb__slip{opacity:1;translate:0 0;rotate:0deg}
.hl--labels.hl-done .hlc-lb__slip::before{opacity:0}

/* ---------- 12 · #features · the proofreader ---------- */
.hlc-ct__h2{position:relative;z-index:0}
html.hl-on .hl--caret .hlc-ct__type{opacity:0;transition:opacity .01s linear calc(var(--t) * 45ms + .15s)}
html.hl-on .hl--caret.hl-in .hlc-ct__type{opacity:1}
.hlc-ct__strike{position:absolute;height:.05em;margin-top:-.025em;z-index:2;border-radius:.03em;background:var(--hlc-rose);transform-origin:0 50%;scale:0 1;rotate:-1.2deg;pointer-events:none;transition:scale .45s cubic-bezier(.5,0,.3,1) calc(var(--typed) + .2s),opacity .6s ease}
.hl--caret.hl-in .hlc-ct__strike{scale:1 1}
.hlc-ct__caret{position:absolute;z-index:2;transform-origin:50% 100%;scale:1 0;opacity:0;pointer-events:none;transition:scale .5s cubic-bezier(.3,1.8,.45,1) calc(var(--typed) + .65s),opacity .1s ease calc(var(--typed) + .65s)}
.hlc-ct__caret svg{display:block;width:100%;height:100%;overflow:visible}
.hl--caret.hl-in .hlc-ct__caret{scale:1 1;opacity:1}
.hl--caret.hl-done .hlc-ct__strike,.hl--caret.hl-done .hlc-ct__caret{opacity:0;transition:opacity .6s ease}
html.hl-on .hl--caret .hlc-ct__fix{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1);transition:opacity .2s ease calc(var(--typed) + var(--o) * 90ms + .95s),transform .65s cubic-bezier(.3,1.4,.45,1) calc(var(--typed) + var(--o) * 90ms + .95s)}
html.hl-on .hl--caret.hl-in .hlc-ct__fix{opacity:1;transform:none}
.hlc-ct__eb{position:relative}
.hlc-ct__eb::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:1px;background:var(--hlc-rose);transform-origin:0 50%;scale:0 1;transition:scale .5s var(--hl-soft) .25s,opacity .6s ease;pointer-events:none}
html.hl-on .hl--caret .hlc-ct__eb{opacity:0;transition:opacity .3s ease .05s}
html.hl-on .hl--caret.hl-in .hlc-ct__eb{opacity:1}
.hl--caret.hl-in .hlc-ct__eb::after{scale:1 1}
.hl--caret.hl-done .hlc-ct__eb::after{opacity:0}
.hlc-ct__note{position:relative}
.hlc-ct__note::before{content:"";position:absolute;left:-15px;top:3px;bottom:3px;width:7px;border:2px solid var(--hlc-rose);border-right:0;border-radius:4px 0 0 4px;transform-origin:50% 0;scale:1 0;pointer-events:none;transition:scale .5s var(--hl-soft) calc(var(--typed) + 1.4s),opacity .6s ease}
.hl--caret.hl-in .hlc-ct__note::before{scale:1 1}
.hl--caret.hl-done .hlc-ct__note::before{opacity:0}
html.hl-on .hl--caret .hlc-ct__note{opacity:0;translate:10px 0;rotate:-.9deg;transition:opacity .5s ease calc(var(--typed) + 1.55s),translate .7s var(--hl-soft) calc(var(--typed) + 1.55s),rotate .7s var(--hl-soft) calc(var(--typed) + 1.55s)}
html.hl-on .hl--caret.hl-in .hlc-ct__note{opacity:1;translate:0 0;rotate:0deg}

/* ---------- 13 · #mcp · the paper aeroplane ---------- */
.hlc-pl__host{position:relative;z-index:0}
.hlc-pl__sheet{position:absolute;inset:-24px -28px;z-index:-1;perspective:1500px;pointer-events:none}
.hlc-pl__wing{position:absolute;top:0;bottom:0;width:50%;backface-visibility:hidden;box-shadow:0 0 0 1px rgba(138,133,120,.2),0 22px 34px -24px rgba(20,30,45,.45);transition:transform 1.05s cubic-bezier(.3,1.15,.35,1) 1.45s,opacity .7s ease}
.hlc-pl__wing--l{left:0;transform-origin:100% 50%;border-radius:4px 0 0 4px;background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(138,133,120,.24) 50%,transparent calc(50% + 1px)),linear-gradient(90deg,#fff 70%,#f3efe8)}
.hlc-pl__wing--r{right:0;transform-origin:0 50%;border-radius:0 4px 4px 0;background:linear-gradient(to top left,transparent calc(50% - 1px),rgba(138,133,120,.24) 50%,transparent calc(50% + 1px)),linear-gradient(270deg,#fff 70%,#f3efe8)}
html.hl-on .hl--plane .hlc-pl__wing{opacity:0}
html.hl-on .hl--plane .hlc-pl__wing--l{transform:rotateY(89deg)}
html.hl-on .hl--plane .hlc-pl__wing--r{transform:rotateY(-89deg)}
html.hl-on .hl--plane.hl-in .hlc-pl__wing{transform:none;opacity:1;transition:transform 1.05s cubic-bezier(.3,1.15,.35,1) 1.45s,opacity .15s linear 1.45s}
html.hl-on .hl--plane.hl-done .hlc-pl__wing{opacity:0;transition:opacity .7s ease}
.hlc-pl__plane{position:absolute;left:0;top:0;z-index:3;aspect-ratio:64/40;offset-rotate:auto;offset-distance:0%;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(20,30,45,.25))}
.hlc-pl__plane svg{display:block;width:100%;height:100%}
.hl--plane.hl-in .hlc-pl__plane{animation:hlcFly 1.5s cubic-bezier(.35,.1,.3,1) .1s both}
@keyframes hlcFly{0%{offset-distance:0%;opacity:0}7%{opacity:1}88%{opacity:1;scale:1}100%{offset-distance:100%;opacity:0;scale:.55}}
html.hl-on .hl--plane .hlc-pl__w{opacity:0;translate:0 .12em;transition:opacity .35s ease calc(var(--k) * 60ms + 1.95s),translate .6s var(--hl-soft) calc(var(--k) * 60ms + 1.95s)}
html.hl-on .hl--plane.hl-in .hlc-pl__w{opacity:1;translate:0 0}
html.hl-on .hl--plane .hlc-pl__eb{opacity:0;translate:0 6px;transition:opacity .4s ease 1.8s,translate .6s var(--hl-soft) 1.8s}
html.hl-on .hl--plane.hl-in .hlc-pl__eb{opacity:1;translate:0 0}
html.hl-on .hl--plane .hlc-pl__lede{clip-path:inset(-10% 100% -10% 0);transition:clip-path 1s var(--hl-soft) 2.55s}
html.hl-on .hl--plane.hl-in .hlc-pl__lede{clip-path:inset(-10% -2% -10% 0)}
.hl--plane.hl-done .hlc-pl__lede{clip-path:none}
@media (max-width:640px){.hlc-pl__sheet{inset:-16px -14px}.hlc-pc__card{inset:-14px -14px -12px}.hlc-ds__card{inset:-16px -14px -14px}.hlc-ds__pocket::before{inset:-14px -14px -14px}.hlc-tb__lede::before,.hlc-lb__slip::before{inset:-10px -12px}}
@media (max-width:640px){@keyframes hlcHang{0%{opacity:0;transform:translateY(-22px) rotate(-2.5deg)}14%{opacity:1}40%{transform:translateY(3px) rotate(1.5deg)}62%{transform:translateY(-1px) rotate(-.7deg)}82%{transform:rotate(.25deg)}100%{opacity:1;transform:none}}}

/* ---------- 14 · #iq-suite-context · the paper chain ---------- */
.hlc-ch__host{position:relative}
.hlc-ch__chain{position:absolute;pointer-events:none;transition:opacity .8s ease}
.hlc-ch__chain svg{display:block;overflow:visible}
.hlc-ch__lk{opacity:0;transform-box:view-box}
.hl--chain.hl-in .hlc-ch__lk{animation:hlcLink .6s cubic-bezier(.3,1.45,.45,1) calc(var(--i) * 170ms + .2s) both}
@keyframes hlcLink{0%{opacity:0;transform:translate(-10px,-16px) scale(.35) rotate(-24deg)}50%{opacity:1}100%{opacity:1;transform:none}}
.hl--chain.hl-done .hlc-ch__chain{opacity:0}
html.hl-on .hl--chain .hlc-ch__h2{opacity:0;transform-origin:50% calc(-1 * var(--hang,30px))}
html.hl-on .hl--chain.hl-in .hlc-ch__h2{animation:hlcHang 1.5s cubic-bezier(.3,.7,.3,1) calc(var(--links) * 170ms + .45s) both}
@keyframes hlcHang{0%{opacity:0;transform:translateY(-26px) rotate(-5deg)}14%{opacity:1}40%{transform:translateY(4px) rotate(3deg)}62%{transform:translateY(-1px) rotate(-1.4deg)}82%{transform:rotate(.5deg)}100%{opacity:1;transform:none}}
html.hl-on .hl--chain .hlc-ch__eb{opacity:0;transform-origin:50% calc(-1 * var(--hang,24px))}
html.hl-on .hl--chain.hl-in .hlc-ch__eb{animation:hlcHangEb 1.2s cubic-bezier(.3,.7,.3,1) calc(var(--links) * 170ms + .2s) both}
@keyframes hlcHangEb{0%{opacity:0;transform:translateY(-14px) rotate(6deg)}18%{opacity:1}42%{transform:translateY(2px) rotate(-3deg)}66%{transform:rotate(1.2deg)}100%{opacity:1;transform:none}}
html.hl-on .hl--chain .hlc-ch__lede{opacity:0;clip-path:inset(0 0 100% 0);translate:0 -8px}
html.hl-on .hl--chain.hl-in .hlc-ch__lede{opacity:1;clip-path:inset(-10% -2% -10% -2%);translate:0 0;transition:opacity .2s ease calc(var(--links) * 170ms + 1.4s),clip-path .8s var(--hl-soft) calc(var(--links) * 170ms + 1.4s),translate .8s cubic-bezier(.3,1.5,.45,1) calc(var(--links) * 170ms + 1.4s)}
.hl--chain.hl-done .hlc-ch__lede{clip-path:none}

/* ---------- 15 · #pricing-preview · the swing tag ---------- */
.hlc-sw__h2{perspective:1100px}
.hlc-sw__tag{display:block;width:fit-content;position:relative;transform-style:preserve-3d;transform-origin:-.38em 50%}
.hlc-sw__face{display:block;position:relative;z-index:0;backface-visibility:hidden}
.hlc-sw__face::before{content:"";position:absolute;inset:.08em -.28em .02em -.62em;z-index:-1;background:linear-gradient(180deg,#fff,#faf7f2);clip-path:polygon(.34em 0,100% 0,100% 100%,.34em 100%,0 50%);transition:opacity .7s ease}
.hlc-sw__back{position:absolute;inset:.08em -.28em .02em -.62em;backface-visibility:hidden;transform:rotateY(180deg);background:var(--hlc-wash) var(--hlc-ruled);clip-path:polygon(0 0,calc(100% - .34em) 0,100% 50%,calc(100% - .34em) 100%,0 100%);transition:opacity .7s ease}
.hlc-sw__eye{position:absolute;left:-.42em;top:50%;width:.15em;height:.15em;margin-top:-.075em;border-radius:50%;background:var(--ivory,#f5f2ed);box-shadow:0 0 0 .03em var(--hlc-rose);transition:opacity .7s ease}
.hlc-sw__string{position:absolute;left:-.35em;bottom:50%;width:1.5px;height:1.15em;background:#8a8578;transform-origin:50% 100%;rotate:6deg;transition:opacity .7s ease}
html.hl-on .hl--swingtag .hlc-sw__tag{opacity:0}
html.hl-on .hl--swingtag.hl-in .hlc-sw__tag{animation:hlcSpin 2.1s cubic-bezier(.25,.6,.35,1) .2s both}
@keyframes hlcSpin{0%{opacity:0;transform:translateY(-1.1em) rotateY(-200deg)}10%{opacity:1}34%{transform:translateY(.06em) rotateY(160deg)}52%{transform:translateY(-.03em) rotateY(-52deg)}68%{transform:rotateY(22deg)}82%{transform:rotateY(-8deg)}92%{transform:rotateY(3deg)}100%{opacity:1;transform:none}}
html.hl-on .hl--swingtag .hlc-sw__late{opacity:0;translate:0 -.35em;transition:opacity .2s ease calc(var(--o) * 120ms + 1.85s),translate .55s cubic-bezier(.3,1.5,.45,1) calc(var(--o) * 120ms + 1.85s)}
html.hl-on .hl--swingtag.hl-in .hlc-sw__late{opacity:1;translate:0 0}
.hl--swingtag.hl-done .hlc-sw__face::before,.hl--swingtag.hl-done .hlc-sw__back,.hl--swingtag.hl-done .hlc-sw__eye,.hl--swingtag.hl-done .hlc-sw__string{opacity:0}
html.hl-on .hl--swingtag .hlc-sw__eb{opacity:0;translate:0 -16px;transition:opacity .3s ease .05s,translate .7s cubic-bezier(.3,1.4,.45,1) .05s}
html.hl-on .hl--swingtag.hl-in .hlc-sw__eb{opacity:1;translate:0 0}
html.hl-on .hl--swingtag .hlc-sw__lede{opacity:0;transform-origin:0 50%;transform:perspective(900px) rotateY(100deg);transition:opacity .3s ease 2.2s,transform 1s var(--hl-spring) 2.2s}
html.hl-on .hl--swingtag.hl-in .hlc-sw__lede{opacity:1;transform:perspective(900px) rotateY(0deg)}
.hl--swingtag.hl-done .hlc-sw__lede{transform:none}

/* ---------- 16 · #how-it-works · the pop-up staircase ---------- */
.hlc-st__h2{position:relative}
.hlc-st__stairs{position:absolute;display:flex;align-items:flex-end;perspective:700px;pointer-events:none;transition:opacity .8s ease}
.hlc-st__stairs b{flex:1;height:calc(var(--sh,12px) * (var(--i) + 1));background:#fff repeating-linear-gradient(180deg,transparent 0 7px,rgba(196,87,106,.12) 7px 8px);border-top:3px solid var(--hlc-rose);box-shadow:0 0 0 1px rgba(138,133,120,.24),0 8px 12px -8px rgba(20,30,45,.4);transform-origin:50% 100%;transform:rotateX(-90deg);opacity:0;
  transition:transform .55s cubic-bezier(.3,1.4,.45,1) calc(var(--i) * 150ms + .1s),opacity .2s ease calc(var(--i) * 150ms + .1s)}
.hlc-st__stairs b:nth-child(even){border-top-color:var(--hlc-deep)}
.hl--stairs.hl-in .hlc-st__stairs b{transform:none;opacity:1}
.hl--stairs.hl-done .hlc-st__stairs{opacity:0}
html.hl-on .hl--stairs .hlc-st__w{opacity:0}
html.hl-on .hl--stairs.hl-in .hlc-st__w{animation:hlcHop .7s cubic-bezier(.3,.6,.4,1) calc(var(--o) * 210ms + var(--n,3) * 150ms + .2s) both}
@keyframes hlcHop{0%{opacity:0;transform:translate(-.45em,.7em)}20%{opacity:1}55%{transform:translate(-.12em,-.28em)}80%{transform:translate(0,.03em) scale(1.04,.93)}100%{opacity:1;transform:none}}
html.hl-on .hl--stairs .hlc-st__eb{opacity:0}
html.hl-on .hl--stairs.hl-in .hlc-st__eb{animation:hlcHopEb .55s cubic-bezier(.3,.6,.4,1) .05s both}
@keyframes hlcHopEb{0%{opacity:0;transform:translate(-14px,14px)}25%{opacity:1}60%{transform:translate(-4px,-7px)}100%{opacity:1;transform:none}}
html.hl-on .hl--stairs .hlc-st__lede{opacity:0;translate:0 10px;transition:opacity .5s ease 2.1s,translate .7s var(--hl-soft) 2.1s}
html.hl-on .hl--stairs.hl-in .hlc-st__lede{opacity:1;translate:0 0}

/* ---------- 17 · #too-good-to-be-true · the scratch card ---------- */
.hlc-sx__h2{position:relative;z-index:0}
html.hl-on .hl--scratch .hlc-sx__ink{opacity:0;filter:blur(4px);transition:opacity .45s ease calc(var(--o) * 90ms + .1s),filter .7s ease calc(var(--o) * 90ms + .1s)}
html.hl-on .hl--scratch.hl-in .hlc-sx__ink{opacity:1;filter:blur(0)}
.hl--scratch.hl-done .hlc-sx__ink{filter:none}
html.hl-on .hl--scratch .hlc-sx__under{opacity:0}
html.hl-on .hl--scratch.hl-in .hlc-sx__under{opacity:1;transition:opacity .01s linear .55s}
.hlc-sx__foil{position:absolute;z-index:2;pointer-events:none;opacity:0;scale:1.06;transition:opacity .25s ease .25s,scale .45s var(--hl-spring) .25s;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.hl--scratch.hl-in .hlc-sx__foil{opacity:1;scale:1}
.hlc-sx__foil > b{position:absolute;top:0;bottom:0;left:calc(var(--i) / 7 * 100%);width:calc(100% / 7 + .5px);
  background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.7) 0 1px,transparent 1.5px) 0 0/9px 11px,linear-gradient(115deg,#aeb5be,#eef1f4 38%,#9fa7b1 52%,#dfe3e8 70%,#bfc5cc);background-size:9px 11px,700% 100%;background-position:0 0,calc(var(--i) / 6 * 100%) 0}
.hlc-sx__foil > b:first-child{border-radius:6px 0 0 6px}
.hlc-sx__foil > b:nth-child(7){border-radius:0 6px 6px 0}
.hl--scratch.hl-in .hlc-sx__foil > b:nth-child(odd){animation:hlcScrDown .22s linear calc(var(--i) * .22s + .8s) both}
.hl--scratch.hl-in .hlc-sx__foil > b:nth-child(even){animation:hlcScrUp .22s linear calc(var(--i) * .22s + .8s) both}
@keyframes hlcScrDown{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
@keyframes hlcScrUp{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
.hlc-sx__fleck{position:absolute;left:calc((var(--i) + .5) / 7 * 100%);top:50%;width:5px;height:4px;border-radius:1px;background:#dfe3e8;box-shadow:9px 6px 0 -1px #c3c9d0,-7px 12px 0 -1px #eef1f4,4px -10px 0 -1px #aeb5be;opacity:0}
.hl--scratch.hl-in .hlc-sx__fleck{animation:hlcFleck .9s ease-in calc(var(--i) * .22s + .85s) both}
@keyframes hlcFleck{0%{opacity:0;translate:0 0;rotate:0deg}12%{opacity:1}100%{opacity:0;translate:8px 110px;rotate:160deg}}
.hlc-sx__coin{position:absolute;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;z-index:2;opacity:0;filter:drop-shadow(0 5px 5px rgba(0,0,0,.4))}
.hlc-sx__coin svg{display:block;width:100%;height:100%}
.hl--scratch.hl-in .hlc-sx__coin{animation:hlcCoin 1.54s linear .8s both}
@keyframes hlcCoin{0%{left:0;top:0;opacity:0;rotate:-20deg}3%{opacity:1}14.29%{left:14.29%;top:100%;rotate:10deg}28.57%{left:28.57%;top:0;rotate:-20deg}42.86%{left:42.86%;top:100%;rotate:10deg}57.14%{left:57.14%;top:0;rotate:-20deg}71.43%{left:71.43%;top:100%;rotate:10deg}85.71%{left:85.71%;top:0;rotate:-20deg}96%{opacity:1}100%{left:100%;top:100%;opacity:0;rotate:10deg}}
.hl--scratch.hl-done .hlc-sx__foil{display:none}
html.hl-on .hl--scratch .hlc-sx__eb{-webkit-mask-image:linear-gradient(100deg,#000 40%,rgba(0,0,0,.25) 50%,transparent 60%);mask-image:linear-gradient(100deg,#000 40%,rgba(0,0,0,.25) 50%,transparent 60%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;transition:mask-position 1s ease .05s,-webkit-mask-position 1s ease .05s}
html.hl-on .hl--scratch.hl-in .hlc-sx__eb{-webkit-mask-position:0 0;mask-position:0 0}
.hl--scratch.hl-done .hlc-sx__eb{-webkit-mask-image:none;mask-image:none}
.hlc-sx__lede{position:relative}
.hlc-sx__lede::before{content:"";position:absolute;left:0;width:min(60%,420px);top:-16px;height:1px;background:rgba(255,255,255,.42);transform-origin:0 50%;scale:0 1;transition:scale .6s var(--hl-soft) 2.35s,opacity .7s ease;pointer-events:none}
.hl--scratch.hl-in .hlc-sx__lede::before{scale:1 1}
.hl--scratch.hl-done .hlc-sx__lede::before{opacity:0}
html.hl-on .hl--scratch .hlc-sx__lede{clip-path:inset(100% -2% -10% -2%);translate:0 -100%}
html.hl-on .hl--scratch.hl-in .hlc-sx__lede{clip-path:inset(-10% -2% -10% -2%);translate:0 0;transition:clip-path .9s var(--hl-soft) 2.55s,translate .9s var(--hl-soft) 2.55s}
.hl--scratch.hl-done .hlc-sx__lede{clip-path:none}

/* ---------- 18 · #faq · the library card ---------- */
.hlc-ds__bed{position:relative;z-index:0}
.hlc-ds__card{position:absolute;inset:-18px -20px -16px;z-index:-1;pointer-events:none;border-radius:3px;box-shadow:var(--hlc-lift);
  background:linear-gradient(90deg,transparent 66%,rgba(196,87,106,.3) 66%,rgba(196,87,106,.3) calc(66% + 1px),transparent calc(66% + 1px)),linear-gradient(var(--hlc-wash),var(--hlc-wash)) 0 0/100% 14px no-repeat,repeating-linear-gradient(180deg,transparent 0 31px,rgba(196,87,106,.16) 31px 32px),#fff;
  opacity:0;translate:0 44px;transition:opacity .3s ease .15s,translate .75s var(--hl-spring) .15s}
.hl--datestamp.hl-in .hlc-ds__card{opacity:1;translate:0 0}
.hl--datestamp.hl-done .hlc-ds__card{opacity:0;transition:opacity .8s ease}
.hlc-ds__pocket{position:relative;z-index:1}
.hlc-ds__pocket::before{content:"";position:absolute;inset:-16px -20px -16px;z-index:-1;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#efe3c8,#e6d6b3);box-shadow:0 14px 22px -16px rgba(20,30,45,.4);clip-path:polygon(0 0,38% 0,50% 14px,62% 0,100% 0,100% 100%,0 100%);opacity:0;translate:0 16px;transition:opacity .3s ease,translate .55s var(--hl-soft),scale .5s ease}
.hl--datestamp.hl-in .hlc-ds__pocket::before{opacity:1;translate:0 0}
.hl--datestamp.hl-done .hlc-ds__pocket::before{opacity:0;transition:opacity .8s ease}
html.hl-on .hl--datestamp .hlc-ds__pocket > *{opacity:0;transition:opacity .4s ease .2s}
html.hl-on .hl--datestamp.hl-in .hlc-ds__pocket > *{opacity:1}
html.hl-on .hl--datestamp .hlc-ds__ink{opacity:0;scale:1.14;filter:blur(1.6px);transition:opacity .07s linear calc(var(--c) * .42s + .98s),scale .3s ease-out calc(var(--c) * .42s + .98s),filter .45s ease calc(var(--c) * .42s + .98s)}
html.hl-on .hl--datestamp.hl-in .hlc-ds__ink{opacity:1;scale:1;filter:blur(0)}
.hl--datestamp.hl-done .hlc-ds__ink{filter:none}
.hlc-ds__stamp{position:absolute;left:0;top:0;aspect-ratio:60/70;z-index:3;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 6px rgba(20,30,45,.3));transform-origin:50% 100%}
.hlc-ds__stamp svg{display:block;width:100%;height:100%}
.hl--datestamp.hl-in .hlc-ds__stamp{animation:hlcStamp 1.9s cubic-bezier(.4,0,.3,1) .62s both}
@keyframes hlcStamp{0%{opacity:0;translate:var(--x0) calc(var(--y0) - 44px)}8%{opacity:1;translate:var(--x0) calc(var(--y0) - 30px)}18.9%{translate:var(--x0) var(--y0);scale:1.04 .9}24%{translate:var(--x0) calc(var(--y0) - 24px);scale:1}36%{translate:var(--x1) calc(var(--y1) - 24px)}41%{translate:var(--x1) var(--y1);scale:1.04 .9}46%{translate:var(--x1) calc(var(--y1) - 24px);scale:1}58%{translate:var(--x2) calc(var(--y2) - 24px)}63%{translate:var(--x2) var(--y2);scale:1.04 .9}68%{translate:var(--x2) calc(var(--y2) - 24px);scale:1}80%{translate:var(--x3) calc(var(--y3) - 24px)}85%{translate:var(--x3) var(--y3);scale:1.04 .9}91%{opacity:1;translate:var(--x3) calc(var(--y3) - 30px);scale:1}100%{opacity:0;translate:calc(var(--x3) + 30px) calc(var(--y3) - 70px)}}
html.hl-on .hl--datestamp .hlc-ds__eb{opacity:0;translate:0 44px;transition:opacity .3s ease .15s,translate .75s var(--hl-spring) .15s}
html.hl-on .hl--datestamp.hl-in .hlc-ds__eb{opacity:1;translate:0 0}

/* ---------- 19 · #final-cta · the wind-up key ---------- */
.hlc-wu__bed{position:relative}
.hlc-wu__key{position:absolute;left:0;top:0;aspect-ratio:56/40;z-index:2;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.hlc-wu__key svg{display:block;width:100%;height:100%;scale:-1 1}
.hlc-wu__key--top svg{rotate:90deg;scale:1}
.hl--windup.hl-in .hlc-wu__key{animation:hlcWind 2.8s cubic-bezier(.15,.55,.35,1) .1s both}
.hl--windup.hl-in .hlc-wu__key--top{animation-name:hlcWindTop}
@keyframes hlcWindTop{0%{opacity:0;transform:perspective(240px) rotateY(0)}8%{opacity:1}100%{opacity:1;transform:perspective(240px) rotateY(1620deg)}}
@keyframes hlcWind{0%{opacity:0;transform:perspective(240px) rotateX(0)}8%{opacity:1}100%{opacity:1;transform:perspective(240px) rotateX(1620deg)}}
.hl--windup.hl-done .hlc-wu__key{opacity:0;transition:opacity .8s ease}
html.hl-on .hl--windup .hlc-wu__w{opacity:0}
html.hl-on .hl--windup.hl-in .hlc-wu__w{animation:hlcMarch 1.25s linear calc(var(--o) * 70ms + .3s) both}
@keyframes hlcMarch{0%{opacity:0;transform:translate(-.5em,0)}8%{opacity:1}12%{transform:translate(-.5em,-.06em)}25%{transform:translate(-.36em,0)}37%{transform:translate(-.36em,-.06em)}50%{transform:translate(-.22em,0)}62%{transform:translate(-.22em,-.06em)}75%{transform:translate(-.08em,0)}87%{transform:translate(-.08em,-.04em)}100%{opacity:1;transform:none}}
html.hl-on .hl--windup .hlc-wu__lede{opacity:0}
html.hl-on .hl--windup.hl-in .hlc-wu__lede{animation:hlcMarchL 1.1s linear var(--marched,2s) both}
@keyframes hlcMarchL{0%{opacity:0;transform:translate(-32px,0)}10%{opacity:1}20%{transform:translate(-32px,-3px)}35%{transform:translate(-22px,0)}50%{transform:translate(-22px,-3px)}65%{transform:translate(-10px,0)}80%{transform:translate(-10px,-2px)}100%{opacity:1;transform:none}}

/* ---------- 20 · .iqbrv · the nut and bolt ---------- */
.hlc-bt__h2{position:relative;z-index:0}
html.hl-on .hl--bolt .hlc-bt__w{opacity:0;translate:0 .22em;transition:opacity .3s ease calc(var(--o) * 70ms + .1s),translate .6s var(--hl-soft) calc(var(--o) * 70ms + .1s)}
html.hl-on .hl--bolt.hl-in .hlc-bt__w{opacity:1;translate:0 0}
html.hl-on .hl--bolt .hlc-bt__free{opacity:0}
html.hl-on .hl--bolt.hl-in .hlc-bt__free{animation:hlcHangOn 2.4s cubic-bezier(.3,.6,.3,1) .45s both}
@keyframes hlcHangOn{0%{opacity:0;transform:translateY(-.2em) rotate(-16deg)}12%{opacity:1;transform:rotate(-12deg)}22%{transform:rotate(-15deg)}38%{transform:rotate(-14deg)}50%{transform:rotate(0deg)}56%{transform:rotate(.8deg)}62%,80%{transform:none}88%{transform:translateY(-.07em)}100%{opacity:1;transform:none}}
.hlc-bt__rig{position:absolute;z-index:2;pointer-events:none;opacity:0;transform-origin:50% 50%}
.hlc-bt__bracket{position:absolute;left:50%;top:50%;width:230%;height:34%;margin-top:-17%;border-radius:3px;background:linear-gradient(180deg,#dbe4f1,#8ea4c4);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.hlc-bt__bolt{position:absolute;inset:0;z-index:1;opacity:0}
.hlc-bt__bolt svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.hl--bolt.hl-in .hlc-bt__rig{animation:hlcRig 2.4s cubic-bezier(.3,.6,.3,1) .45s both}
@keyframes hlcRig{0%{opacity:0;transform:translateY(-.2em) rotate(-16deg)}12%{opacity:1;transform:rotate(-12deg)}22%{transform:rotate(-15deg)}38%{transform:rotate(-14deg)}50%{transform:rotate(0deg)}62%{transform:none}74%{transform:translateY(-6px)}82%{opacity:1;transform:translateY(-3px) rotate(10deg)}100%{opacity:0;transform:translateY(110px) rotate(80deg)}}
.hl--bolt.hl-in .hlc-bt__bolt{animation:hlcBolt 2.4s linear .45s both}
@keyframes hlcBolt{0%,22%{opacity:0;transform:scale(1.35) rotate(0deg)}26%{opacity:1;transform:scale(1.3) rotate(0deg)}50%{transform:scale(1) rotate(720deg)}60%{transform:scale(1) rotate(720deg)}76%{transform:scale(1.15) rotate(180deg)}100%{opacity:1;transform:scale(1.15) rotate(90deg)}}
html.hl-on .hl--bolt .hlc-bt__eb{opacity:0;translate:-24px 0}
html.hl-on .hl--bolt.hl-in .hlc-bt__eb{opacity:1;translate:0 0;transition:opacity .2s ease .05s,translate .5s steps(4,end) .05s}
html.hl-on .hl--bolt .hlc-bt__lede{opacity:0;scale:1 .86;transform-origin:0 0}
html.hl-on .hl--bolt.hl-in .hlc-bt__lede{opacity:1;scale:1 1;transition:opacity .3s ease 1.2s,scale .8s cubic-bezier(.3,1.6,.45,1) 2.45s}

/* ---------- 16 · #practices · the session tabs ---------- */
.hlc-se__h2{position:relative}
.hlc-se__row{position:absolute;left:0;top:0;height:.24em;display:flex;align-items:flex-end;gap:.05em;pointer-events:none}
.hlc-se__tab{display:block;width:.78em;height:100%;border-radius:.09em .09em 0 0;background:#ece6dc;box-shadow:inset 0 0 0 1px rgba(138,133,120,.35)}
.hlc-se__tab--on{background:#fff;box-shadow:inset 0 0 0 1px rgba(138,133,120,.35),inset 0 .05em 0 var(--hlc-rose)}
.hlc-se__more{display:flex;align-items:center;justify-content:center;height:100%;padding:0 .12em;border-radius:.09em .09em 0 0;background:var(--hlc-wash);color:var(--hlc-deep);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:max(11px,.13em);min-height:15px;font-style:normal;line-height:1;letter-spacing:.04em;white-space:nowrap}
html.hl-on .hl--sessions .hlc-se__tab,html.hl-on .hl--sessions .hlc-se__more{opacity:0;translate:0 60%;transition:opacity .25s ease calc(var(--i) * 140ms + .15s),translate .45s cubic-bezier(.3,1.4,.45,1) calc(var(--i) * 140ms + .15s)}
html.hl-on .hl--sessions.hl-in .hlc-se__tab,html.hl-on .hl--sessions.hl-in .hlc-se__more{opacity:1;translate:0 0}
html.hl-on .hl--sessions .hlc-se__w{opacity:0;translate:0 .35em;transition:opacity .3s ease calc(var(--o) * 80ms + .8s),translate .5s cubic-bezier(.2,.8,.2,1) calc(var(--o) * 80ms + .8s)}
html.hl-on .hl--sessions.hl-in .hlc-se__w{opacity:1;translate:0 0}
.hlc-se__late{position:relative}
.hlc-se__late::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.05em;background:var(--hlc-rose);transform-origin:0 50%;scale:0 1;transition:opacity .7s ease}
html.hl-on .hl--sessions .hlc-se__late{opacity:0;translate:-.4em 0;transition:opacity .3s ease calc(var(--o) * 90ms + 1.6s),translate .55s cubic-bezier(.2,.8,.2,1) calc(var(--o) * 90ms + 1.6s)}
html.hl-on .hl--sessions.hl-in .hlc-se__late{opacity:1;translate:0 0}
.hl--sessions.hl-in .hlc-se__late::after{scale:1 1;transition:scale .5s cubic-bezier(.2,.8,.2,1) calc(var(--o) * 90ms + 1.9s)}
.hl--sessions.hl-done .hlc-se__late::after{opacity:0}
html.hl-on .hl--sessions .hlc-se__eb{opacity:0;translate:0 -12px;transition:opacity .3s ease .05s,translate .5s cubic-bezier(.3,1.4,.45,1) .05s}
html.hl-on .hl--sessions.hl-in .hlc-se__eb{opacity:1;translate:0 0}
html.hl-on .hl--sessions .hlc-se__lede{opacity:0;translate:-40px 0;transition:opacity .4s ease 2.2s,translate .7s cubic-bezier(.15,.8,.25,1) 2.2s}
html.hl-on .hl--sessions.hl-in .hlc-se__lede{opacity:1;translate:0 0}

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