/* Polyfetti - the Pop-sticker banner on the website (owner, 2026-10-10). Hard-edged stickers with an offset shadow on the brand blue, the same
   look as the review email and the account page. Generated markup: app/src/site-banner.js, written into pages by scripts/build-banners.js.
   Sizes: .pf-wall is the full wall (three stickers and Fetti); .pf-friend, .pf-review and .pf-resale are the smaller strips for pages that
   already have a main job. */

.pf-banner {
  --pf-ink: #17252B; --pf-gold: #E8C468; --pf-mint: #D6EBDD; --pf-rose: #C9637E; --pf-blue: #274A78;
  box-sizing: border-box;
  width: min(1100px, calc(100% - 2.4rem));
  margin: 28px auto;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: var(--pf-blue);
  color: #fff;
  position: relative;
  font-family: var(--sans, "Zen Kaku Gothic New", system-ui, sans-serif);
}
.pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pf-head h2 { margin: 0; font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.pf-head p { margin: 2px 0 12px; font-size: .9rem; opacity: .92; }
.pf-fetti { flex: none; width: 92px; height: auto; margin: -8px 6px -22px 0; transform: rotate(4deg); filter: drop-shadow(0 5px 6px rgba(0,0,0,.28)); }

.pf-rail { display: grid; gap: 12px; }
.pf-wall .pf-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-review .pf-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-friend .pf-rail, .pf-resale .pf-rail { grid-template-columns: minmax(0, 1fr); }

.pf-sticker {
  display: grid; gap: 3px; align-content: start;
  padding: 11px 13px 12px;
  border: 3px solid var(--pf-ink); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--pf-ink);
  color: var(--pf-ink);
  min-width: 0;
}
.pf-gold { background: var(--pf-gold); }
.pf-mint { background: var(--pf-mint); }
.pf-rose { background: var(--pf-rose); color: #fff; }
.pf-big { font-family: var(--round, "Zen Maru Gothic", sans-serif); font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.pf-sticker strong { font-size: .98rem; }
.pf-sticker span { font-size: .86rem; line-height: 1.4; }
.pf-sticker a { justify-self: start; margin-top: 4px; font-weight: 800; font-size: .9rem; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pf-sticker a:focus-visible, .pf-agency a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* the strip under the stickers, in the same template, fitted to the frame */
.pf-agency {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 10px 14px;
  background: #F4F8E8; color: var(--pf-ink);
  border: 3px solid var(--pf-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--pf-ink);
}
.pf-agency b { font-family: var(--round, "Zen Maru Gothic", sans-serif); font-size: 1rem; }
.pf-agency span { flex: 1 1 16rem; font-size: .88rem; }
.pf-agency a {
  font-weight: 800; font-size: .9rem; color: #fff; background: var(--pf-ink); text-decoration: none;
  padding: .45rem 1rem; border-radius: 999px; white-space: nowrap;
}

/* smaller frames: the strips take less room than the wall */
.pf-friend, .pf-review, .pf-resale { padding: 12px 12px 12px; margin-block: 22px; }
.pf-friend .pf-sticker, .pf-resale .pf-sticker { grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; }
.pf-friend .pf-sticker strong, .pf-resale .pf-sticker strong { display: none; }
.pf-friend .pf-sticker a, .pf-resale .pf-sticker a { margin-top: 0; }

@media (max-width: 760px) {
  .pf-banner { width: calc(100% - 1.6rem); margin-block: 20px; }
  .pf-fetti { width: 70px; margin-bottom: -16px; }
  .pf-wall .pf-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 0 2px 8px; margin: 0 -2px; }
  .pf-wall .pf-sticker { flex: 0 0 78%; scroll-snap-align: start; }
  .pf-review .pf-rail { grid-template-columns: minmax(0, 1fr); }
  .pf-friend .pf-sticker, .pf-resale .pf-sticker { grid-template-columns: minmax(0, 1fr); }
}