/* worthitforyou home hero, design 35c. Source of truth: design/handoff/hero-35c/reference/hero.css
   Values copied exactly. Selectors scoped under .wi-hero so they cannot collide with
   SiteHeader (.wi-actions / .wi-live) or WiApp (.wi-card). */
.wi-hero {
  --ink: #1D1D1F; --ink-2: #424245; --muted: #6E6E73; --line: #E8E8ED; --ground: #F5F5F7; --chip: #F5F5F7;
  --yellow: #FFC21A; --yellow-pale: #FFF5D6; --off-bg: #FFF1BF; --off-ink: #6B4A00;
  --buy: #0b7a45; --wait: #8A6304; --skip: #C42121; --fair: #5D6675;
  --buy-tint: #E6F6EC; --wait-tint: #FBF1DC; --skip-tint: #FCE8E8; --fair-tint: #EEF0F3;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--ground);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; color: var(--ink);
}
@keyframes wiHeroPulse {
  0% { transform: scale(1); opacity: .7 }
  100% { transform: scale(2.6); opacity: 0 }
}
@keyframes wiStampFloat {
  0%, 100% { transform: rotate(-6deg) translateY(0) }
  50% { transform: rotate(-6deg) translateY(-3px) }
}
.wi-hero__inner { max-width: 1312px; margin: 0 auto; padding: 28px 64px 36px; box-sizing: content-box; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

/* Reset SiteHeader `.wi-live { margin-left:auto }` so the badge stays centred. */
.wi-hero .wi-live { display: inline-flex; align-items: center; gap: 10px; height: 34px; margin: 16px 0 0; padding: 0 14px 0 12px; border-radius: 17px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.hm-loaded .wi-hero .wi-live { opacity: 1; transform: none }
.wi-hero .wi-live__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--buy); box-shadow: 0 0 0 4px rgba(11,122,69,.14); }
.wi-hero .wi-live__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--buy); animation: wiHeroPulse 1.6s ease-out infinite }

.wi-hero__title { margin: 0; font-size: 92px; font-weight: 700; letter-spacing: -.055em; line-height: 1; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out) .06s, transform .55s var(--ease-out) .06s; }
.hm-loaded .wi-hero__title { opacity: 1; transform: none }
.wi-hero__hl { display: inline-block; padding: 0 16px 8px; border-radius: 24px; background: var(--yellow); transform: rotate(-2deg) scale(.92); transform-origin: 50% 60%; transition: transform .55s var(--ease-out) .28s; }
.hm-loaded .wi-hero__hl { transform: rotate(-2deg) scale(1) }
.wi-hero__sub { margin: 0; font-size: 22px; line-height: 1.4; color: var(--ink-2); opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease-out) .12s, transform .5s var(--ease-out) .12s; }
.hm-loaded .wi-hero__sub { opacity: 1; transform: none }
.wi-hero__note { margin: 0; font-size: 17px; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out) .22s, transform .5s var(--ease-out) .22s; }
.hm-loaded .wi-hero__note { opacity: 1; transform: none }

.wi-hero .wi-pills { display: flex; gap: 10px; }
.wi-hero .wi-pill { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 22px; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); }
.hm-loaded .wi-hero .wi-pill { opacity: 1; transform: none }
.hm-loaded .wi-hero .wi-pill:nth-child(1) { transition-delay: .16s }
.hm-loaded .wi-hero .wi-pill:nth-child(2) { transition-delay: .2s }
.hm-loaded .wi-hero .wi-pill:nth-child(3) { transition-delay: .24s }
.hm-loaded .wi-hero .wi-pill:nth-child(4) { transition-delay: .28s }
.wi-hero .wi-pill svg { flex: none; }

/* Colour per verdict */
.wi-hero .is-buy  { --v: var(--buy);  --t: var(--buy-tint); }
.wi-hero .is-wait { --v: var(--wait); --t: var(--wait-tint); }
.wi-hero .is-skip { --v: var(--skip); --t: var(--skip-tint); }
.wi-hero .is-fair { --v: var(--fair); --t: var(--fair-tint); }
.wi-hero .wi-pill, .wi-hero .wi-stamp { background: var(--v); }

