/* iq-headlines.css · shared base for the per-headline paper mechanisms on the product landings (see
   iq-headlines.js). Only the plumbing lives here; every mechanism is styled in its page's own file
   (codeiq-headlines.css and so on). Hidden states are always gated on html.hl-on, which the script adds
   only when motion is allowed, so without JS or with reduced motion nothing hides anything. */
:root{
  --hl-spring:cubic-bezier(.2,1.35,.42,1);
  --hl-soft:cubic-bezier(.2,.8,.2,1);
  --hl-snap:cubic-bezier(.5,0,.2,1);
  --hl-paper:#fffdf9;
  --hl-card:#f5f2ed;
  --hl-edge:0 0 0 1px rgba(138,133,120,.24),0 1px 0 rgba(255,255,255,.9) inset,0 12px 22px -14px rgba(20,30,45,.42);
}
.hl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hl .hl-w{display:inline-block;white-space:nowrap}
.hl .hl-c{display:inline-block}
.hl em[data-hl-grad]{background-image:none !important}
/* slices: copies over an invisible original */
.hl .hl-slices{position:relative}
.hl .hl-slices__src{display:block;opacity:0}
.hl .hl-slice{position:absolute;left:0;right:0;top:0;display:block;pointer-events:none}
.hl.hl-done .hl-slices__src{opacity:1}
.hl.hl-done .hl-slice{display:none}