/* Fake Deal Index tile, design 36b. Source of truth: copy values exactly. */
.wi-fdi {
  --ink: #1D1D1F; --ink-2: #424245; --muted: #6E6E73; --line: #E8E8ED; --track: #F2F2F5;
  --skip: #C42121; --skip-tint: #FCE8E8; --skip-deep: #9E1A1A;
  position: relative; box-sizing: border-box; min-height: 400px; border-radius: 40px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(0,0,0,.06); color: var(--ink);
  padding: 40px 44px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.wi-fdi__main { display: flex; flex-direction: column; min-width: 0; }
.wi-fdi__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--skip); text-transform: uppercase; }
.wi-fdi__eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--skip); }
.wi-fdi__explain { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.wi-fdi__headline { margin: 18px 0 0; display: flex; align-items: flex-end; gap: 22px; font-weight: inherit; }
.wi-fdi__pct { font-size: 132px; font-weight: 800; letter-spacing: -.06em; line-height: .82; color: var(--skip); }
.wi-fdi__pct small { font-size: 72px; letter-spacing: -.02em; }
.wi-fdi__claim { padding-bottom: 6px; font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.wi-fdi__claim em { font-style: normal; color: var(--skip); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.wi-fdi__stats { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.wi-fdi__bar { height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.wi-fdi__bar span { display: block; height: 12px; border-radius: 6px; background: var(--skip); }
.wi-fdi__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wi-fdi__count { font-size: 17px; font-weight: 700; }
.wi-fdi__worst { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--skip-tint); color: var(--skip-deep); font-size: 14px; font-weight: 600; }
.wi-fdi__foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wi-fdi__line { margin: 0; font-size: 17px; color: var(--ink-2); }
.wi-fdi__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 25px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.wi-fdi__cta:hover { background: #000; }
.wi-fdi__cta:focus-visible { outline: 2px solid #0071E3; outline-offset: 3px; }

/* Right panel: example fake deal */
.wi-fdi__example { position: relative; border-radius: 28px; background: var(--skip-tint); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wi-fdi__tag { width: 240px; padding: 22px 24px 24px; box-sizing: border-box; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px rgba(196,33,33,.14); display: flex; flex-direction: column; gap: 10px; transform: rotate(3deg); }
.wi-fdi__tag-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.wi-fdi__tag-prices { display: flex; align-items: baseline; gap: 10px; }
.wi-fdi__was { font-size: 20px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--skip); text-decoration-thickness: 2px; }
.wi-fdi__now { font-size: 36px; font-weight: 800; letter-spacing: -.03em; }
.wi-fdi__usual { font-size: 15px; color: var(--ink-2); }
.wi-fdi__saving { margin-top: 2px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--track); display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--skip); }
.wi-fdi__stamp { position: relative; z-index: 1; margin: 10px -90px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px 10px; border-radius: 14px; background: #fff; color: var(--skip);
  box-shadow: inset 0 0 0 3px var(--skip), inset 0 0 0 6px #fff, inset 0 0 0 7.5px var(--skip), 0 10px 22px rgba(196,33,33,.18); transform: rotate(-10deg); }
.wi-fdi__stamp-label { font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.wi-fdi__stamp-word { font-size: 38px; font-weight: 900; letter-spacing: .06em; line-height: 1; }

.wi-fdi--solo { grid-template-columns: 1fr; }

/* Narrower standalone (non-bento) */
@media (max-width: 1100px) {
  .wi-fdi:not(.wi-fdi--in-bento) { grid-template-columns: 1fr; }
  .wi-fdi:not(.wi-fdi--in-bento) .wi-fdi__example { min-height: 300px; padding: 20px 0; }
}
@media (max-width: 600px) {
  .wi-fdi:not(.wi-fdi--in-bento) { padding: 28px 24px; border-radius: 28px; }
  .wi-fdi:not(.wi-fdi--in-bento) .wi-fdi__headline { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wi-fdi:not(.wi-fdi--in-bento) .wi-fdi__pct { font-size: 96px; }
  .wi-fdi:not(.wi-fdi--in-bento) .wi-fdi__pct small { font-size: 52px; }
  .wi-fdi:not(.wi-fdi--in-bento) .wi-fdi__claim { font-size: 21px; padding: 0; }
  .wi-fdi:not(.wi-fdi--in-bento) .wi-fdi__foot { flex-direction: column; align-items: flex-start; }
}

/*
  Home bento: keep the ORIGINAL span-5 slot beside the feed.
  Paint the full 36b artboard (1090×400) and scale it to fit the cell —
  same design (example + SKIP stamp), not a stripped layout.
*/
.hm-bento .hm-tile-fake {
  grid-column: span 5;
  grid-row: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  overflow: hidden;
  min-height: 0;
  gap: 0;
  position: relative;
  container-type: size;
  container-name: fdi-slot;
}
.hm-bento .hm-tile-fake .wi-fdi {
  position: absolute;
  top: 0;
  left: 0;
  width: 1090px;
  height: 400px;
  min-height: 400px;
  box-sizing: border-box;
  transform-origin: top left;
  /* Fit the full artboard into the slot; width usually binds first. */
  transform: scale(min(100cqw / 1090, 100cqh / 400));
}
.hm-bento .hm-tile-fake:hover .wi-fdi {
  box-shadow: 0 0 0 1px #E0E0E5, 0 18px 40px rgba(0,0,0,.10);
}

@media (max-width: 1023px) {
  .hm-bento .hm-tile-fake { grid-column: span 3; }
}
@media (max-width: 640px) {
  .hm-bento .hm-tile-fake { grid-column: span 1; }
}