/* Static homepage photo hero. Keep this file animation-free. */
.hero.hero-photo{
  min-height:clamp(620px,calc(100vh - 74px),760px);
  padding:0;
  background-color:#eef3f4;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 28%,rgba(255,255,255,.62) 45%,rgba(255,255,255,.08) 68%),
    url('/assets/herorisetlisting.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color:#092e50;
}
.hero.hero-photo:before,
.hero.hero-photo:after{content:none}
.hero.hero-photo .hero-grid{display:flex;align-items:center;min-height:inherit}
.hero.hero-photo .hero-copy{width:min(640px,58%);padding:72px 0 58px;text-align:left}
.hero.hero-photo h1{max-width:640px;margin:0;font-size:clamp(2.9rem,4.1vw,4.3rem);line-height:1.04}
.hero.hero-photo .hero-title-line{display:block}
.hero.hero-photo .hero-title-accent{color:#0877d3}
.hero.hero-photo .hero-sub{max-width:590px;margin:22px 0 0;font-size:clamp(1.05rem,1.45vw,1.3rem)}
.hero.hero-photo .hero-description{max-width:565px;margin:14px 0 0;font-size:.94rem;line-height:1.75}
.hero.hero-photo .actions{justify-content:flex-start;margin-top:28px}
.hero.hero-photo .actions .hero-cta-icon{width:19px;height:19px;flex-shrink:0}
.hero.hero-photo .actions .hero-cta-arrow{width:17px;height:17px;flex-shrink:0;margin-left:3px}
.hero.hero-photo .button.secondary{border-color:#b8d3e7;background:#fff;color:#0a5eaa}
.hero.hero-photo .hero-etsy-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:22px;
  color:#6a7075;
  font-size:.9rem;
  font-weight:500;
  line-height:1.25;
}
.hero.hero-photo .hero-etsy-powered{letter-spacing:.005em}
.hero.hero-photo .hero-etsy-logo{display:inline-flex;align-items:center;justify-content:center;cursor:help;outline:none}
.hero.hero-photo .hero-etsy-logo img{display:block;width:48px;height:24px}
.hero.hero-photo .hero-etsy-api{color:#4e555a;font-weight:500;letter-spacing:.01em}
.hero.hero-photo .hero-etsy-logo:focus-visible{outline:2px solid rgba(244,88,0,.4);outline-offset:3px}
.hero.hero-photo .hero-etsy-tooltip{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:calc(100% + 12px);
  width:min(430px,calc(100vw - 32px));
  padding:11px 14px;
  border-radius:8px;
  background:#172d3f;
  color:#fff;
  font-size:.72rem;
  font-weight:650;
  line-height:1.5;
  text-align:center;
  box-shadow:0 14px 34px rgba(5,28,45,.24);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,6px);
  transition:opacity .16s ease,transform .16s ease;
}
.hero.hero-photo .hero-etsy-tooltip:after{content:"";position:absolute;top:100%;left:50%;border:7px solid transparent;border-top-color:#172d3f;transform:translateX(-50%)}
.hero.hero-photo .hero-etsy-logo:hover~.hero-etsy-tooltip,
.hero.hero-photo .hero-etsy-logo:focus~.hero-etsy-tooltip{opacity:1;transform:translate(-50%,0)}

@media(max-width:1020px){
  .hero.hero-photo{
    min-height:650px;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 42%,rgba(255,255,255,.42) 70%),
      url('/assets/herorisetlisting.webp');
    background-position:58% center;
  }
  .hero.hero-photo .hero-copy{width:min(590px,68%)}
  .hero.hero-photo h1{font-size:clamp(2.55rem,5.7vw,3.7rem)}
}

@media(max-width:680px){
  .hero.hero-photo{
    min-height:680px;
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 56%,rgba(255,255,255,.66) 100%),
      url('/assets/herorisetlisting.webp');
    background-position:68% center;
  }
  .hero.hero-photo .hero-grid{align-items:flex-start}
  .hero.hero-photo .hero-copy{width:100%;padding:54px 0 38px;text-align:center}
  .hero.hero-photo h1{max-width:440px;margin:0 auto;font-size:clamp(2.05rem,10vw,2.75rem);line-height:1.1}
  .hero.hero-photo .hero-sub{max-width:430px;margin:18px auto 0;font-size:1rem}
  .hero.hero-photo .hero-description{max-width:430px;margin:12px auto 0;font-size:.82rem;line-height:1.65}
  .hero.hero-photo .actions{justify-content:center;margin:22px auto 0}
  .hero.hero-photo .hero-etsy-badge{margin-top:20px;font-size:.82rem}
}

/* Floating Chrome extension entry point. */
.landing-extension-float{
  position:fixed;
  z-index:70;
  right:20px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:64px;
  padding:8px 12px 8px 9px;
  border:1px solid rgba(129,181,219,.58);
  border-radius:18px;
  background:#fff;
  color:#103957;
  text-decoration:none;
  box-shadow:0 18px 44px rgba(8,65,111,.2),inset 0 1px 0 #fff;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.landing-extension-icon{display:grid;width:46px;height:46px;flex:0 0 46px;place-items:center;border:1px solid #d7e8f4;border-radius:14px;background:linear-gradient(145deg,#fff,#edf7ff);box-shadow:0 7px 17px rgba(9,83,140,.11)}
.landing-extension-icon svg{width:28px;height:28px}
.landing-extension-copy{display:grid;gap:1px;min-width:0}
.landing-extension-copy b{font-size:.76rem;line-height:1.35;white-space:nowrap}
.landing-extension-copy small{color:#668198;font-size:.59rem;line-height:1.4;white-space:nowrap}
.landing-extension-arrow{width:17px;height:17px;fill:none;stroke:#0873c8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.landing-extension-float:hover{border-color:#77bfe9;box-shadow:0 22px 50px rgba(8,76,130,.27),0 0 0 4px rgba(26,146,218,.08);transform:translateY(-4px)}
.landing-extension-float:hover .landing-extension-arrow{transform:translate(2px,-2px)}
.landing-extension-float:focus-visible{outline:3px solid rgba(8,117,209,.28);outline-offset:3px}

@media(max-width:650px){
  .landing-extension-float{display:none}
}

@media(prefers-reduced-motion:reduce){
  .landing-extension-float,
  .landing-extension-arrow,
  .hero.hero-photo .hero-etsy-tooltip{transition:none}
}
