/* Approved result reference: black canvas with localized blurred side light. */
.offer-layout {
  --offer-browser-clearance: 0px;
  --offer-hero-height: clamp(300px, calc(var(--create-viewport-height, 100svh) * .56), 420px);
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 480px; margin: 0 auto;
  height: auto; min-height: var(--create-viewport-height,100svh);
  display: flex; flex-direction: column; color: #fff; background: #000;
}
@media (max-width:600px) { .offer-layout { --offer-browser-clearance:68px; } }
.offer-backdrop {
  position: absolute; inset: 26px -42px auto; height: calc(var(--offer-hero-height) + 100px);
  z-index: -2; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at 13% 45%,#8b6254 0,transparent 43%),radial-gradient(ellipse at 90% 36%,#754455 0,transparent 45%),#292127;
  opacity: .58; filter: blur(34px); transform: scale(1.08);
  -webkit-mask-image: linear-gradient(transparent 0%,#000 20%,#000 70%,transparent 100%);
  mask-image: linear-gradient(transparent 0%,#000 20%,#000 70%,transparent 100%);
}
.offer-backdrop .offer-blurred-media { opacity: .55; filter: blur(48px); }
/* This shade must paint ABOVE the backdrop, rather than underneath it. */
.offer-layout::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#000 0px,#000c 44px,#0004 140px,#0006 calc(var(--offer-hero-height) - 15px),#000 calc(var(--offer-hero-height) + 65px));
}
.offer-scroll { flex: none; min-height: auto; overflow: visible; padding: 0 14px; }
.offer-headline { height:40px; margin:0 0 8px; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; font:700 clamp(17px,4.9vw,20px)/24px -apple-system,BlinkMacSystemFont,Arial,sans-serif; letter-spacing:-.4px; }
.offer-headline > svg { width:24px; height:24px; flex:0 0 24px; color:#ffad32; }
.offer-headline > span { color:#ffad32; background:linear-gradient(90deg,#ffbc32,#ff8436 48%,#f32c69); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.offer-preview {
  position:relative; isolation:isolate; overflow:hidden; margin:0 auto;
  height:var(--offer-hero-height); width:auto; max-width:100%; aspect-ratio:9 / 14; border-radius:16px;
  background:radial-gradient(ellipse at 64% 44%,#b8876e 0 16%,transparent 46%),radial-gradient(ellipse at 28% 84%,#c99a7f,transparent 52%),linear-gradient(130deg,#77727f,#624d47 54%,#a28270);
}
.offer-blurred-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(24px); transform:scale(1.2); pointer-events:none; }
.offer-preview::after,.offer-bonus::after { content:''; position:absolute; inset:0; background:#0002; pointer-events:none; }
.offer-preview-lock { position:absolute; z-index:1; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:13px; }
.offer-preview-lock > span { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#241b206b; }
.offer-preview-lock svg { width:25px; height:25px; }
.offer-preview-lock p { margin:0; }
.offer-bonuses { margin-top:12px; padding-inline:6px; }
.offer-bonuses h2 { margin:0 0 8px; font-size:15px; line-height:20px; font-weight:600; }
.offer-bonus-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%; }
.offer-bonus { color:#fff; position:relative; isolation:isolate; overflow:hidden; aspect-ratio:4 / 5; min-width:0; padding:0; border-radius:11px; border:1px solid #ffffff1a; background:radial-gradient(ellipse at 45% 62%,#a57b68,transparent 66%),linear-gradient(130deg,#726778,#654b49); }
.offer-bonus:nth-child(2) { background:radial-gradient(ellipse at 14% 8%,#527b9a,transparent 60%),linear-gradient(130deg,#93766d,#815459); }
.offer-bonus:nth-child(3) { background:radial-gradient(ellipse at 20% 9%,#884a96,transparent 65%),linear-gradient(130deg,#614d76,#a97680); }
.offer-bonus .offer-blurred-media { filter:blur(13px); }
.offer-bonus-lock { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#241b2080; }
.offer-bonus-lock svg { width:19px; height:19px; }
.offer-bonus-title { position:absolute; z-index:1; left:5px; right:5px; bottom:7px; padding:5px 4px; border-radius:14px; background:#181217d9; color:#fff; font-size:11px; font-weight:600; line-height:13px; text-align:center; overflow-wrap:anywhere; }
.offer-actions { position:relative; flex:none; padding:10px 14px calc(12px + var(--offer-browser-clearance) + env(safe-area-inset-bottom)); background:#000; }
.offer-result-button { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; position:relative; gap:12px; padding:10px 44px; border:0; border-radius:28px; background:linear-gradient(105deg,#ffb813,#ff803f 45%,#f51c7a); color:#090909; font:700 20px/26px -apple-system,BlinkMacSystemFont,Arial,sans-serif; }
.offer-result-button > svg { width:23px; height:23px; position:absolute; right:18px; }
.offer-result-button:disabled { opacity:.65; }
.offer-layout button:focus-visible { outline:2px solid #ffb52b; outline-offset:3px; }
/* Keep the separately requested processing/X clearance correction. */
.processing-screen { height:var(--create-viewport-height,100svh); min-height:0 !important; }
.processing-screen .processing-content { padding:12px 16px calc(80px + env(safe-area-inset-bottom)) !important; }
@media (min-width:601px) { .processing-screen .processing-content { padding-bottom:24px !important; } }

/* Two standard bonuses, centered at the approved three-column card size. */
.offer-bonus-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2,minmax(0,1fr));
  width: calc((100% - 12px) * 2 / 3 + 6px); margin-inline: auto;
}