/* Example cards — enter staggered, fan settle, stamp floats; hover lifts (pointer-fine only). */
.wi-hero .wi-examples { margin-top: 8px; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: left; }
.wi-hero .wi-card {
  position: relative; border-radius: 30px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(0,0,0,.06);
  padding: 14px 14px 20px; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  opacity: 0;
  transition: opacity .5s var(--ease-out), transform .55s var(--ease-out), box-shadow .35s ease;
  border: 0; margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; color: inherit;
  text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none;
  text-decoration: none;
}
.wi-hero .wi-card:nth-child(1) { transform: rotate(-5deg) translateY(22px) scale(.97); transition-delay: .32s }
.wi-hero .wi-card:nth-child(2) { transform: rotate(4deg) translateY(22px) scale(.97); transition-delay: .4s }
.wi-hero .wi-card:nth-child(3) { transform: rotate(-3deg) translateY(22px) scale(.97); transition-delay: .48s }
.wi-hero .wi-card:nth-child(4) { transform: rotate(5deg) translateY(22px) scale(.97); transition-delay: .56s }
.hm-loaded .wi-hero .wi-card { opacity: 1 }
.hm-loaded .wi-hero .wi-card:nth-child(1) { transform: rotate(-5deg) }
.hm-loaded .wi-hero .wi-card:nth-child(2) { transform: rotate(4deg) }
.hm-loaded .wi-hero .wi-card:nth-child(3) { transform: rotate(-3deg) }
.hm-loaded .wi-hero .wi-card:nth-child(4) { transform: rotate(5deg) }
@media (hover: hover) and (pointer: fine) {
  .hm-loaded .wi-hero .wi-card:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 26px 50px rgba(0,0,0,.1); z-index: 1; transition-delay: 0s }
}
.wi-hero .wi-card:focus-visible { outline: 2px solid #0071E3; outline-offset: 3px; }
/* Full-bleed pastel well — buttons shrink-wrap children by default, so width/min-width
   must be explicit or a tall Amazon photo collapses the tint into a thin pill. */
.wi-hero .wi-card__img {
  width: 100%; min-width: 0; max-width: 100%;
  height: 190px; flex: none; align-self: stretch;
  border-radius: 22px; background: var(--t);
  display: grid; place-items: center;
  overflow: hidden; box-sizing: border-box;
}
.wi-hero .wi-card__img img {
  display: block; width: auto; height: auto;
  max-width: 82%; max-height: 150px; object-fit: contain;
  mix-blend-mode: multiply;
  transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.wi-hero .wi-card__body {
  padding: 0 8px; display: flex; flex-direction: column; gap: 6px;
  min-width: 0; width: 100%; box-sizing: border-box;
  transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.wi-hero .wi-card.is-swap .wi-card__img img,
.wi-hero .wi-card.is-swap .wi-card__body { opacity: 0; transform: translateY(8px); }
.wi-hero .wi-stamp { position: absolute; left: 24px; top: 24px; display: flex; flex-direction: column; gap: 1px; padding: 8px 16px 10px; border-radius: 14px; color: #fff; outline: 1.5px dashed rgba(255,255,255,.5); outline-offset: -5px; box-shadow: 0 10px 20px rgba(0,0,0,.18); transform: rotate(-6deg); }
.hm-loaded .wi-hero .wi-stamp { animation: wiStampFloat 3.4s ease-in-out .9s infinite }
.hm-loaded .wi-hero .wi-card:nth-child(2) .wi-stamp { animation-delay: 1.15s }
.hm-loaded .wi-hero .wi-card:nth-child(3) .wi-stamp { animation-delay: 1.4s }
.hm-loaded .wi-hero .wi-card:nth-child(4) .wi-stamp { animation-delay: 1.65s }
@media (hover: hover) and (pointer: fine) {
  .hm-loaded .wi-hero .wi-card:hover .wi-stamp { animation-play-state: paused }
}
.wi-hero .wi-stamp__label { font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.wi-hero .wi-stamp__word { display: flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 900; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.wi-hero .wi-card__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.wi-hero .wi-card__name { font-size: 17px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wi-hero .wi-card__store { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.wi-hero .wi-card__price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wi-hero .wi-card__now { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.wi-hero .wi-off { font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--off-bg); color: var(--off-ink); white-space: nowrap; }
.wi-hero .wi-card__usual { font-size: 14px; color: var(--muted); white-space: nowrap; }
.wi-hero .wi-card__why { font-size: 14px; color: var(--ink-2); }

/* Action strip */
.wi-hero .wi-actions { margin-top: 8px; width: 100%; box-sizing: border-box; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 18px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; text-align: left; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out) .62s, transform .55s var(--ease-out) .62s; }
.hm-loaded .wi-hero .wi-actions { opacity: 1; transform: none }
.wi-hero .wi-action { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border-radius: 18px; background: var(--chip); font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; font: inherit; width: 100%; box-sizing: border-box; transition: background .2s ease, transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wi-hero .wi-action:hover { background: #EDEDF0; transform: translateY(-1px) }
  .wi-hero .wi-action--notify:hover { background: #FFEFC2 }
}
.wi-hero .wi-action:focus-visible { outline: 2px solid #0071E3; outline-offset: 2px; }
.wi-hero .wi-action__ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.wi-hero .wi-action--notify { background: var(--yellow-pale); }
.wi-hero .wi-action--notify .wi-action__ico { background: var(--yellow); }
.wi-hero .wi-mini-buy { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--buy); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; }

.wi-hero .wi-trust { display: flex; justify-content: center; gap: 28px; font-size: 15px; color: var(--ink-2); opacity: 0; transition: opacity .45s var(--ease-out) .72s; }
.hm-loaded .wi-hero .wi-trust { opacity: 1 }

/* Responsive */
@media (max-width: 1280px) { .wi-hero__title { font-size: 76px; } .wi-hero .wi-examples { gap: 16px; } }
@media (max-width: 1100px) {
  .wi-hero .wi-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .wi-hero .wi-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wi-hero .wi-action--notify { grid-column: 1 / -1; }
  .wi-hero__inner { padding: 32px 32px 28px; }
}
@media (max-width: 767px) { .wi-hero { display: none; } /* mobile uses the app-style Today screen */ }
@media (prefers-reduced-motion: reduce) {
  .wi-hero .wi-live,
  .wi-hero__title,
  .wi-hero__hl,
  .wi-hero__sub,
  .wi-hero__note,
  .wi-hero .wi-pill,
  .wi-hero .wi-card,
  .wi-hero .wi-actions,
  .wi-hero .wi-trust { opacity: 1; transform: none; transition: none; animation: none }
  .wi-hero .wi-live__dot::after,
  .hm-loaded .wi-hero .wi-stamp { animation: none }
  .wi-hero .wi-card:nth-child(1) { transform: rotate(-5deg) }
  .wi-hero .wi-card:nth-child(2) { transform: rotate(4deg) }
  .wi-hero .wi-card:nth-child(3) { transform: rotate(-3deg) }
  .wi-hero .wi-card:nth-child(4) { transform: rotate(5deg) }
  .wi-hero .wi-stamp { transform: rotate(-6deg) }
  .wi-hero__hl { transform: rotate(-2deg) }
  .hm-loaded .wi-hero .wi-card:hover { transform: none }
  .wi-hero .wi-card__img img,
  .wi-hero .wi-card__body { transition: none }
  .wi-hero .wi-card.is-swap .wi-card__img img,
  .wi-hero .wi-card.is-swap .wi-card__body { opacity: 1; transform: none }
}