/* Variants to compare: ?spots=bento and ?story=postcard */
.pc-stamp, .pc-postmark { display: none; }

/* ---------- the five spotlights as one bento (?spots=bento) ---------- */
@media (min-width: 900px) {
.sp-bento .spotlights .wrap { display: grid !important; grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: 20px; }
.sp-bento .spot, .sp-bento .spot.flip { display: flex !important; flex-direction: column; margin: 0 !important; padding: 28px !important; min-height: 0; border-radius: 34px; gap: 18px; }
.sp-bento .spot:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 3; }
.sp-bento .spot:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
.sp-bento .spot:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }
.sp-bento .spot:nth-child(4) { grid-column: 1 / 4; grid-row: 3; }
.sp-bento .spot:nth-child(5) { grid-column: 4 / 7; grid-row: 3; }
.sp-bento .spot .stage { order: 0; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.sp-bento .spot .copy { order: 1; max-width: none !important; padding: 0 !important; }
.sp-bento .spot .display { font-size: clamp(30px, 2.6vw, 42px) !important; line-height: .95; }
.sp-bento .spot:nth-child(1) .display { font-size: clamp(44px, 4vw, 64px) !important; }
.sp-bento .spot .body { font-size: 15.5px !important; line-height: 1.5; margin-top: 8px; }
.sp-bento .spot:not(:nth-child(1)) .benefits li:nth-child(n+3) { display: none; }
.sp-bento .spot:not(:nth-child(1)) .stage .panel { display: none; }
.sp-bento .spot:not(:nth-child(1)) .stage .mascot { display: none; }
.sp-bento .spot:not(:nth-child(1)) .stage .device { position: relative !important; inset: auto !important; width: 92% !important; margin: 0 auto; transform: none !important; }
.sp-bento .spot:nth-child(1) .stage { min-height: 420px; }
}

/* ---------- "Why we made Pupik" as a postcard (?story=postcard) ---------- */
@media (min-width: 900px) {
.st-post .story .story-text { position: relative; max-width: 1180px !important; width: 100%; margin: 0 auto; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 !important; background: #FFFDF8; border-radius: 10px !important; box-shadow: 0 40px 70px -40px rgba(60, 40, 20, .45), 0 0 0 1px rgba(0, 0, 0, .04) !important; transform: rotate(-.8deg); }
.st-post .story .story-text::before { display: none !important; }
.st-post .story .story-text > p { grid-column: 2; padding: 0 64px 0 56px; margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; }
.st-post .story .story-text > p:first-of-type { padding-top: 150px; }
.st-post .story .story-text > p:first-of-type::first-letter { all: unset; }
.st-post .story .story-sign { grid-column: 1; grid-row: 1 / span 6; padding: 36px; border-right: 2px dashed #E3D7C3; margin: 0; border-top: 0 !important; display: flex; flex-direction: column; gap: 18px; }
.st-post .story .story-sign .sign-row { flex-direction: column; align-items: flex-start; gap: 18px; }
.st-post .story .founders, .st-post .story .founders img { width: 100%; height: auto; border-radius: 6px; }
.st-post .story .story-sign strong { font-size: 30px; }
.st-post .pc-stamp { display: block; position: absolute; right: 40px; top: -18px; width: 116px; padding: 8px; background: #fff; transform: rotate(4deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .25); border-radius: 18px; z-index: 2; }
.st-post .pc-postmark { display: block; position: absolute; right: 130px; top: 30px; width: 120px; height: 120px; border: 3px solid rgba(232, 80, 58, .45); border-radius: 50%; z-index: 1; }
.st-post .pc-postmark::after { content: ""; position: absolute; left: -64px; right: -64px; top: 40px; height: 40px; background: repeating-linear-gradient(transparent 0 7px, rgba(232, 80, 58, .4) 7px 10px); -webkit-mask: linear-gradient(90deg, #000 28%, transparent 28%, transparent 72%, #000 72%); mask: linear-gradient(90deg, #000 28%, transparent 28%, transparent 72%, #000 72%); }
.st-post .story .story-text > p:last-of-type { padding-bottom: 56px; }
}
@media (min-width: 900px) {
.sp-bento .spot { overflow: hidden; }
.sp-bento .spot:nth-child(1) .stage { min-height: 600px; }
.sp-bento .spot:nth-child(1) .mascot { right: 4% !important; left: auto !important; }
}