/* hero-book.css · the IQ Books homepage hero book (built by hero-book.js into #hero [data-hero-book]).
   Geometry here is tied to the stage's height reserve in index.html: board ratio + wrap padding-bottom
   at three breakpoints (phone, default, 1366px and up). Change them together. */
.hb{width:100%;display:flex;flex-direction:column;align-items:center}
.hb__wrap{position:relative;width:min(1200px,calc(100% - 40px));padding-bottom:17%;perspective:2600px;perspective-origin:50% 0%}
.hb__book{position:relative;width:100%;aspect-ratio:100/27;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(-27deg);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;--px:0}
.hb.is-drag .hb__book{cursor:grabbing}
.hb svg text{font-style:normal}
.hb svg text[font-style="italic"]{font-style:italic}

/* the floor page and the cover board under it */
.hb__floor{position:absolute;left:0;top:100%;width:100%;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;background:#f5f2ed}
.hb__floor::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,45,.24),transparent 13%),repeating-linear-gradient(180deg,transparent 0 22px,rgba(79,76,142,.15) 22px 23px);pointer-events:none}
.hb__floor .cf{position:absolute;inset:0 -14px -14px;background:var(--hb-cover,#2c4566);transform:translateZ(-4px);border-radius:0 0 10px 10px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* the wall: a hinged board. Inside, the month's sheet; outside, the cover. It starts shut, lying on the floor. */
.hb__board{position:absolute;inset:0;transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(-88.5deg) translateZ(-5px);will-change:transform}
.hb__case{position:absolute;inset:-12px -14px 0;border-radius:10px 10px 0 0;transform:translateZ(-4px);background:linear-gradient(180deg,var(--hb-hi,#4b6890),var(--hb-cover,#2c4566));box-shadow:0 44px 90px -24px rgba(8,14,24,.7)}
.hb__coverart{position:absolute;inset:-12px -14px 0;border-radius:10px 10px 0 0;overflow:hidden;transform:translateZ(-5px) rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hb__coverart svg{display:block;width:100%;height:100%}
.hb__coverart .glint{position:absolute;top:-20%;bottom:-20%;left:-30%;width:22%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);animation:hbGlint 1.5s ease-in-out .15s both}
@keyframes hbGlint{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(700%) skewX(-18deg)}}
.hb__page,.hb__leaf{position:absolute;inset:0;border-radius:4px 4px 0 0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hb__page svg,.hb__leaf svg{display:block;width:100%;height:100%}
.hb__page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(20,30,45,.2),transparent 20%),linear-gradient(calc(100deg + var(--px) * 14deg),transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%)}
.hb__leaf{transform:translateZ(3px);transform-origin:50% 0;box-shadow:0 10px 30px rgba(20,30,45,.25);pointer-events:none}

/* the standing pieces */
.hb__slot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:0;transform-style:preserve-3d;transition:translate .45s cubic-bezier(.2,1.6,.4,1);--sh:0}
.hb__slot::before{content:"";position:absolute;left:5%;right:5%;top:-12px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,30,45,.34),transparent);opacity:var(--sh)}
.hb__piece{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;overflow:visible;transform-origin:50% 100%;transform:rotateX(-178deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.hb__piece.sh{filter:drop-shadow(0 -1px 0 rgba(255,255,255,.9)) drop-shadow(0 6px 6px rgba(20,30,45,.24))}
@media (hover:hover){.hb__book.is-open .hb__slot:not(.hb__slot--belt):hover{translate:0 0 14px}}
.hb__fx{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.hb__chit{position:absolute;left:0;top:0;width:2.5em;height:1.5em;min-width:16px;min-height:10px;border-radius:.4em;box-shadow:0 0 0 .14em #fff,0 0 1.6em .3em currentColor;opacity:0}
.hb__chit--t{box-shadow:none;filter:blur(.12em)}
.hb__fleck{position:absolute;left:0;top:0;width:.75em;height:.45em;min-width:5px;min-height:3px;border-radius:1px;opacity:0}

/* moving parts inside the drawings */
.hb .hb-slip{transition:transform .76s cubic-bezier(.3,.9,.3,1)}
.hb .hb-slip .tab{opacity:0;transform:translateY(9px);transition:opacity .25s ease,transform .5s cubic-bezier(.3,1.8,.5,1)}
.hb .hb-slip .tab.v{transition-delay:.12s}
.hb .hb-slip .tk{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .2s ease .2s,transform .45s cubic-bezier(.3,1.9,.5,1) .2s}
.hb .hb-slip .raw{transition:opacity .15s}
.hb .hb-slip .edge2{opacity:0;transition:opacity .3s}
.hb .hb-slip.is-coded .tab,.hb .hb-slip.is-coded .tk{opacity:1;transform:none}
.hb .hb-slip.is-coded .edge2{opacity:1}
.hb .hb-slip.is-coded .raw{opacity:0}
.hb .hb-lamp{fill:rgba(255,255,255,.26);transition:fill .1s}
.hb .hb-lamp.on{fill:#f2b878}
.hb .hb-archglow{opacity:0;filter:blur(7px)}
.hb .hb-row{transition:transform .55s cubic-bezier(.3,1.25,.4,1),opacity .35s ease}
.hb .hb-row .hl{opacity:0}
.hb .hb-bal{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .5s cubic-bezier(.3,1.9,.5,1)}
.hb .hb-bal.on{opacity:1;transform:none}
.hb .hb-bar{transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,1.5,.4,1),opacity .5s}
.hb .hb-b4hl{opacity:0}
.hb .hb-st .pr{transition:stroke-dashoffset .5s cubic-bezier(.3,.8,.3,1)}
.hb .hb-st .fl{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .45s cubic-bezier(.3,1.9,.5,1)}
.hb .hb-st .ck{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s ease .15s}
.hb .hb-st.done .fl{opacity:1;transform:none}
.hb .hb-st.done .ck{stroke-dashoffset:0}
.hb .hb-sig{stroke-dasharray:100;stroke-dashoffset:100}
.hb .hb-sig.on{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.5,.1,.4,1)}
.hb .hb-stamp{opacity:0;transform:scale(2.8) rotate(-13deg);transform-box:fill-box;transform-origin:center}
.hb .hb-stamp.on{opacity:.94;transform:scale(1) rotate(-13deg);transition:transform .2s cubic-bezier(.6,0,.9,.5),opacity .08s}

/* the ribbon across the top of the wall (the page's own line; hero-book.js copies it here) */
.hb__ribbon{position:absolute;left:50%;top:0;z-index:3;width:max-content;font:500 clamp(15px,2vw,29px)/1.15 var(--serif,'Fraunces',Georgia,serif);letter-spacing:-.01em;color:#2c4566;
  transform-origin:50% 100%;transform:translate(-50%,-64%) translateZ(26px) rotateX(80deg);opacity:0;
  filter:drop-shadow(0 12px 14px rgba(20,30,45,.3)) drop-shadow(0 2px 2px rgba(20,30,45,.18));transition:transform 1.05s cubic-bezier(.2,1.3,.42,1),opacity .3s ease}
.hb__book.is-rib .hb__ribbon{transform:translate(-50%,-64%) translateZ(26px);opacity:1}
.hb__ribbon .b{position:relative;z-index:2;display:block;padding:.5em 1.35em .58em;background:linear-gradient(180deg,#fffefb,#f3eee5);clip-path:inset(0 50% 0 50%);transition:clip-path .9s cubic-bezier(.7,0,.2,1) .1s}
.hb__ribbon .b::before{content:"";position:absolute;inset:.3em .4em;border-block:1px dashed rgba(44,69,102,.24);pointer-events:none}
.hb__ribbon .b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#2c4566,#4f4c8e,#80508c,#c4576a,#d98a3d,#c4576a,#80508c,#4f4c8e,#2c4566) 0 0/200% 100%;animation:hbShimmer 9s linear infinite}
@keyframes hbShimmer{to{background-position:-200% 0}}
.hb__ribbon .tx{position:relative;display:block;white-space:nowrap}
.hb__ribbon em{font-style:italic;font-weight:400}
.hb__ribbon .rw{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .45s ease calc(var(--k) * 90ms + .75s),transform .75s cubic-bezier(.2,1.35,.4,1) calc(var(--k) * 90ms + .75s)}
.hb__ribbon em .rw{background:linear-gradient(100deg,#2c4566 0%,#4f4c8e 26%,#80508c 50%,#c4576a 74%,#d98a3d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.hb__ribbon .t{position:absolute;z-index:0;top:.45em;height:100%;width:2.2em;background:linear-gradient(180deg,#4b6890,#2c4566);transform:scaleX(0);transition:transform .65s cubic-bezier(.2,1.4,.4,1) .65s}
.hb__ribbon .t.l{left:-1.65em;transform-origin:100% 50%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,.6em 50%)}
.hb__ribbon .t.r{right:-1.65em;transform-origin:0 50%;clip-path:polygon(0 0,100% 0,calc(100% - .6em) 50%,100% 100%,0 100%)}
.hb__ribbon .f{position:absolute;z-index:1;top:100%;width:.55em;height:.45em;background:#1e3450;opacity:0;transition:opacity .2s ease .65s}
.hb__ribbon .f.l{left:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.hb__ribbon .f.r{right:0;clip-path:polygon(0 0,100% 0,0 100%)}
.hb__book.is-rib .hb__ribbon .b{clip-path:inset(0)}
.hb__book.is-rib .hb__ribbon .rw,.hb__book.is-rib .hb__ribbon .f{opacity:1;transform:none}
.hb__book.is-rib .hb__ribbon .t{transform:none}

/* from 1366px the book shares the stage with the flanks (--bw is set on the stage in index.html) */
@media (min-width:1366px){
  #hero.hero--book .hb__wrap{width:var(--bw);padding-bottom:calc(var(--bw) * .21)}
}
/* phones: a taller wall and bigger, fewer pieces */
@media (max-width:600px){
  .hb__wrap{width:calc(100% - 24px);padding-bottom:37%}
  .hb__book{aspect-ratio:100/64}
  .hb__case,.hb__coverart{inset:-8px -9px 0}
  .hb__floor .cf{inset:0 -9px -9px}
}
@media (prefers-reduced-motion:reduce){
  .hb *,.hb *::before,.hb *::after{animation:none!important;transition:none!important}
  .hb__ribbon{transform:translate(-50%,-64%) translateZ(26px);opacity:1}
  .hb__ribbon .b{clip-path:none}.hb__ribbon .rw,.hb__ribbon .f{opacity:1;transform:none}.hb__ribbon .t{transform:none}
  .hb__coverart .glint{display:none}
}

/* ---- the hero lockup (11 Nov 2026): the ledgers carry the wordmark's weight and are shelved in from the
   left, the letters rise into place, and a band of light crosses "Books" (again each time a month is kept).
   Base styles equal the last keyframe and nothing fills forwards, so the settled logo stays crisp. ---- */
#hero.hero--book .hbk__mark{stroke-width:1.55}
#hero.hero--book .hbk__mark rect[stroke="#2c4566"]{fill:rgba(169,188,216,.17)}
#hero.hero--book .hbk__mark rect[stroke="#80508c"]{fill:rgba(204,156,203,.17)}
#hero.hero--book .hbk__mark rect[stroke="#d98a3d"]{fill:rgba(242,184,120,.17)}
#hero.hero--book .hbk__iqb.lm-word{--lm-letters:430ms;--lm-step:58ms}
#hero.hero--book .hbk__sheen{opacity:0}
@media (prefers-reduced-motion:no-preference){
  #hero.hero--book .hbk__mark.lm-mark .lm-drop{animation-name:hbkShelve;animation-duration:.62s}
  #hero.hero--book .hbk__iqb.lm-word.lm-drop .lm-l{animation-name:hbkLetter;animation-duration:.72s}
  #hero.hero--book .hbk__sheen.go{animation:hbkSheen 1.15s cubic-bezier(.45,0,.3,1)}
  .hb__coverart .glint{animation-delay:.6s;animation-duration:1.1s}
}
@keyframes hbkShelve{0%{opacity:0;transform:translateX(-9px) rotate(-9deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}55%{opacity:1;transform:translateX(.5px) rotate(2.5deg)}78%{transform:translateX(0) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes hbkLetter{0%{opacity:0;transform:translateY(58px) scale(1,.8);animation-timing-function:cubic-bezier(.2,.75,.3,1)}22%{opacity:1}62%{transform:translateY(-7px) scale(1,1.03)}82%{transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes hbkSheen{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(1050px)}}

/* ---- the product landings' interlude book (iq-book.js): same book, the interlude's proportions and each
   product's own cover colours (--hb-cover, --hb-hi, --hb-accent set by the script) ---- */
.hb--il .hb__wrap{width:min(1080px,calc(100% - 28px));margin-top:clamp(24px,4vw,48px);padding-bottom:21%;perspective:2300px}
.hb--il .hb__book{aspect-ratio:100/40;transform:rotateX(-24deg)}
.hb--il .hb__case{box-shadow:0 34px 70px -20px rgba(20,30,45,.5)}
.hb--il:not(.is-live) *{animation-play-state:paused!important}
.hb .hb-slip.is-acct .tab:not(.v){opacity:1;transform:none}
.hb .hb-slip.is-acct .edge2{opacity:1}
.hb .hb-slip.is-acct .raw{opacity:0}
.hb .cq-col{--h:.12}
.hb .cq-grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--h));transition:transform .6s cubic-bezier(.2,1.4,.4,1)}
.hb .cq-cap,.hb .cq-n{transform:translateY(calc((1 - var(--h)) * var(--bh,150px)));transition:transform .6s cubic-bezier(.2,1.4,.4,1)}
.hb .cq-bar{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .6s cubic-bezier(.3,1,.4,1)}
.hb .cq-gate{transform-box:fill-box;transform-origin:50% 100%}
.hb .cq-gate .lamp{transition:fill .12s}
.hb .cq-gate.try .lamp{fill:#cfc8ba}
.hb .cq-gate.hit .lamp{fill:#f2b878}
.hb .cq-gate.hit{animation:hbGate .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes hbGate{40%{transform:scale(1.06,1.1)}}
.hb .cq-post{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.8,.5,1)}
.hb .cq-post.on{transform:translateY(-9px) scale(1.07)}
/* MatchIQ */
.hb .mq-row .hl{fill:transparent;transition:fill .3s}
.hb .mq-row.on .hl{fill:rgba(74,144,128,.13)}
.hb .mq-row.miss .hl{fill:rgba(196,87,106,.16);animation:hbBlink 1s ease-in-out infinite}
@keyframes hbBlink{50%{fill:rgba(196,87,106,.06)}}
.hb .mq-teeth .tl,.hb .mq-teeth .tr{transition:transform .35s cubic-bezier(.3,1.6,.5,1);transform:translateX(-14px)}
.hb .mq-teeth .tr{transform:translateX(14px)}
.hb .mq-teeth.on .tl,.hb .mq-teeth.on .tr{transform:none}
.hb .mq-teeth .tk,.hb .mq-teeth .no,.hb .mq-fix,.hb .pq-tab .tk,.hb .pq-row .tk{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .45s cubic-bezier(.3,1.9,.5,1)}
.hb .mq-teeth.on .tk,.hb .mq-teeth.miss .no,.hb .mq-fix.on,.hb .pq-tab.on .tk,.hb .pq-row.on .tk{opacity:1;transform:none}
.hb .mq-pull{filter:drop-shadow(0 3px 3px rgba(20,30,45,.3))}
/* LedgerIQ */
.hb .lq-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s}
.hb.lq-go .lq-line{stroke-dashoffset:0}
.hb .lq-pt{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .2s ease calc(var(--k) * .12s + .3s),transform .4s cubic-bezier(.3,1.9,.5,1) calc(var(--k) * .12s + .3s)}
.hb.lq-go .lq-pt{opacity:1;transform:none}
.hb .lq-card{transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .3s;opacity:.72}
.hb .lq-card.on{transform:translateY(-12px) scale(1.04);opacity:1}
.hb .lq-g{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.25);transition:transform .6s cubic-bezier(.2,1.5,.4,1) calc(var(--k) * .08s)}
.hb .lq-card.on .lq-g{transform:none}
.hb .lq-needle{transform:rotate(-70deg);transition:transform .9s cubic-bezier(.3,1.6,.5,1)}
.hb .lq-card.on .lq-needle{transform:rotate(38deg)}
.hb .lq-day{opacity:.25;transition:opacity .2s ease calc(var(--k) * .04s)}
.hb .lq-card.on .lq-day{opacity:1}
.hb .lq-hot{transform-box:fill-box;transform-origin:center}
.hb .lq-card.on .lq-hot{animation:hbHot 1s ease-in-out infinite}
@keyframes hbHot{50%{transform:scale(1.7)}}
/* PrepIQ */
.hb .pq-tab{transform:translateY(64px);transition:transform .7s cubic-bezier(.2,1.5,.4,1)}
.hb .pq-tab.on{transform:none}
.hb .pq-row .hl{opacity:0}
.hb .pq-row .adj,.hb .pq-row .fin{opacity:.18;transition:opacity .35s}
.hb .pq-row.on .adj,.hb .pq-row.on .fin{opacity:1}
.hb .pq-note{opacity:0;transform:translateY(-70px) rotate(14deg);transition:opacity .2s,transform .6s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(0 6px 6px rgba(20,30,45,.25))}
.hb .pq-note.on{opacity:1;transform:rotate(-3deg)}
/* the suite hero */
.hb .su-card{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.hb .su-card.on{transform:translateY(-12px) scale(1.04)}
.hb .su-card .tk,.hb .su-res{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .45s cubic-bezier(.3,1.9,.5,1)}
.hb .su-card.done .tk,.hb .su-card.done .su-res{opacity:1;transform:none}
.hb .su-node{transition:fill .2s}
.hb .su-node.on{fill:#f2b878}
.hb .su-tok{filter:drop-shadow(0 4px 4px rgba(20,30,45,.3))}
@media (max-width:600px){
  .hb--il .hb__wrap{width:calc(100% - 24px);padding-bottom:34%}
  .hb--il .hb__book{aspect-ratio:100/56}
}