/* "Find out first" (2026-10-27): B&H's own new-sale email list. The panel replaces the three link cards in #alerts (the HiBid
   one sent people to HiBid's list), a slim strip replaces the HiBid mailing link in #next, and the per-sale reminder gets an
   opt-in box. Fields, chips and the done tick reuse the contact form's look (.fld, .chip, .ch-tick). Posts to /api/subscribe. */
.alerts-section{padding-bottom:72px}
.fo-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);max-width:1080px;margin:0 auto;border-radius:30px;background:#fff;border:1px solid #EAEFF3;box-shadow:0 1px 0 #e3eaf0,0 18px 44px #1b3a5412;overflow:hidden}
.fo-main{padding:46px 50px 42px;min-width:0}
.fo-kick{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--green)}
.fo-kick svg{width:16px;height:16px}
.fo-main h3{margin-top:12px;font-size:clamp(30px,3.3vw,40px);font-weight:750;letter-spacing:-1.4px;line-height:1.05;color:var(--ink)}
.fo-lede{margin-top:12px;font-size:16.5px;line-height:1.55;max-width:470px}
.fo-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;margin-top:26px}
.fo-row .fl small{font-weight:500;color:#8b909a}
.fo-acts{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;margin-top:20px}
.fo-acts .button{min-height:54px}
.fo-fine{flex:1 1 220px;font-size:13px;line-height:1.5;color:#7a7f89;max-width:300px}
.fo-err{margin-top:14px;font-size:14px;font-weight:600;color:#B03A0A}
.fo-err button{border:0;background:none;padding:0;font:inherit;color:var(--blue-ink);text-decoration:underline;cursor:pointer}
.fo-form.is-sending .button{opacity:.7;pointer-events:none}
.fo-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* done: the tick, then the optional "what do you collect" chips (they never block the sign-up itself) */
.fo-done{display:grid;justify-items:start;gap:10px}
.fo-done:not([hidden]){animation:gf-rise .7s var(--out) backwards}
.fo-done .ch-tick{margin-bottom:4px}
.fo-done.is-already .ch-tick{background:#EAF4EE;color:var(--green)}
.fo-done h3{margin-top:0;font-size:32px}
.fo-done > p{font-size:16px;max-width:460px}
.fo-more{width:100%;margin:14px 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--line);min-width:0}
.fo-more legend{float:left;width:100%;padding:0;margin-bottom:12px;font-size:14px;font-weight:650;color:var(--ink)}
.fo-more legend small{font-weight:500;color:#8b909a}
.fo-more .chips{clear:both}
.fo-more .chip.is-sell input:checked+span{background:var(--green);border-color:var(--green)}
.fo-save{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.fo-save .fo-saved{font-size:14px;font-weight:650;color:var(--green)}
.fo-mini-btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:99px;border:0;background:var(--deep);color:#fff;font:700 14px/1 var(--font);cursor:pointer;transition:transform .5s var(--spring),background-color .3s var(--soft)}
.fo-mini-btn:disabled{opacity:.6;cursor:default}
.fo-mini-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* the photo well: three real lots, fanned like cards on a table */
.fo-art{position:relative;margin:12px;border-radius:22px;background:linear-gradient(160deg,#EEF6FB,#E2EEF7);overflow:hidden;min-height:380px}
.fo-art::after{content:'';position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,#d9e8f3aa);pointer-events:none}
.fo-fan{position:absolute;left:50%;top:50%;width:0;height:0}
.fo-fan img{position:absolute;width:172px;height:214px;object-fit:cover;border-radius:18px;background:#fff;box-shadow:0 2px 0 #ffffff,0 18px 34px #1b3a5426;transition:transform .9s var(--spring)}
.fo-fan img:nth-child(1){transform:translate(-178px,-112px) rotate(-8deg)}
.fo-fan img:nth-child(2){transform:translate(-86px,-128px) rotate(0deg);z-index:2}
.fo-fan img:nth-child(3){transform:translate(6px,-108px) rotate(7deg)}
.fo-tag{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 15px 9px 11px;border-radius:99px;background:#fff;box-shadow:0 8px 22px #1b3a5422;font-size:13.5px;font-weight:700;color:var(--deep)}
.fo-tag i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff}
.fo-tag i svg{width:13px;height:13px}
.fo-panel.is-done .fo-fan img:nth-child(2){transform:translate(-86px,-140px) rotate(0deg)}
@media (hover:hover) and (pointer:fine){
  .fo-panel:hover .fo-fan img:nth-child(1){transform:translate(-190px,-108px) rotate(-11deg)}
  .fo-panel:hover .fo-fan img:nth-child(3){transform:translate(18px,-104px) rotate(10deg)}
  .fo-mini-btn:hover{transform:translateY(-2px)}
}

/* slim strip in the closing call to action */
.fo-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:30px auto 0;max-width:560px}
.fo-strip-t{width:100%;text-align:center;font-size:14px;font-weight:650;color:#2F5673}
.fo-strip .fld{flex:1 1 240px}
.fo-strip .fld input{height:50px;border-radius:99px;padding:0 20px;background:#fff}
.fo-strip .fo-mini-btn{height:50px;padding:0 24px;background:var(--blue-ink)}
.fo-strip .fo-err{width:100%;text-align:center;margin-top:4px}
.fo-strip-done{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:650;color:var(--green)}
.fo-strip-done:not([hidden]){animation:gf-rise .6s var(--out) backwards}
.fo-strip-done svg{width:20px;height:20px}

/* reminder card opt-in (white text on the blue card) */
.rf-check.fo-opt{margin-top:9px}

@media (max-width:899px){
  .fo-panel{grid-template-columns:1fr}
  .fo-art{order:-1;min-height:0;height:132px;margin:10px 10px 0}
  .fo-art::after{display:none}
  .fo-fan img{width:84px;height:104px;border-radius:14px}
  .fo-fan img:nth-child(1){transform:translate(-128px,-50px) rotate(-7deg)}
  .fo-fan img:nth-child(2){transform:translate(-42px,-56px);z-index:2}
  .fo-fan img:nth-child(3){transform:translate(44px,-50px) rotate(6deg)}
  .fo-panel.is-done .fo-fan img:nth-child(2){transform:translate(-42px,-62px)}
  .fo-tag{display:none}
  .fo-main{padding:28px 22px 26px}
  .fo-row{grid-template-columns:1fr}
  .fo-acts .button{width:100%}
  .fo-fine{max-width:none}
  .alerts-section{padding-bottom:48px}
}
@media (prefers-reduced-motion:reduce){.fo-fan img,.fo-mini-btn{transition:none}.fo-done:not([hidden]),.fo-strip-done:not([hidden]){animation:none}}
/* the page has two .chip styles (wall filters and form chips); inside the form only the inner pill draws */
.fo-more .chip{display:inline-flex;padding:0;border:0;background:none;border-radius:0;gap:0}