/* Illustrative ad templates. Every size is in container units so a card scales as one picture. */
.ad-frame:has(> .ad) { position: relative; aspect-ratio: 1; overflow: hidden; }
/* With JS, each ad is laid out at 400px and scaled to its frame, so small thumbnails keep their proportions
   (browsers enforce a minimum font size that would otherwise break tiny previews). */
.js-fit .ad-frame > .ad { position: absolute; top: 0; left: 0; width: 400px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.ad { container-type: inline-size; position: relative; aspect-ratio: 1; overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.1; color: #111; }
.ad p, .ad ul, .ad dl { margin: 0; padding: 0; list-style: none; }

/* Verdo greens */
.ad-greens { background: radial-gradient(120% 90% at 50% 30%, #5B9B4B, #2E6A2C); color: #fff; }
.ad-greens__t { position: absolute; top: 7cqw; inset-inline: 0; text-align: center; font-weight: 800; font-size: 8.4cqw; letter-spacing: -.03em; }
.pouch { position: absolute; left: 33cqw; top: 26cqw; width: 34cqw; height: 52cqw; background: linear-gradient(90deg, #E9F3DE, #fff 45%, #DCEACD); border-radius: 3cqw 3cqw 5cqw 5cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,.25); display: grid; place-content: center; text-align: center; gap: 1cqw; }
.pouch::before { content: ''; position: absolute; top: 3cqw; inset-inline: 3cqw; height: 1cqw; border-radius: 1cqw; background: #C7D9B5; }
.pouch span { font-weight: 800; font-size: 6cqw; color: #2E6A2C; letter-spacing: .04em; }
.pouch i { font-style: normal; font-size: 3cqw; color: #4E7D41; }
.ad-greens__c li { position: absolute; font-size: 3.6cqw; font-weight: 600; display: flex; align-items: center; gap: 1.6cqw; }
.ad-greens__c li::before { content: ''; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #CFFF9C; flex: none; }
.ad-greens__c li:nth-child(1) { left: 5cqw; top: 36cqw; }
.ad-greens__c li:nth-child(2) { left: 5cqw; top: 62cqw; }
.ad-greens__c li:nth-child(3) { right: 4cqw; top: 36cqw; }
.ad-greens__c li:nth-child(4) { right: 5cqw; top: 62cqw; }

/* Fizzwell vs */
.ad-soda { background: #FBF1DF; }
.ad-soda__t { position: absolute; top: 8cqw; inset-inline: 0; text-align: center; font-weight: 800; font-size: 7cqw; letter-spacing: -.03em; color: #2B1A12; }
.ad-soda__t em { font-style: normal; color: #B9A68F; font-weight: 600; }
.ad-soda__row { position: absolute; inset: 26cqw 4cqw 6cqw; display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 3cqw; }
.ad-soda dl { display: grid; gap: .6cqw; text-align: center; }
.ad-soda dt { font-weight: 800; font-size: 6.4cqw; color: #D8322B; }
.ad-soda dd { margin: 0 0 2.4cqw; font-size: 3cqw; color: #6F5B4B; }
.ad-soda dl.muted dt { color: #B8ADA0; }
.can { width: 19cqw; height: 52cqw; border-radius: 4cqw / 2.4cqw; position: relative; display: grid; place-items: center; }
.can--red { background: linear-gradient(90deg, #A51B16, #E8443A 40%, #B9221C); box-shadow: 0 2cqw 4cqw rgba(120,20,10,.3); }
.can--red span { color: #fff; font-weight: 800; font-size: 4cqw; text-align: center; transform: rotate(-90deg); letter-spacing: .05em; line-height: 1; }
.can--ghost { background: linear-gradient(90deg, #D9D2C8, #EEE8DF 40%, #D6CEC3); }

/* Crumb snack */
.ad-snack { background: #FF5B1F; color: #fff; }
.ad-snack__t { position: absolute; top: 7cqw; inset-inline: 0; text-align: center; font-weight: 800; font-size: 11cqw; letter-spacing: -.045em; line-height: .95; text-transform: uppercase; }
.bar { position: absolute; width: 30cqw; height: 40cqw; border-radius: 3cqw; top: 42cqw; box-shadow: 0 3cqw 5cqw rgba(110,30,0,.35); }
.bar--a { left: 22cqw; background: repeating-linear-gradient(135deg, #F4D9A8 0 3cqw, #EBC98E 3cqw 6cqw); transform: rotate(-12deg); }
.bar--b { left: 46cqw; background: linear-gradient(160deg, #6B3A22, #3E1E10); transform: rotate(10deg); }
.tag { position: absolute; font-size: 3.6cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.tag--1 { left: 5cqw; top: 46cqw; } .tag--2 { right: 5cqw; top: 40cqw; } .tag--3 { right: 6cqw; bottom: 9cqw; }

/* Lumen skin */
.ad-skin { background: #fff; }
.ad-skin__b { position: absolute; top: 6cqw; inset-inline: 0; text-align: center; font-weight: 700; font-size: 4.4cqw; letter-spacing: -.02em; }
.ad-skin__t { position: absolute; left: 7cqw; top: 22cqw; font-size: 7.6cqw; font-weight: 400; color: #4C5A60; letter-spacing: -.03em; }
.ad-skin__o { position: absolute; left: 7cqw; top: 41cqw; font-size: 7.6cqw; font-weight: 700; color: #1595A6; letter-spacing: -.03em; }
.ad-skin__code { position: absolute; left: 7cqw; top: 53cqw; font-size: 3.6cqw; color: #4C5A60; }
.ad-skin__code b { background: #1595A6; color: #fff; padding: .6cqw 1.6cqw; border-radius: 1cqw; margin-left: 1cqw; }
.dropper { position: absolute; right: 9cqw; bottom: 0; width: 26cqw; height: 46cqw; background: linear-gradient(90deg, #EEF5F6, #fff 40%, #E3ECEE); border-radius: 3cqw 3cqw 0 0; box-shadow: -2cqw 0 5cqw rgba(0,40,50,.12); display: grid; place-items: center; text-align: center; }
.dropper i { position: absolute; bottom: 100%; left: 7cqw; width: 12cqw; height: 18cqw; background: #222; border-radius: 6cqw 6cqw 1cqw 1cqw; }
.dropper span { font-weight: 700; font-size: 4.2cqw; color: #1595A6; }
.dropper small { font-weight: 500; font-size: 2.8cqw; color: #6C7A80; }

/* Norra watch */
.ad-watch { background: linear-gradient(#F3F3F1, #E2E2DF); text-align: center; }
.ad-watch__b { position: absolute; top: 6cqw; inset-inline: 0; font-size: 3.4cqw; letter-spacing: .3em; color: #777; font-weight: 600; }
.ad-watch__t { position: absolute; top: 13cqw; inset-inline: 0; font-size: 7.4cqw; font-weight: 500; letter-spacing: -.03em; }
.watch { position: absolute; left: 32cqw; top: 26cqw; width: 36cqw; height: 46cqw; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; }
.watch i { width: 20cqw; background: linear-gradient(90deg, #C9C9C5, #E9E9E6, #C9C9C5); }
.watch i:first-child { border-radius: 2cqw 2cqw 0 0; }
.watch b { width: 36cqw; height: 36cqw; border-radius: 50%; background: radial-gradient(circle, #1E1F22 60%, #3A3B3F 62%, #9C9C98 64%, #DADAD6 70%); color: #E9FFD5; display: grid; place-items: center; font-size: 6.4cqw; font-weight: 600; box-shadow: 0 3cqw 6cqw rgba(0,0,0,.18); }
.ad-watch ul { position: absolute; bottom: 6cqw; inset-inline: 6cqw; display: flex; justify-content: space-around; }
.ad-watch li { font-size: 3.2cqw; color: #444; display: grid; gap: 1.2cqw; justify-items: center; }
.ad-watch li::before { content: ''; width: 5cqw; height: 5cqw; border-radius: 50%; border: .6cqw solid #333; }

/* Slumber sleep */
.ad-sleep { background: linear-gradient(170deg, #8EB0FF, #4F6FE8); color: #fff; }
.ad-sleep__t { position: absolute; top: 7cqw; left: 7cqw; font-size: 7.8cqw; font-weight: 800; letter-spacing: -.035em; }
.ad-sleep__t span { font-weight: 400; opacity: .85; }
.jar { position: absolute; left: 30cqw; top: 36cqw; width: 34cqw; height: 42cqw; background: linear-gradient(90deg, #B4651B, #E39A47 40%, #B4651B); border-radius: 4cqw; display: grid; place-items: center; text-align: center; box-shadow: 0 3cqw 6cqw rgba(20,30,90,.35); }
.jar i { position: absolute; top: -6cqw; left: 3cqw; right: 3cqw; height: 8cqw; background: #F6F1E8; border-radius: 2cqw; }
.jar span { background: #F6F1E8; color: #33406F; font-weight: 800; font-size: 4cqw; padding: 3cqw 2cqw; border-radius: 1.6cqw; width: 80%; }
.ad-sleep__s { position: absolute; bottom: 6cqw; left: 7cqw; font-size: 4.4cqw; letter-spacing: .1em; }
.ad-sleep__s small { letter-spacing: 0; font-size: 3.2cqw; opacity: .9; }
.sticker { position: absolute; right: 6cqw; top: 40cqw; width: 22cqw; height: 22cqw; border-radius: 50%; background: #FF8FB8; color: #3B0C24; display: grid; place-content: center; text-align: center; font-weight: 800; font-size: 6cqw; transform: rotate(12deg); }
.sticker small { font-size: 2.4cqw; font-weight: 700; }

/* Pawly testimonial */
.ad-pet { background: #FFD84D; }
.bubble { position: absolute; top: 8cqw; left: 8cqw; right: 8cqw; background: #fff; border-radius: 5cqw; padding: 6cqw; box-shadow: 0 2cqw 5cqw rgba(90,60,0,.15); }
.bubble::after { content: ''; position: absolute; bottom: -4cqw; left: 14cqw; border: 2.4cqw solid transparent; border-top: 3cqw solid #fff; border-left: 3cqw solid #fff; }
.bubble .stars { color: #F2A900; font-size: 4.2cqw; letter-spacing: .1em; margin-bottom: 2cqw; }
.bubble p { font-size: 6cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.bubble small { display: block; margin-top: 2.4cqw; font-size: 3.2cqw; color: #776; }
.bowl { position: absolute; bottom: -6cqw; left: 40cqw; width: 52cqw; height: 26cqw; background: #2C2C2C; border-radius: 4cqw 4cqw 26cqw 26cqw; display: grid; place-items: start center; padding-top: 5cqw; }
.bowl::before { content: ''; position: absolute; top: -3cqw; left: 4cqw; right: 4cqw; height: 6cqw; background: radial-gradient(circle at 30% 50%, #8B5A2B 30%, transparent 32%), radial-gradient(circle at 60% 40%, #A0522D 28%, transparent 30%), #6E8F3A; border-radius: 4cqw; }
.bowl span { color: #FFD84D; font-weight: 800; font-size: 4.4cqw; position: relative; }

/* Ledgerly SaaS */
.ad-saas { background: #0F1B2D; color: #fff; }
.ad-saas__b { position: absolute; top: 7cqw; left: 7cqw; font-weight: 800; font-size: 4cqw; color: #7FB6FF; }
.ad-saas__t { position: absolute; top: 15cqw; left: 7cqw; right: 7cqw; font-weight: 800; font-size: 7.6cqw; letter-spacing: -.035em; }
.ui { position: absolute; left: 7cqw; right: 7cqw; bottom: 18cqw; height: 32cqw; background: #18283F; border-radius: 3cqw; padding: 4cqw; display: flex; align-items: end; gap: 3cqw; border: .4cqw solid #253957; }
.ui i { flex: 1; height: var(--h); background: linear-gradient(#7FB6FF, #3F7BE0); border-radius: 1cqw; }
.ad-saas .chip { position: absolute; left: 7cqw; bottom: 6cqw; background: #7FB6FF; color: #0F1B2D; font-weight: 700; font-size: 3.6cqw; padding: 2cqw 4cqw; border-radius: 10cqw; }

/* Brightbrew before/after */
.ad-coffee { display: grid; grid-template-columns: 1fr 1fr; }
.half { padding: 8cqw 5cqw; }
.half small { font-size: 3.4cqw; font-weight: 600; opacity: .7; }
.half p { font-size: 7cqw; font-weight: 800; letter-spacing: -.035em; margin-top: 1.6cqw; }
.half--b { background: #CFCFCB; color: #555; filter: saturate(0); }
.half--a { background: #F7C873; color: #3A1F0B; }
.bag { position: absolute; left: 30cqw; bottom: 0; width: 40cqw; height: 48cqw; background: linear-gradient(90deg, #2A1A12, #4A2E1E 45%, #2A1A12); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); display: grid; place-items: center; }
.bag span { color: #F7C873; font-weight: 800; font-size: 5.6cqw; text-align: center; line-height: .95; }

/* Oakline gift */
.ad-gift { background: radial-gradient(90% 70% at 50% 45%, #2A2622, #0C0B0A); color: #fff; }
.ad-gift__t { position: absolute; top: 7cqw; inset-inline: 0; text-align: center; font-size: 8.6cqw; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.ad-gift__t em { font-family: Georgia, serif; font-weight: 400; text-transform: none; }
.wallet { position: absolute; left: 30cqw; top: 24cqw; width: 40cqw; height: 30cqw; background: linear-gradient(140deg, #A0612E, #6B3A17); border-radius: 3cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,.6); transform: rotate(-6deg); }
.wallet i { position: absolute; inset: 2.4cqw; border: .4cqw dashed rgba(255,230,200,.5); border-radius: 2cqw; }
.comment { position: absolute; left: 7cqw; right: 7cqw; bottom: 13cqw; background: #fff; color: #222; border-radius: 3cqw; padding: 3.4cqw 4cqw; font-size: 3.4cqw; line-height: 1.35; }
.comment b { display: block; font-size: 3.4cqw; margin-bottom: .6cqw; }
.ad-gift__b { position: absolute; bottom: 5cqw; inset-inline: 0; text-align: center; font-size: 3cqw; letter-spacing: .3em; color: #A89D90; }