/* etlabs.app: MyHQ "Your data, your device" stamp (Design, Oct 17 2026; HANDOFF.md section B).
   Image: /assets/images/hq-product/myhq-stamp.svg (light stamp only; the site has no dark mode).
   Accessible name lives on the <img alt>; one stamp per placement; MyHQ elements only. */
.myhq-stamp{position:absolute;z-index:2;display:block;height:auto;aspect-ratio:250/252;transform:rotate(6deg);pointer-events:none;user-select:none}

/* /myhq page: hangs off the phone screenshot's top-right corner (Example data pill is top-left). */
.myhq-shot-anchor{position:relative;justify-self:center;width:100%;max-width:340px}
.myhq-shot-anchor>.myhq-shot--phone{max-width:none}
.myhq-stamp--page{width:156px;top:-34px;right:-52px}
@media(max-width:900px){.myhq-stamp--page{width:132px;top:-28px;right:-18px}}
@media(max-width:600px){.myhq-stamp--page{width:112px;top:-24px;right:-6px}}

/* Home + /products MyHQ card (Design, etlabs-cards, Oct 17): sticker on the PHONE mockup's top-right corner,
   rotated 6deg like the hero stamp. The <img class="myhq-stamp myhq-stamp--card"> is the LAST child of
   .myhq-device--phone (after <picture>), so it tracks the phone at every width. This selector beats
   .myhq-device img / .myhq-device--phone img (width:100%, radius, background). .portfolio-media clips
   (overflow:hidden), so the offsets keep the rotated rosette >=7px inside the panel. */
.myhq-device--phone>img.myhq-stamp--card{width:124px;max-width:none;height:auto;padding:0;border-radius:0;background:none;object-fit:fill;top:-66px;right:-18px;left:auto;z-index:4}
@media(max-width:720px){.myhq-device--phone>img.myhq-stamp--card{width:108px;top:-54px;right:-10px}}
@media(max-width:360px){.myhq-device--phone>img.myhq-stamp--card{top:-42px;right:-8px}}

/* Legal's small print (exact): under the card description, and under the /myhq phone shot */
.myhq-smallprint{margin:-12px 0 24px;font-size:.9rem;line-height:1.5;color:#5a5650}
.myhq-smallprint--page{margin:12px 0 0;text-align:center}

@media (prefers-reduced-motion:no-preference){
  .myhq-stamp--animate{animation:myhq-stamp-in .5s cubic-bezier(.2,.9,.25,1.25) .3s both}
  @keyframes myhq-stamp-in{0%{opacity:0;transform:rotate(-8deg) scale(1.35)}60%{opacity:1;transform:rotate(8deg) scale(.96)}100%{opacity:1;transform:rotate(6deg) scale(1)}}
}
@media print{.myhq-stamp{display:none}}

/* /myhq phone shot (Oct 17, ETLabs fix): the Example data pill sat on the ETLabs wordmark/header inside the
   screenshot. It now sits in its own strip under the screenshot, bottom-left, clear of the stamp (top-right). */
.myhq-shot--phone{display:flex;flex-direction:column}
.myhq-shot--phone>.myhq-example{position:static;order:2;align-self:flex-start;margin:10px 12px 12px}

/* Home + /products: keep "ETLabs MyHQ" on one line at narrow widths (icon + name), no sideways scroll. */
.myhq-card-title .section-title{white-space:nowrap}
@media(max-width:720px){.portfolio-copy .myhq-card-title .section-title{font-size:min(2.2rem,8.2vw)}}