/* ledgeriq-headlines.css · LedgerIQ landing: one paper mechanism per section headline (built by
   ledgeriq-headlines.js from [data-hl], on the plumbing in iq-headlines.js/.css). Every hidden state is
   gated on html.hl-on, which the engine adds only when motion is allowed, so without JS or with reduced
   motion nothing here hides anything. Prefix hll; one block per mechanism, in page order. */
@property --hll-ty{syntax:'<length>';inherits:false;initial-value:0px}
@property --hll-tx{syntax:'<length>';inherits:false;initial-value:0px}
@property --hll-cut{syntax:'<length>';inherits:false;initial-value:0px}
@property --hll-sw{syntax:'<percentage>';inherits:false;initial-value:0%}
:root{
  --hll-teal:#4a9080;--hll-deep:#2d5a50;--hll-mint:#9fc4b5;--hll-wash:#e8f3ef;
  --hll-paper:#fffdf9;--hll-line:#e4dfd5;--hll-kraft:rgba(138,133,120,.3);
  --hll-brass:linear-gradient(180deg,#f6e2b0,#d9b46c 55%,#a98445);
}

/* ---------- 01 · #how-it-works · in and out trays ---------- */
.hl--trays h2{position:relative;isolation:isolate}
.hl--trays .hll-tr__in,.hl--trays .hll-tr__out{position:relative;z-index:1}
.hll-tr__back,.hll-tr__front{position:absolute;display:block;pointer-events:none}
.hll-tr__back{z-index:0;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(138,133,120,.32) 0 1.5px,rgba(236,231,221,.55) 1.5px,rgba(222,215,203,.85))}
.hll-tr__back--out{background:linear-gradient(180deg,rgba(74,144,128,.42) 0 1.5px,rgba(220,235,229,.5) 1.5px,rgba(185,214,202,.85))}
.hll-tr__front{z-index:2;height:.32em;border-radius:3px 3px 8px 8px;background:linear-gradient(180deg,#fff,#f1ede6 62%,#e2ddd3);box-shadow:0 0 0 1px var(--hll-kraft),0 1px 0 #fff inset,0 16px 20px -14px rgba(20,30,45,.5)}
.hll-tr__front::before{content:"";position:absolute;left:50%;top:0;width:1.2em;height:.16em;translate:-50% 0;border-radius:0 0 1em 1em;background:radial-gradient(ellipse at 50% 0,rgba(138,133,120,.42),rgba(138,133,120,.08) 70%,transparent 72%)}
.hll-tr__front b{position:absolute;left:9%;top:32%;width:1.3em;height:.13em;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(138,133,120,.35)}
.hll-tr__front--out{background:linear-gradient(180deg,#f6fbf9,#dcebe5 62%,#c9ded5);box-shadow:0 0 0 1px rgba(74,144,128,.4),0 1px 0 #fff inset,0 16px 20px -14px rgba(20,30,45,.5)}
.hll-tr__front--out b{left:auto;right:9%;box-shadow:0 0 0 1px rgba(74,144,128,.45)}
html.hl-on .hl--trays .hll-tr__in{opacity:0;--hll-ty:-1.5em;rotate:var(--tilt,0deg);translate:0 var(--hll-ty);clip-path:inset(-90% -40% calc(var(--hll-cut) + var(--hll-ty)) -40%)}
html.hl-on .hl--trays .hll-tr__out{--hll-ty:.95em;--hll-tx:-.45em;translate:var(--hll-tx) var(--hll-ty);clip-path:inset(-90% -40% calc(var(--hll-cut) + var(--hll-ty)) -40%)}
html.hl-on .hl--trays.hl-in .hll-tr__in{animation:hllTrDrop .95s cubic-bezier(.35,.05,.55,1) calc(var(--i) * 120ms + .45s) both,hllTrUncut .5s ease 2.3s both}
html.hl-on .hl--trays.hl-in .hll-tr__out{animation:hllTrOut 1.15s cubic-bezier(.22,.9,.3,1.04) calc(var(--i) * 110ms + 1.2s) both,hllTrUncut .5s ease 2.4s both}
@keyframes hllTrDrop{0%{opacity:0;--hll-ty:-1.5em;rotate:var(--tilt,0deg)}12%{opacity:1}62%{--hll-ty:.15em;rotate:0deg}80%{--hll-ty:-.05em}100%{opacity:1;--hll-ty:0px;rotate:0deg}}
@keyframes hllTrOut{0%{--hll-ty:.95em;--hll-tx:-.45em}58%{--hll-ty:-.09em;--hll-tx:.03em}100%{--hll-ty:0px;--hll-tx:0px}}
@keyframes hllTrUncut{to{--hll-cut:-.6em}}
html.hl-on .hl--trays .hll-tr__front,html.hl-on .hl--trays .hll-tr__back{opacity:0}
html.hl-on .hl--trays.hl-in .hll-tr__front,html.hl-on .hl--trays.hl-in .hll-tr__back{animation:hllTrLip 2.35s var(--hl-soft) .15s both}
html.hl-on .hl--trays.hl-in .hll-tr__front--out,html.hl-on .hl--trays.hl-in .hll-tr__back--out{animation-duration:1.85s;animation-delay:.8s}
@keyframes hllTrLip{0%{opacity:0;scale:.5 1}16%{opacity:1;scale:1.04 1}24%{scale:1 1}80%{opacity:1;translate:0 0}100%{opacity:0;translate:0 .3em;scale:1 1}}
html.hl-on .hl--trays .eyebrow{opacity:0}
html.hl-on .hl--trays.hl-in .eyebrow{animation:hllTrSlip 1.15s cubic-bezier(.3,.6,.3,1) .05s both}
@keyframes hllTrSlip{0%{opacity:0;translate:-20px -28px;rotate:-8deg}30%{opacity:1}55%{translate:7px -4px;rotate:3.5deg}78%{translate:-2px 0;rotate:-1.2deg}100%{opacity:1;translate:0 0;rotate:0deg}}
html.hl-on .hl--trays > p{opacity:0;clip-path:inset(0 0 100% 0);translate:0 -.9em;transition:opacity .3s ease 1.9s,clip-path .9s var(--hl-soft) 1.9s,translate .9s var(--hl-soft) 1.9s}
html.hl-on .hl--trays.hl-in > p{opacity:1;clip-path:inset(-20% -4% -20% -4%);translate:0 0}
.hl--trays.hl-done .hll-tr__front,.hl--trays.hl-done .hll-tr__back{display:none}
html.hl-on .hl--trays.hl-done .hll-tr__in,html.hl-on .hl--trays.hl-done .hll-tr__out,.hl--trays.hl-done > p{clip-path:none}

/* ---------- 02 · #the-question · the paper fortune-teller ---------- */
.hl--fortune h2{position:relative}
.hll-ft{position:absolute;display:block;z-index:2;pointer-events:none;filter:drop-shadow(0 10px 10px rgba(20,30,45,.22))}
.hll-ft__in{position:absolute;inset:7%;border-radius:2px;background:linear-gradient(45deg,transparent 49.3%,rgba(255,255,255,.35) 49.6% 50.4%,transparent 50.7%),linear-gradient(-45deg,transparent 49.3%,rgba(255,255,255,.35) 49.6% 50.4%,transparent 50.7%),linear-gradient(135deg,#2d5a50,#4a9080 55%,#366558)}
.hll-ft__q{position:absolute;width:50%;height:50%;--dx:-1;--dy:-1;box-shadow:inset 0 0 0 .5px rgba(138,133,120,.45)}
.hll-ft__q--tl{left:0;top:0;background:linear-gradient(to top right,#cfe2da 50%,#eef6f2 50%);border-radius:3px 0 0 0}
.hll-ft__q--tr{right:0;top:0;--dx:1;background:linear-gradient(to top left,#e7e2d8 50%,#fff 50%);border-radius:0 3px 0 0}
.hll-ft__q--bl{left:0;bottom:0;--dy:1;background:linear-gradient(to bottom right,#f6f3ee 50%,#ddd7cc 50%);border-radius:0 0 0 3px}
.hll-ft__q--br{right:0;bottom:0;--dx:1;--dy:1;background:linear-gradient(to bottom left,#e3efe9 50%,#bcd6cb 50%);border-radius:0 0 3px 0}
html.hl-on .hl--fortune .hll-ft{opacity:0}
html.hl-on .hl--fortune.hl-in .hll-ft{animation:hllFtRig 2.6s var(--hl-soft) .45s both}
@keyframes hllFtRig{0%{opacity:0;scale:.35;rotate:-14deg}13%{opacity:1;scale:1.07;rotate:3deg}21%{scale:1;rotate:0deg}62%{opacity:1;scale:1}82%{opacity:1;scale:1.15}100%{opacity:0;scale:1.3}}
html.hl-on .hl--fortune.hl-in .hll-ft__q{animation:hllFtPinch 2.6s linear .45s both}
html.hl-on .hl--fortune.hl-in .hll-ft__in{animation:hllFtInside 2.6s linear .45s both}
@keyframes hllFtInside{0%,61%{opacity:1;scale:1}74%{opacity:0;scale:1.6}100%{opacity:0;scale:1.6}}
@keyframes hllFtPinch{
  0%,22%{translate:0 0;rotate:0deg;animation-timing-function:cubic-bezier(.3,0,.3,1)}
  30%{translate:0 calc(var(--dy) * 28%);animation-timing-function:cubic-bezier(.5,0,.4,1)}
  38%{translate:0 0;animation-timing-function:cubic-bezier(.3,0,.3,1)}
  46%{translate:calc(var(--dx) * 28%) 0;animation-timing-function:cubic-bezier(.5,0,.4,1)}
  54%,61%{translate:0 0;rotate:0deg;opacity:1;animation-timing-function:cubic-bezier(.25,.7,.3,1)}
  84%{translate:calc(var(--dx) * 105%) calc(var(--dy) * 105%);rotate:calc(var(--dx) * var(--dy) * -22deg);opacity:1}
  100%{translate:calc(var(--dx) * 125%) calc(var(--dy) * 125%);rotate:calc(var(--dx) * var(--dy) * -30deg);opacity:0}}
html.hl-on .hl--fortune .hll-ft__ask{opacity:0}
html.hl-on .hl--fortune.hl-in .hll-ft__ask{animation:hllFtAsk .85s var(--hl-soft) calc(var(--k) * 130ms + .18s) both}
@keyframes hllFtAsk{0%{opacity:0;translate:0 .35em}55%{opacity:1;translate:0 calc(var(--lift) * -1)}100%{opacity:1;translate:0 0}}
html.hl-on .hl--fortune .hll-ft__ans{opacity:0;scale:.35}
html.hl-on .hl--fortune.hl-in .hll-ft__ans{opacity:1;scale:1;transition:opacity .3s ease calc(2.05s + var(--o,0) * .22s),scale .75s var(--hl-spring) calc(2.05s + var(--o,0) * .22s)}
html.hl-on .hl--fortune .eyebrow{opacity:0;scale:.04 1}
html.hl-on .hl--fortune.hl-in .eyebrow{opacity:1;scale:1 1;transition:opacity .25s ease .05s,scale .8s var(--hl-spring) .05s}
html.hl-on .hl--fortune > p{clip-path:inset(50% 0 50% 0);scale:1 .9;opacity:0}
html.hl-on .hl--fortune.hl-in > p{clip-path:inset(-10% -3% -10% -3%);scale:1 1;opacity:1;transition:clip-path .85s var(--hl-soft) 2.4s,scale .85s var(--hl-spring) 2.4s,opacity .2s ease 2.4s}
.hl--fortune.hl-done .hll-ft{display:none}
.hl--fortune.hl-done > p{clip-path:none}

/* ---------- 03 · #features · the press ---------- */
.hl--register h2{position:relative}
.hll-rg__key{display:block}
.hll-rg__plate{position:absolute;left:0;right:0;top:0;display:block;pointer-events:none;mix-blend-mode:multiply}
.hll-rg__plate--y,.hll-rg__plate--y em{color:rgba(240,188,0,.92) !important}
.hll-rg__plate--m,.hll-rg__plate--m em{color:rgba(214,46,118,.8) !important}
.hll-rg__plate--c,.hll-rg__plate--c em{color:rgba(0,156,206,.82) !important}
.hll-rg__mark{position:absolute;width:18px;height:18px;display:block;pointer-events:none;border:1.5px solid rgba(26,26,26,.7);border-radius:50%}
.hll-rg__mark::before,.hll-rg__mark::after{content:"";position:absolute;background:rgba(26,26,26,.7)}
.hll-rg__mark::before{left:50%;top:-6px;bottom:-6px;width:1.5px;margin-left:-.75px}
.hll-rg__mark::after{top:50%;left:-6px;right:-6px;height:1.5px;margin-top:-.75px}
.hll-rg__mark--tl{left:-14px;top:-10px}.hll-rg__mark--tr{right:-14px;top:-10px}.hll-rg__mark--bl{left:-14px;bottom:-12px}.hll-rg__mark--br{right:-14px;bottom:-12px}
html.hl-on .hl--register .hll-rg__plate,html.hl-on .hl--register .hll-rg__key,html.hl-on .hl--register .hll-rg__key em,html.hl-on .hl--register .hll-rg__mark{opacity:0}
html.hl-on .hl--register.hl-in .hll-rg__plate--y{animation:hllRgY 3s linear both}
html.hl-on .hl--register.hl-in .hll-rg__plate--m{animation:hllRgM 3s linear both}
html.hl-on .hl--register.hl-in .hll-rg__plate--c{animation:hllRgC 3s linear both}
html.hl-on .hl--register.hl-in .hll-rg__key{animation:hllRgK 3s linear both}
html.hl-on .hl--register.hl-in .hll-rg__key em{animation:hllRgEm 3s linear both}
html.hl-on .hl--register.hl-in h2{animation:hllRgPress 3s linear both}
html.hl-on .hl--register.hl-in .hll-rg__mark{animation:hllRgMark 3s var(--hl-soft) both}
@keyframes hllRgY{0%,9%{opacity:0;translate:.34em -.2em}11%{opacity:.95;translate:.34em -.2em}47%{translate:.34em -.2em;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}53%{translate:0 0}80%{opacity:.95}96%,100%{opacity:0;translate:0 0}}
@keyframes hllRgM{0%,19%{opacity:0;translate:-.3em .16em}21%{opacity:.9;translate:-.3em .16em}47%{translate:-.3em .16em;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}53%{translate:0 0}80%{opacity:.9}96%,100%{opacity:0;translate:0 0}}
@keyframes hllRgC{0%,29%{opacity:0;translate:.12em .3em}31%{opacity:.9;translate:.12em .3em}47%{translate:.12em .3em;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}53%{translate:0 0}80%{opacity:.9}96%,100%{opacity:0;translate:0 0}}
@keyframes hllRgK{0%,39%{opacity:0;translate:-.08em .07em}41%{opacity:1;translate:-.08em .07em}47%{translate:-.08em .07em;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}53%,100%{opacity:1;translate:0 0}}
@keyframes hllRgEm{0%,64%{opacity:0;scale:1.03}67%{opacity:1;scale:1}100%{opacity:1;scale:1}}
@keyframes hllRgPress{0%,47%{scale:1}50%{scale:.986}55%{scale:1.004}60%,100%{scale:1}}
@keyframes hllRgMark{0%,60%{opacity:0;scale:.2;rotate:-90deg}68%{opacity:1;scale:1.1;rotate:0deg}72%{scale:1}88%{opacity:1}100%{opacity:0;scale:1}}
html.hl-on .hl--register .eyebrow{opacity:0}
html.hl-on .hl--register.hl-in .eyebrow{animation:hllRgEb 1.2s var(--hl-soft) .05s both}
@keyframes hllRgEb{0%{opacity:0;text-shadow:-.7em .3em 0 rgba(0,156,206,.6),.6em -.3em 0 rgba(214,46,118,.55),.25em .4em 0 rgba(240,188,0,.7)}15%{opacity:1}70%{text-shadow:0 0 0 rgba(0,156,206,.6),0 0 0 rgba(214,46,118,.55),0 0 0 rgba(240,188,0,.7)}100%{opacity:1;text-shadow:0 0 0 rgba(0,156,206,0),0 0 0 rgba(214,46,118,0),0 0 0 rgba(240,188,0,0)}}
.hll-rg__dek{position:relative}
.hll-rg__roller{position:absolute;left:-8px;right:-8px;top:0;height:8px;margin-top:-4px;display:block;pointer-events:none;border-radius:4px;background:linear-gradient(180deg,#e2ddd3,#8a8578 55%,#bdb7aa);box-shadow:0 3px 5px -2px rgba(20,30,45,.4);opacity:0}
html.hl-on .hl--register .hll-rg__dek{clip-path:inset(0 0 100% 0)}
html.hl-on .hl--register.hl-in .hll-rg__dek{clip-path:inset(-12% -4% -12% -4%);transition:clip-path 1s cubic-bezier(.4,.1,.3,1) 2.1s}
html.hl-on .hl--register.hl-in .hll-rg__roller{animation:hllRgRoll 1.1s cubic-bezier(.4,.1,.3,1) 2.05s both}
@keyframes hllRgRoll{0%{top:0;opacity:0}8%{opacity:1}88%{top:100%;opacity:1}100%{top:100%;opacity:0}}
.hl--register.hl-done .hll-rg__plate,.hl--register.hl-done .hll-rg__mark,.hl--register.hl-done .hll-rg__roller{display:none}
.hl--register.hl-done .hll-rg__dek{clip-path:none}

/* ---------- 04 · #modules · the chart ---------- */
.hl--bars h2{position:relative;isolation:isolate}
.hll-br{position:absolute;inset:0;z-index:-1;display:block;pointer-events:none}
.hll-br__grid{position:absolute;display:block;background:repeating-linear-gradient(180deg,transparent 0 calc(.25em - 1px),rgba(74,144,128,.2) calc(.25em - 1px) .25em),repeating-linear-gradient(90deg,transparent 0 calc(1em - 1px),rgba(74,144,128,.1) calc(1em - 1px) 1em)}
.hll-br__y{position:absolute;display:block;width:2px;background:var(--hll-deep);transform-origin:50% 100%}
.hll-br__y::before{content:"";position:absolute;right:2px;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,var(--hll-deep) 0 1.5px,transparent 1.5px .25em)}
.hll-br__x{position:absolute;display:block;height:2px;background:var(--hll-deep);transform-origin:0 50%}
.hll-br__bar{position:absolute;display:block;transform-origin:50% 100%;border-radius:3px 3px 0 0;background:var(--hll-teal);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.hll-br__bar[data-tone="1"]{background:var(--hll-deep)}
.hll-br__bar[data-tone="2"]{background:var(--hll-mint)}
html.hl-on .hl--bars .hll-br__grid{clip-path:inset(0 100% 0 0)}
html.hl-on .hl--bars .hll-br__y{scale:1 0}
html.hl-on .hl--bars .hll-br__x{scale:0 1}
html.hl-on .hl--bars .hll-br__bar{scale:1 0}
html.hl-on .hl--bars.hl-in .hll-br__grid{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--hl-soft) .2s}
html.hl-on .hl--bars.hl-in .hll-br__y{scale:1 1;transition:scale .6s var(--hl-soft) .1s}
html.hl-on .hl--bars.hl-in .hll-br__x{scale:1 1;transition:scale .8s var(--hl-soft) calc(.25s + var(--r,0) * .15s)}
html.hl-on .hl--bars.hl-in .hll-br__bar{animation:hllBrBar 1.25s var(--hl-soft) calc(var(--k) * 100ms + .4s) both}
@keyframes hllBrBar{0%{scale:1 0;opacity:1}36%{scale:1 calc(var(--h) * 1.1)}48%{scale:1 var(--h)}66%{scale:1 var(--h);opacity:1}100%{scale:1 1;opacity:0}}
html.hl-on .hl--bars.hl-in .hll-br{animation:hllBrOff .6s ease 2.45s both}
@keyframes hllBrOff{to{opacity:0}}
html.hl-on .hl--bars h2 .hl-w{clip-path:inset(100% -12% 0 -12%)}
html.hl-on .hl--bars.hl-in h2 .hl-w{clip-path:inset(-25% -12% -30% -12%);transition:clip-path .55s var(--hl-soft) calc(var(--k) * 100ms + 1.05s)}
.hl--bars .eyebrow{position:relative}
.hll-br__key{position:absolute;left:0;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -14px;border-radius:2px;background:var(--hll-teal);opacity:0;pointer-events:none}
html.hl-on .hl--bars .eyebrow{clip-path:inset(-60% 100% -60% -24px)}
html.hl-on .hl--bars.hl-in .eyebrow{clip-path:inset(-60% -12px -60% -24px);transition:clip-path .8s cubic-bezier(.2,.8,.3,1) .12s}
html.hl-on .hl--bars.hl-in .hll-br__key{animation:hllBrKey 1s linear .05s both}
@keyframes hllBrKey{0%{left:0;opacity:0;scale:0}12%{opacity:1;scale:1.25}20%{left:0;scale:1}82%{left:100%;opacity:1}100%{left:100%;opacity:0}}
html.hl-on .hl--bars > p{opacity:0;clip-path:inset(0 0 100% 0);translate:0 -.7em}
html.hl-on .hl--bars.hl-in > p{opacity:1;clip-path:inset(-15% -3% -15% -3%);translate:0 0;transition:opacity .25s ease 2.05s,clip-path .85s var(--hl-soft) 2.05s,translate .85s var(--hl-soft) 2.05s}
.hl--bars.hl-done .hll-br,.hl--bars.hl-done .hll-br__key{display:none}
html.hl-on .hl--bars.hl-done h2 .hl-w,html.hl-on .hl--bars.hl-done .eyebrow,.hl--bars.hl-done > p{clip-path:none}

/* ---------- 05 · #riq-integration · the spectacles ---------- */
.hl--specs{position:relative}
.hl--specs h2{position:relative}
.hll-sp{position:absolute;left:0;top:0;z-index:4;display:block;pointer-events:none;opacity:0;filter:drop-shadow(0 9px 9px rgba(20,30,45,.28))}
.hll-sp svg{display:block;width:100%;height:100%}
html.hl-on .hl--specs h2 .hl-w,html.hl-on .hl--specs .eyebrow{filter:blur(6px);opacity:.22}
html.hl-on .hl--specs .eyebrow{filter:blur(3px)}
html.hl-on .hl--specs.hl-in h2 .hl-w,html.hl-on .hl--specs.hl-in .eyebrow{filter:blur(0);opacity:1;transition:filter .45s ease var(--fd,0ms),opacity .4s ease var(--fd,0ms)}
html.hl-on .hl--specs .dek .hl-w{filter:blur(4px);opacity:0}
html.hl-on .hl--specs.hl-in .dek .hl-w{filter:blur(0);opacity:1;transition:filter .35s ease var(--fd,0ms),opacity .3s ease var(--fd,0ms)}
.hl--specs.hl-done .hll-sp{display:none}
html.hl-on .hl--specs.hl-done .hl-w,html.hl-on .hl--specs.hl-done .eyebrow{filter:none}

/* ---------- 06 · #why · the plotter ---------- */
.hl--trace{position:relative}
.hl--trace > :not(.hll-tc__paper){position:relative;z-index:1}
.hl--trace h2{position:relative}
.hll-tc__paper{position:absolute;inset:-26px -30px -18px;z-index:0;display:block;pointer-events:none;border-radius:6px;
  background-image:linear-gradient(rgba(127,194,177,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(127,194,177,.12) 1px,transparent 1px),linear-gradient(rgba(127,194,177,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(127,194,177,.22) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,80px 80px,80px 80px;
  -webkit-mask:radial-gradient(110% 95% at 35% 45%,#000 45%,transparent 85%);mask:radial-gradient(110% 95% at 35% 45%,#000 45%,transparent 85%);opacity:0}
html.hl-on .hl--trace.hl-in .hll-tc__paper{animation:hllTcPaper 3.3s linear both}
@keyframes hllTcPaper{0%{opacity:0;background-position:0 0,0 0,0 0,0 0}10%{opacity:1}74%{opacity:1}100%{opacity:0;background-position:-256px 0,-256px 0,-256px 0,-256px 0}}
.hll-tc{position:absolute;inset:0;display:block;pointer-events:none;z-index:2}
.hll-tc svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.hll-tc__line{fill:none;stroke:#7fc2b1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
html.hl-on .hl--trace.hl-in .hll-tc__line{animation:hllTcDraw var(--dur,1s) linear var(--t0,0ms) both,hllTcFade .7s ease var(--off,2s) both}
@keyframes hllTcDraw{to{stroke-dashoffset:0}}
@keyframes hllTcFade{to{opacity:0}}
.hll-tc__pen{position:absolute;left:0;top:0;width:clamp(16px,.42em,30px);height:clamp(26px,.67em,48px);z-index:4;display:block;pointer-events:none;opacity:0;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.hll-tc__pen svg{display:block;width:100%;height:100%}
.hll-tc__flag{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;z-index:3;display:block;pointer-events:none;border-radius:50%;background:#c4576a;box-shadow:0 0 0 4px rgba(196,87,106,.28);scale:0}
.hll-tc__flag::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(196,87,106,.7);opacity:0}
html.hl-on .hl--trace.hl-in .hll-tc__flag{animation:hllTcFlag 1.6s var(--hl-spring) var(--fd,1.8s) both}
html.hl-on .hl--trace.hl-in .hll-tc__flag::after{animation:hllTcRing 1.1s ease-out var(--fd,1.8s) both}
@keyframes hllTcFlag{0%{scale:0}22%{scale:1.35}36%{scale:1}82%{scale:1;opacity:1}100%{scale:1;opacity:0}}
@keyframes hllTcRing{0%{opacity:.9;scale:.6}100%{opacity:0;scale:3.2}}
html.hl-on .hl--trace h2 .hl-w{clip-path:inset(-25% 100% -35% -8%)}
html.hl-on .hl--trace.hl-in h2 .hl-w{clip-path:inset(-25% -8% -35% -8%);transition:clip-path var(--wl,300ms) linear var(--wd,0ms)}
html.hl-on .hl--trace .eyebrow{opacity:0;translate:70px 0}
html.hl-on .hl--trace.hl-in .eyebrow{opacity:1;translate:0 0;transition:opacity .45s ease .05s,translate 1.3s cubic-bezier(.2,.7,.2,1) .05s}
.hll-tc__carriage{position:absolute;top:-6px;bottom:-6px;left:0;width:3px;margin-left:-4px;display:block;pointer-events:none;border-radius:2px;background:#7fc2b1;box-shadow:0 0 12px rgba(127,194,177,.6);opacity:0}
html.hl-on .hl--trace .hll-tc__quote{clip-path:inset(-15% 100% -15% -4%)}
html.hl-on .hl--trace.hl-in .hll-tc__quote{clip-path:inset(-15% -4% -15% -4%);transition:clip-path 1s cubic-bezier(.45,.05,.4,1) var(--qd,2.2s)}
html.hl-on .hl--trace.hl-in .hll-tc__carriage{animation:hllTcCar 1s cubic-bezier(.45,.05,.4,1) var(--qd,2.2s) both}
@keyframes hllTcCar{0%{left:0;opacity:0}10%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.hl--trace.hl-done .hll-tc,.hl--trace.hl-done .hll-tc__pen,.hl--trace.hl-done .hll-tc__flag,.hl--trace.hl-done .hll-tc__paper,.hl--trace.hl-done .hll-tc__carriage{display:none}
html.hl-on .hl--trace.hl-done h2 .hl-w,html.hl-on .hl--trace.hl-done .hll-tc__quote{clip-path:none}

/* ---------- 07 · #why-ledgeriq · the scissors ---------- */
.hll-sc__bed{position:relative;isolation:isolate}
.hl--scissors h2{position:relative;z-index:2}
.hl--scissors .eyebrow{position:relative;z-index:3}
.hll-sc__sheet,.hll-sc__coupon,.hll-sc__cut{position:absolute;display:block;pointer-events:none}
.hll-sc__sheet{z-index:0;box-sizing:border-box;border-style:solid;border-color:var(--hll-paper);border-radius:3px;filter:drop-shadow(0 0 .5px rgba(138,133,120,.5)) drop-shadow(0 14px 14px rgba(20,30,45,.16))}
.hll-sc__coupon{z-index:1;background:var(--hll-paper);border-radius:1px}
.hll-sc__cut{z-index:3}
.hll-sc__cut svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.hll-sc__dash{fill:none;stroke:#8a8578;stroke-width:1.6;stroke-dasharray:7 5}
.hll-sc__kerf{fill:none;stroke:#2d5a50;stroke-width:1.4;stroke-dasharray:100;stroke-dashoffset:100}
.hll-sc__scissors{position:absolute;left:0;top:0;z-index:5;display:block;pointer-events:none;opacity:0;filter:drop-shadow(0 6px 5px rgba(20,30,45,.3))}
.hll-sc__scissors svg{display:block;width:100%;height:100%}
.hll-sc__blade{transform-box:view-box;transform-origin:30px 20px}
html.hl-on .hl--scissors .hll-sc__sheet,html.hl-on .hl--scissors .hll-sc__coupon,html.hl-on .hl--scissors .hll-sc__cut{opacity:0}
html.hl-on .hl--scissors.hl-in .hll-sc__sheet{animation:hllScSheet 3.3s var(--hl-soft) both}
html.hl-on .hl--scissors.hl-in .hll-sc__coupon{animation:hllScCoupon 3.3s var(--hl-soft) both}
html.hl-on .hl--scissors.hl-in .hll-sc__cut{animation:hllScCut 3.3s linear both}
html.hl-on .hl--scissors.hl-in .hll-sc__kerf{animation:hllScKerf 1.65s linear .7s both}
html.hl-on .hl--scissors.hl-in .hll-sc__blade--a{animation:hllScSnipA .2s ease-in-out .7s 8 both}
html.hl-on .hl--scissors.hl-in .hll-sc__blade--b{animation:hllScSnipB .2s ease-in-out .7s 8 both}
@keyframes hllScSheet{0%{opacity:0;translate:0 12px}9%{opacity:1;translate:0 0}72%{opacity:1;translate:0 0;rotate:0deg;animation-timing-function:cubic-bezier(.5,0,.8,.2)}92%{opacity:0;translate:0 2.4em;rotate:4deg}100%{opacity:0;translate:0 2.4em;rotate:4deg}}
@keyframes hllScCoupon{0%{opacity:0;translate:0 12px}9%{opacity:1;translate:0 0;box-shadow:none}72%{translate:0 0;box-shadow:0 0 0 rgba(20,30,45,0)}78%{translate:0 -3px;box-shadow:0 12px 18px -10px rgba(20,30,45,.35)}88%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0;box-shadow:none}}
@keyframes hllScCut{0%{opacity:0}9%{opacity:1}72%{opacity:1}78%,100%{opacity:0}}
@keyframes hllScKerf{to{stroke-dashoffset:0}}
@keyframes hllScSnipA{0%,100%{rotate:0deg}50%{rotate:-15deg}}
@keyframes hllScSnipB{0%,100%{rotate:0deg}50%{rotate:15deg}}
html.hl-on .hl--scissors h2 .hl-w{opacity:0;scale:1.08}
html.hl-on .hl--scissors.hl-in h2 .hl-w{opacity:1;scale:1;transition:opacity .25s ease calc(var(--k) * 70ms + .15s),scale .55s var(--hl-spring) calc(var(--k) * 70ms + .15s)}
html.hl-on .hl--scissors .eyebrow{opacity:0;translate:0 .9em}
html.hl-on .hl--scissors.hl-in .eyebrow{opacity:1;translate:0 0;transition:opacity .4s ease .05s,translate .75s var(--hl-spring) .05s}
.hl--scissors.hl-done .hll-sc__sheet,.hl--scissors.hl-done .hll-sc__coupon,.hl--scissors.hl-done .hll-sc__cut,.hl--scissors.hl-done .hll-sc__scissors{display:none}

/* ---------- 08 · #iq-suite-context · the bunting ---------- */
.hl--bunting{position:relative}
.hll-bt{position:absolute;left:0;top:-52px;height:46px;display:block;pointer-events:none}
.hll-bt svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.hll-bt__string{fill:none;stroke:#8a8578;stroke-width:1.4;stroke-linecap:round}
.hll-bt__pin{position:absolute;top:2px;width:8px;height:8px;border-radius:50%;background:var(--hll-deep);box-shadow:0 0 0 2px #fff,0 1px 3px rgba(20,30,45,.4)}
.hll-bt__pin--l{left:4px}.hll-bt__pin--r{right:4px}
.hll-bt__flag{position:absolute;width:30px;height:38px;margin-left:-15px;display:block;transform-origin:50% 0;rotate:var(--rest,0deg);filter:drop-shadow(0 4px 3px rgba(20,30,45,.22))}
.hll-bt__flag::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16) 0 4px,transparent 4px),linear-gradient(100deg,rgba(255,255,255,.22),transparent 55%),var(--c);clip-path:polygon(0 0,100% 0,50% 100%)}
.hll-bt__flag--here{width:34px;height:44px;margin-left:-17px}
html.hl-on .hl--bunting .hll-bt__string{stroke-dasharray:100;stroke-dashoffset:100}
html.hl-on .hl--bunting .hll-bt__pin{scale:0}
html.hl-on .hl--bunting .hll-bt__flag{opacity:0;rotate:-75deg}
html.hl-on .hl--bunting.hl-in .hll-bt__string{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--hl-soft) .2s}
html.hl-on .hl--bunting.hl-in .hll-bt__pin{scale:1;transition:scale .45s var(--hl-spring) .08s}
html.hl-on .hl--bunting.hl-in .hll-bt__flag{animation:hllBtSwing 1.45s cubic-bezier(.3,.6,.3,1) calc(var(--i) * 160ms + .55s) both}
@keyframes hllBtSwing{0%{opacity:0;rotate:-75deg}10%{opacity:1}38%{rotate:calc(var(--rest,0deg) + 20deg)}60%{rotate:calc(var(--rest,0deg) - 9deg)}80%{rotate:calc(var(--rest,0deg) + 3deg)}100%{opacity:1;rotate:var(--rest,0deg)}}
html.hl-on .hl--bunting.hl-done .hll-bt__flag{animation:none;opacity:1;rotate:var(--rest,0deg)}
html.hl-on .hl--bunting.hl-done.hl-live .hll-bt__flag{animation:hllBtFlutter 3.6s ease-in-out calc(var(--i) * -.8s) infinite}
@keyframes hllBtFlutter{0%,100%{rotate:var(--rest,0deg)}50%{rotate:calc(var(--rest,0deg) + 5deg)}}
html.hl-on .hl--bunting h2 .hl-w{opacity:0}
html.hl-on .hl--bunting.hl-in h2 .hl-w{animation:hllBtBreeze 1s cubic-bezier(.3,.7,.3,1) calc(var(--k) * 70ms + 1s) both}
@keyframes hllBtBreeze{0%{opacity:0;transform:translate(-.3em,.18em) skewX(-18deg)}35%{opacity:1;transform:translate(.04em,-.06em) skewX(9deg)}65%{transform:translate(0,0) skewX(-3deg)}100%{opacity:1;transform:none}}
html.hl-on .hl--bunting .eyebrow{opacity:0}
html.hl-on .hl--bunting.hl-in .eyebrow{animation:hllBtEb .9s cubic-bezier(.3,.7,.3,1) .05s both}
@keyframes hllBtEb{0%{opacity:0;transform:translateX(-18px) skewX(-14deg)}45%{opacity:1;transform:translateX(3px) skewX(5deg)}100%{opacity:1;transform:none}}
html.hl-on .hl--bunting .hll-bt__dek{opacity:0}
html.hl-on .hl--bunting.hl-in .hll-bt__dek{transform-origin:0 0;animation:hllBtCloth 1.15s cubic-bezier(.3,.7,.3,1) 1.95s both}
@keyframes hllBtCloth{0%{opacity:0;transform:translateX(-16px) skewX(-10deg)}40%{opacity:1;transform:translateX(2px) skewX(4deg)}70%{transform:skewX(-1.4deg)}100%{opacity:1;transform:none}}

/* ---------- 09 · #pricing-preview · the split-flap board ---------- */
.hl--splitflap .hll-sf__cell{position:relative;z-index:0;text-align:center;transition:color .55s ease}
.hll-sf__cell::before,.hll-sf__cell::after{content:"";position:absolute;pointer-events:none;opacity:0}
.hll-sf__cell::before{z-index:-1;left:.012em;right:.012em;top:.07em;bottom:.03em;border-radius:.06em;background:linear-gradient(180deg,#2c2c2c 0 49.5%,#151515 50.5% 100%);box-shadow:0 .03em .05em rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.hll-sf__cell::after{left:.012em;right:.012em;top:calc(50% + .02em);height:1px;background:rgba(0,0,0,.75);box-shadow:0 1px 0 rgba(255,255,255,.1)}
.hll-sf__cell--sm::before{top:-3px;bottom:-3px;left:0;right:1px;border-radius:2px}
html.hl-on .hl--splitflap:not(.hll-sf--off) .hll-sf__cell{color:#faf8f5;-webkit-text-fill-color:#faf8f5}
html.hl-on .hl--splitflap:not(.hl-in) .hll-sf__cell{color:transparent;-webkit-text-fill-color:transparent}
html.hl-on .hl--splitflap.hl-in .hll-sf__cell::before,html.hl-on .hl--splitflap.hl-in .hll-sf__cell::after{opacity:1;transition:opacity .3s ease calc(var(--j) * 14ms)}
html.hl-on .hl--splitflap.hll-sf--off .hll-sf__cell::before,html.hl-on .hl--splitflap.hll-sf--off .hll-sf__cell::after{opacity:0;transition:opacity .5s ease calc(var(--j) * 12ms)}
.hll-sf__dek{position:relative}
.hll-sf__panel{position:absolute;inset:-4px -6px;display:block;pointer-events:none;border-radius:3px;opacity:0;--hll-sw:-8%;
  background:linear-gradient(180deg,transparent 0 22px,var(--cream,#faf8f5) 22px 24px) 0 0/100% 24px,linear-gradient(180deg,transparent 0 10.5px,rgba(0,0,0,.7) 10.5px 11.5px,transparent 11.5px) 0 0/100% 24px,repeating-linear-gradient(90deg,#252525 0 11px,transparent 11px 13px);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--hll-sw) - 8%),#000 var(--hll-sw));mask-image:linear-gradient(90deg,transparent calc(var(--hll-sw) - 8%),#000 var(--hll-sw))}
html.hl-on .hl--splitflap.hl-in .hll-sf__panel{opacity:1;--hll-sw:112%;transition:opacity .3s ease .3s,--hll-sw 1.15s cubic-bezier(.45,.1,.5,1) 2s}
.hl--splitflap.hl-done .hll-sf__panel{display:none}

/* ---------- 10 · #faq · the card drawer ---------- */
.hl--catalogue{position:relative}
.hl--catalogue h2{position:relative;z-index:2}
.hl--catalogue .eyebrow{position:relative;z-index:3}
.hll-cg{position:absolute;z-index:1;display:block;pointer-events:none;perspective:900px;perspective-origin:50% 0}
.hll-cg__well,.hll-cg__card,.hll-cg__guide,.hll-cg__front{position:absolute;display:block}
.hll-cg__well{left:-4px;right:-4px;top:calc(var(--card-top) - 26px);bottom:calc(var(--fh) * .5);border-radius:5px 5px 0 0;background:linear-gradient(180deg,rgba(176,138,92,0),rgba(176,138,92,.22));box-shadow:inset 3px 0 0 rgba(176,138,92,.25),inset -3px 0 0 rgba(176,138,92,.25)}
.hll-cg__card{left:8px;right:8px;top:calc(var(--card-top) - var(--i) * 12px);bottom:calc(var(--fh) * .4);border-radius:6px 6px 2px 2px;background:#f4f1eb;box-shadow:0 0 0 1px rgba(138,133,120,.28),inset 0 1px 0 #fff;transform-origin:50% 100%}
.hll-cg__card--front{background:linear-gradient(180deg,transparent 0 20px,rgba(196,87,106,.55) 20px 21.5px,transparent 21.5px),repeating-linear-gradient(180deg,transparent 0 calc(.5em - 1px),rgba(91,110,174,.14) calc(.5em - 1px) .5em),#fff;box-shadow:0 0 0 1px rgba(138,133,120,.3),0 -10px 18px -14px rgba(20,30,45,.35)}
.hll-cg__guide{left:8px;right:8px;top:calc(var(--card-top) - 18px);bottom:calc(var(--fh) * .4);border-radius:3px 3px 2px 2px;background:var(--hll-wash);box-shadow:0 0 0 1px rgba(74,144,128,.35)}
.hll-cg__guide b{position:absolute;left:calc(var(--tab-x) - 8px);width:var(--tab-w);top:calc(18px - var(--card-top));height:calc(var(--card-top) - 12px);border-radius:6px 6px 0 0;background:var(--hll-wash);box-shadow:0 0 0 1px rgba(74,144,128,.35)}
.hll-cg__front{left:calc(var(--ovl,12px) * -1);right:calc(var(--ovr,12px) * -1);bottom:0;height:var(--fh);border-radius:3px 3px 6px 6px;background:linear-gradient(180deg,#c49c6a,#a77e4f 55%,#8d673e);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.15),0 16px 22px -14px rgba(20,30,45,.5)}
.hll-cg__label{position:absolute;left:50%;top:16%;width:min(46%,120px);height:38%;translate:-50% 0;border-radius:2px;background:linear-gradient(#fbf7ee,#fbf7ee) padding-box,var(--hll-brass) border-box;border:2px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.hll-cg__pull{position:absolute;left:50%;bottom:10%;width:min(26%,64px);height:26%;translate:-50% 0;border-radius:0 0 40px 40px;background:var(--hll-brass);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.25)}
html.hl-on .hl--catalogue .hll-cg{opacity:0}
html.hl-on .hl--catalogue.hl-in .hll-cg{animation:hllCgRig 3.2s linear both}
@keyframes hllCgRig{0%{opacity:0;translate:0 -18px;scale:.93;rotate:x 16deg;animation-timing-function:cubic-bezier(.2,.9,.3,1.15)}7%{opacity:1}24%{opacity:1;translate:0 0;scale:1;rotate:x 0deg}83%{opacity:1;translate:0 0;animation-timing-function:ease-in}100%{opacity:0;translate:0 12px;scale:1;rotate:x 0deg}}
html.hl-on .hl--catalogue.hl-in .hll-cg__card:not(.hll-cg__card--front){animation:hllCgFlick .5s cubic-bezier(.4,0,.3,1) calc(.6s + (3 - var(--i)) * 140ms) both}
@keyframes hllCgFlick{0%,100%{transform:none}45%{transform:rotateX(-38deg) translateY(-6px)}}
html.hl-on .hl--catalogue .hll-cg__guide,html.hl-on .hl--catalogue .eyebrow{translate:0 16px;opacity:0}
html.hl-on .hl--catalogue.hl-in .hll-cg__guide,html.hl-on .hl--catalogue.hl-in .eyebrow{translate:0 0;opacity:1;transition:translate .7s var(--hl-spring) 1.02s,opacity .25s ease 1.02s}
html.hl-on .hl--catalogue .hll-cg__card--front{transform:rotateX(-55deg)}
html.hl-on .hl--catalogue.hl-in .hll-cg__card--front{transform:none;transition:transform .8s var(--hl-spring) 1.05s}
html.hl-on .hl--catalogue h2 .hl-c{opacity:0}
html.hl-on .hl--catalogue.hl-in h2 .hl-c{animation:hllCgType .16s linear calc(var(--j) * 58ms + 1.45s) both}
@keyframes hllCgType{0%{opacity:0;translate:0 .06em}35%{opacity:1;translate:0 -.012em}100%{opacity:1;translate:0 0}}
html.hl-on .hl--catalogue.hl-done .eyebrow{transition:none}
.hl--catalogue.hl-done .hll-cg{display:none}

/* ---------- 11 · #final-cta · shadow theatre ---------- */
.hl--shadow{position:relative}
.hl--shadow > :not(.hll-sh){position:relative;z-index:1}
.hl--shadow h2{position:relative}
.hll-sh{position:absolute;z-index:0;display:block;pointer-events:none;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#eadfcb,#e2d5bd);box-shadow:inset 0 0 0 6px #4a3f33,inset 0 0 0 7px rgba(255,255,255,.18),inset 0 0 40px rgba(60,44,28,.35),0 30px 50px -30px rgba(20,30,45,.5)}
.hll-sh__lamp{position:absolute;inset:0;background:radial-gradient(70% 90% at 34% 46%,rgba(255,228,170,.95),rgba(255,242,214,.55) 45%,rgba(234,223,203,0) 80%);opacity:0}
.hll-sh__grain{position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(97deg,rgba(120,96,60,.06) 0 2px,transparent 2px 7px),repeating-linear-gradient(3deg,rgba(120,96,60,.05) 0 1px,transparent 1px 9px)}
html.hl-on .hl--shadow .hll-sh{opacity:0}
html.hl-on .hl--shadow.hl-in .hll-sh{animation:hllShStage 3.25s ease both}
html.hl-on .hl--shadow.hl-in .hll-sh__lamp{animation:hllShLamp 2.95s linear .2s both}
@keyframes hllShStage{0%{opacity:0;scale:.985}8%{opacity:1;scale:1}76%{opacity:1}100%{opacity:0}}
@keyframes hllShLamp{0%{opacity:0}9%{opacity:.85}12%{opacity:.2}19%{opacity:.95}23%{opacity:.55}30%{opacity:1}76%{opacity:1}100%{opacity:0}}
html.hl-on .hl--shadow h2 .hl-w{opacity:0}
html.hl-on .hl--shadow.hl-in h2 .hl-w{animation:hllShCast 1.15s cubic-bezier(.2,.7,.25,1) calc(var(--k) * 130ms + .75s) both,hllShInk 3.2s linear both}
html.hl-on .hl--shadow.hl-in h2 em .hl-w{animation:hllShCast 1.15s cubic-bezier(.2,.7,.25,1) calc(var(--k) * 130ms + .75s) both,hllShInkEm 3.2s linear both}
@keyframes hllShCast{0%{opacity:0;filter:blur(13px);scale:1.32;translate:var(--sx,0) .12em}25%{opacity:.8}100%{opacity:1;filter:blur(0);scale:1;translate:0 0}}
@keyframes hllShInk{0%,72%{color:rgba(40,30,20,.82)}100%{color:var(--ink,#1a1a1a)}}
@keyframes hllShInkEm{0%,72%{color:rgba(40,30,20,.82)}100%{color:var(--liq-deep,#2d5a50)}}
html.hl-on .hl--shadow .eyebrow{opacity:0}
html.hl-on .hl--shadow.hl-in .eyebrow{animation:hllShFlick 1s linear .28s both}
@keyframes hllShFlick{0%{opacity:0}18%{opacity:.9}26%{opacity:.15}40%{opacity:1}48%{opacity:.6}62%,100%{opacity:1}}
html.hl-on .hl--shadow .hll-sh__dek{opacity:0}
html.hl-on .hl--shadow.hl-in .hll-sh__dek{animation:hllShWalk 1.2s cubic-bezier(.3,.6,.3,1) 1.8s both,hllShInkP 3.2s linear both}
@keyframes hllShWalk{0%{opacity:0;translate:-64px 0;filter:blur(7px)}25%{translate:-44px -3px}45%{opacity:1;translate:-26px 0;filter:blur(2px)}65%{translate:-10px -2px;filter:blur(0)}100%{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes hllShInkP{0%,72%{color:rgba(40,30,20,.75)}100%{color:var(--ink-3,#6b6b6b)}}
.hl--shadow.hl-done .hll-sh{display:none}
html.hl-on .hl--shadow.hl-done h2 .hl-w,html.hl-on .hl--shadow.hl-done .hll-sh__dek{filter:none}

/* ---------- 12 · .iqbrv · the key ---------- */
.hl--key h2{position:relative}
.hll-ky__plate{position:absolute;z-index:3;display:block;pointer-events:none;transform-origin:0 50%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.hll-ky__plate > svg{position:absolute;inset:0;width:100%;height:100%}
.hll-ky__hole{position:absolute;left:50%;top:50%;width:.2em;height:.46em;translate:-50% -50%;display:block}
.hll-ky__hole::before{content:"";position:absolute;left:0;top:0;width:.2em;height:.2em;border-radius:50%;background:#14243a;box-shadow:inset 0 2px 2px rgba(0,0,0,.6)}
.hll-ky__hole::after{content:"";position:absolute;left:.035em;top:.12em;width:.13em;height:.32em;background:#14243a;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.hll-ky__slot{position:absolute;display:block;overflow:hidden;z-index:2}
.hll-ky__key{position:absolute;display:block;transform-origin:50% 50%}
.hll-ky__key svg{display:block;width:100%;height:100%}
html.hl-on .hl--key .hll-ky__plate{opacity:0}
html.hl-on .hl--key.hl-in .hll-ky__plate{animation:hllKyPlate 3.1s linear .3s both}
@keyframes hllKyPlate{0%{opacity:0;scale:.6;transform:perspective(500px) rotateY(0deg);animation-timing-function:cubic-bezier(.2,1.4,.4,1)}10%{opacity:1;scale:1}52%{transform:perspective(500px) rotateY(0deg);translate:0 0}54%{translate:1.5px 0}56%{translate:-1px 0}58%{translate:0 0;transform:perspective(500px) rotateY(0deg);animation-timing-function:cubic-bezier(.45,.05,.4,1)}74%{opacity:1;transform:perspective(500px) rotateY(100deg)}86%,100%{opacity:0;scale:1;transform:perspective(500px) rotateY(106deg)}}
html.hl-on .hl--key .hll-ky__key{opacity:0}
html.hl-on .hl--key.hl-in .hll-ky__key{animation:hllKyKey 1.35s linear .85s both}
@keyframes hllKyKey{0%{opacity:0;translate:3.4em 0;transform:perspective(300px) rotateX(0deg);animation-timing-function:cubic-bezier(.25,.8,.35,1)}10%{opacity:1}56%{translate:0 0;transform:perspective(300px) rotateX(0deg);animation-timing-function:cubic-bezier(.5,0,.3,1.3)}80%,100%{opacity:1;translate:0 0;transform:perspective(300px) rotateX(78deg)}}
html.hl-on .hl--key .hll-ky__pin{opacity:0}
html.hl-on .hl--key.hl-in .hll-ky__pin{animation:hllKyPin .42s cubic-bezier(.55,0,.6,1.35) calc(var(--k) * 70ms + .1s) both}
@keyframes hllKyPin{0%{opacity:0;translate:0 -.5em}55%{opacity:1;translate:0 .05em}100%{opacity:1;translate:0 0}}
html.hl-on .hl--key .hll-ky__free{opacity:0;transform-origin:0 0}
html.hl-on .hl--key.hl-in .hll-ky__free{animation:hllKySwing 1.15s ease-out 2.15s both,hllKyGlow 1.6s ease 2.2s both}
@keyframes hllKySwing{0%{opacity:0;rotate:-16deg}12%{opacity:1}36%{rotate:8deg}58%{rotate:-3.5deg}80%{rotate:1.2deg}100%{opacity:1;rotate:0deg}}
@keyframes hllKyGlow{0%{text-shadow:0 0 0 rgba(233,201,138,0)}35%{text-shadow:0 0 22px rgba(233,201,138,.7)}100%{text-shadow:0 0 0 rgba(233,201,138,0)}}
.hll-ky__eb{position:relative}
.hll-ky__bolt{position:absolute;left:-6px;top:50%;width:calc(100% + 12px);height:1.9em;display:block;pointer-events:none;translate:0 -50%;border-radius:3px;background:var(--hll-brass);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.35);opacity:0}
.hll-ky__bolt::after{content:"";position:absolute;right:14px;top:50%;width:.9em;height:.9em;margin-top:-.45em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3cf,#b38d4c 70%)}
html.hl-on .hl--key.hl-in .hll-ky__bolt{animation:hllKyBolt .95s cubic-bezier(.5,0,.3,1) .05s both}
@keyframes hllKyBolt{0%{opacity:0;translate:0 -50%}12%{opacity:1;translate:0 -50%}70%{opacity:1;translate:calc(-100% - 10px) -50%}100%{opacity:0;translate:calc(-100% - 18px) -50%}}
html.hl-on .hl--key .hll-ky__eb{clip-path:inset(-80% -10px -80% 100%)}
html.hl-on .hl--key.hl-in .hll-ky__eb{clip-path:inset(-80% -10px -80% -40px);transition:clip-path .62s cubic-bezier(.5,0,.3,1) .16s}
html.hl-on .hl--key .hll-ky__logo{opacity:0;translate:0 10px}
html.hl-on .hl--key.hl-in .hll-ky__logo{opacity:1;translate:0 0;transition:opacity .5s ease .25s,translate .7s var(--hl-spring) .25s}
.hll-ky__dek{position:relative}
.hll-ky__light{position:absolute;top:-10%;bottom:-10%;left:0;width:30%;display:block;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(233,201,138,.32),transparent);mix-blend-mode:screen;opacity:0}
html.hl-on .hl--key .hll-ky__dek{clip-path:inset(-10% 100% -10% 0)}
html.hl-on .hl--key.hl-in .hll-ky__dek{clip-path:inset(-10% -3% -10% 0);transition:clip-path 1.1s cubic-bezier(.4,.1,.3,1) 2.35s}
html.hl-on .hl--key.hl-in .hll-ky__light{animation:hllKyLight 1.1s cubic-bezier(.4,.1,.3,1) 2.35s both}
@keyframes hllKyLight{0%{left:-30%;opacity:1}85%{opacity:1}100%{left:73%;opacity:0}}
.hl--key.hl-done .hll-ky__plate,.hl--key.hl-done .hll-ky__bolt,.hl--key.hl-done .hll-ky__light{display:none}
html.hl-on .hl--key.hl-done .hll-ky__eb,html.hl-on .hl--key.hl-done .hll-ky__dek{clip-path:none}

/* ---------- nothing hides, nothing moves, for people who asked for that (the engine also stands down) ---------- */
@media (prefers-reduced-motion:reduce){
  .hl [class*="hll-"],.hl .hl-w,.hl .hl-c{animation:none !important;transition:none !important}
}