/* motion.css · icommittaxfrauds: sticky next step, ticker, motion helpers. Colours are the Style Guide tokens. */

/* Hero: one primary action, one quiet link */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.cta-row .btn{width:fit-content;min-width:0}
.cta-row .alt{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:17px;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.cta-row .alt:hover{text-decoration-thickness:2px}
.cta-row .alt .ico{width:18px;height:18px}

/* Sticky next step: phones only, after the hero, never over another call to action */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--bone);border-top:1px solid var(--ink);transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.stick.on{transform:none;pointer-events:auto}
.stick .btn{width:100%;min-height:52px}
.stick-on .toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.stick{display:none}}

/* Ticker: a black band of plain lines between the hero and FILE 001 */
.ticker{background:var(--black);color:var(--bone);overflow:hidden;border-block:1px solid var(--black);padding:14px 0;contain:paint}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-track>span{display:flex;flex:none;align-items:center;font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(18px,4.2vw,30px);line-height:1;white-space:nowrap}
.ticker-track>span>i{font-style:normal;padding:0 .55em}
.ticker-track>span>b{font-weight:400;width:.32em;height:.32em;background:var(--bone);display:inline-block}
.ticker-track>span>em{font-family:var(--sans);font-style:italic;text-transform:none;letter-spacing:0;font-size:.62em;padding:0 .7em}

/* Split lines keep their descenders */
.mo .ln{padding-bottom:.06em;margin-bottom:-.06em}
@media (prefers-reduced-motion:reduce){.stick{transition:none}}

/* ---------- The FILE card ----------
   An index card with a file tab, built from real faces in CSS 3D (no WebGL). The wordmark and cat are the
   master PNGs, flat and untouched: Ink on Bone, Bone on Black. No shadows, glows or gradients: each face takes
   one flat tint from the light (set by motion.js), and the edges give it depth. */
.file3d{padding:clamp(72px,12vw,140px) 0;overflow:hidden}
.file3d .wrap{display:grid;gap:clamp(48px,8vw,80px);align-items:center}
@media (min-width:900px){.file3d .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.c3{--w:min(80vw,460px);--h:calc(var(--w) * .6);--th:calc(var(--w) * .11);--d:7px;--sf:0;--sb:0;
  position:relative;width:var(--w);height:calc(var(--h) + var(--th));margin:0 auto;perspective:1300px;
  touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.c3.held{cursor:grabbing}
.c3-obj,.c3-tilt,.c3-spin{position:absolute;inset:0;transform-style:preserve-3d}
.c3-spin{transform:rotateX(12deg) rotateY(-22deg)}
.c3 .bx{position:absolute;width:var(--bw);height:var(--bh);transform-style:preserve-3d}
.c3 .body{--bw:var(--w);--bh:var(--h);left:0;top:var(--th)}
.c3 .tabx{--bw:calc(var(--w) * .36);--bh:calc(var(--th) + 1px);left:6%;top:0}
.c3 .f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.c3 .f::after{content:"";position:absolute;inset:0;pointer-events:none}
.c3 .front{background:var(--bone);color:var(--ink);transform:translateZ(calc(var(--d) / 2))}
.c3 .front::after{background:var(--black);opacity:var(--sf)}
.c3 .back{background:var(--black);color:var(--bone);transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.c3 .back::after{background:var(--bone);opacity:calc(.07 - var(--sb) * .2)}
.c3 .e{position:absolute;background:var(--stone)}
.c3 .l,.c3 .r{top:0;height:100%;width:var(--d);left:calc(50% - var(--d) / 2)}
.c3 .l{transform:rotateY(-90deg) translateZ(calc(var(--bw) / 2))}
.c3 .r{transform:rotateY(90deg) translateZ(calc(var(--bw) / 2))}
.c3 .t,.c3 .b{left:0;width:100%;height:var(--d);top:calc(50% - var(--d) / 2)}
.c3 .t{transform:rotateX(90deg) translateZ(calc(var(--bh) / 2))}
.c3 .b{transform:rotateX(-90deg) translateZ(calc(var(--bh) / 2))}
.c3 .tabx .f{display:flex;align-items:center;padding:0 9%;font-family:var(--display);font-size:calc(var(--w) * .052);letter-spacing:-.01em;line-height:1}
.c3 .tabx .back{justify-content:flex-end}
.c3 .body .front{display:grid;grid-template-rows:auto 1fr auto;padding:9% 7% 7%}
.c3 .rule{height:2px;background:var(--ink)}
.c3 .wm{align-self:center;justify-self:center;width:92%}
.c3 .note{font-style:italic;font-size:calc(var(--w) * .036);line-height:1.2}
.c3 .body .back{display:grid;place-items:center}
.c3 .body .back img{width:30%}
.c3-hint{display:none;text-align:center;font-style:italic;font-size:15px;margin-top:44px;color:var(--bone);opacity:.6}
.mo .c3-hint{display:block}
.c3-copy .st{font-size:clamp(44px,9vw,104px);display:block}
.c3-copy .as{display:block;text-align:right;font-size:clamp(19px,3.4vw,32px);margin-top:.35em}
.c3-copy .inner{display:inline-block;max-width:100%}
.c3-copy .btn{margin-top:clamp(28px,5vw,44px)}
.c3-copy .micro{margin-top:12px;max-width:44ch;color:var(--bone);opacity:.75}
@media (min-width:900px){.c3{--w:min(42vw,560px)}.c3-copy .st{font-size:clamp(48px,5.2vw,86px)}}
.promo-a.solo,.promo-b.solo{grid-template-columns:1fr}
.promo-b.solo .txt{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.promo-b.solo .catmark{margin-top:0}

/* Header call to action: a compact Highlight button (founder, 15 Oct) */
.bar-end a{min-height:40px;padding:8px 16px;background:var(--hi);color:var(--ink);text-decoration:none;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--hi);transition:background-color .15s,color .15s}
.bar-end a:hover{background:transparent;color:var(--hi)}
.bar-end a:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.stick{width:100%;max-width:100vw;box-sizing:border-box}
.stick .btn{min-width:0;max-width:100%;white-space:normal}
.skip{max-width:calc(100vw - 2 * var(--g));white-space:normal}
/* page headlines: the name is one long word, so size it to fit the narrowest phones */
@media (max-width:899px){.page-head.light h1{font-size:clamp(24px,8.2vw,84px);overflow-wrap:break-word}}
.js .dh-stage .c3{visibility:hidden}
.js.no3d .dh-stage .c3{visibility:visible}