/* ===================================================================
   AD CREATIVE — drop-in ad-unit designs for the .ad-slot system.
   Every custom property + rule below is scoped under .ad-unit so it
   cannot leak into or collide with the site's own design tokens.
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* Ad Rail — spans full width across grid */
.ad-rail{
  width:100%;
  display:flex;
  justify-content:center;
  margin:2rem 0 !important;
}

.ad-slot--live{
  border:none;
  background:transparent;
  padding:0;
  width:100%;
  display:flex;
  justify-content:center;
}
.ad-slot--live .ad-slot__tag{ display:none; }

/* Current campaign units */
.ad-slot--live:has(.ad-container){height:auto;min-height:0;background:transparent;border:0;overflow:visible;width:100%;}
.ad-container{
  width:100%;max-width:1360px;min-height:90px;display:flex;align-items:center;gap:2%;padding:1.5% 2%;box-sizing:border-box;
  border-radius:8px;cursor:pointer;text-decoration:none;overflow:visible;font-family:var(--font-body,Arial,sans-serif);line-height:1.25;
}
.ad-container img{height:80%;width:auto;aspect-ratio:1/1;object-fit:cover;border-radius:3px;flex:none;}
.ad-container__copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:.25rem;overflow:hidden;}
.ad-container__copy strong,.ad-container__copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ad-container__copy strong{font-size:1.05rem;}
.ad-container__copy b{font-size:.86rem;}
.ad-container__button{flex:none;padding:.45rem .8rem;border-radius:999px;font-weight:700;font-size:.72rem;white-space:nowrap;}
.ad-container--spotify{
  width:968px !important;max-width:100% !important;height:100px !important;min-height:100px !important;
  background:var(--mint);border:none;color:var(--ink);
  box-shadow:0 8px 24px rgba(20,37,31,.12);
  margin:2rem 0;padding:0;
}
.ad-container--spotify .ad-container__copy strong{color:var(--clay);font-size:1.1rem;}
.ad-container--spotify .ad-container__button{background:var(--clay);color:var(--mint-2);font-weight:700;}
.ad-container--zillow,.ad-container--facebook{background:#fff;border:1px solid #ddd;color:#333;}
.ad-container--zillow .ad-container__copy strong{color:#006aff;}
.ad-container--zillow .ad-container__button{background:#006aff;color:#fff;}
.ad-container--facebook .ad-container__copy strong{color:#1877F2;}
.ad-container--facebook .ad-container__button{background:#1877F2;color:#fff;}
.ad-container--zillow-vertical{
  width:300px;max-width:100%;height:180px;min-height:180px;aspect-ratio:300/180;background:var(--mint);border:0;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;text-align:center;overflow:hidden;
  border-radius:12px 34px 12px 34px / 26px 12px 26px 12px;
}
.ad-container--zillow-vertical strong{font-size:0.9rem;color:var(--clay);margin:0;line-height:1.1;}
.ad-container--zillow-vertical img{width:70%;height:auto;max-height:90px;aspect-ratio:1/1;}
.ad-container--zillow-vertical b{font-size:0.7rem;font-weight:400;margin:0;line-height:1.2;color:var(--ink-soft);}
.ad-container--zillow-vertical .ad-container__button{background:var(--clay);color:var(--mint-2);font-size:.72rem;font-weight:700;}
.ad-container--learning{height:auto;min-height:100%;align-self:stretch;color:#12291f;}
.ad-container--learning img{width:90%;height:auto;aspect-ratio:16/9;flex:none;}
.ad-container--learning h3{line-height:1.2;}
.ad-container--learning p{line-height:1.35;}
@media (max-width:600px){
  .ad-container{min-height:76px;gap:3%;}
  .ad-container img{height:72%;}
  .ad-container__copy b{font-size:.72rem;}
  .ad-container__button{padding:.38rem .55rem;font-size:.65rem;}
}

.ad-unit{
  --bg:#0a0c10; --panel:#14171d; --panel-2:#1b1f26; --line:#262b33;
  --text:#eef1f5; --text-dim:#8a94a3;
  --teal:#2dd4bf; --violet:#a78bfa; --amber:#fbbf24; --rose:#fb7185; --blue:#60a5fa; --green:#86efac;
  --radius:10px;
  --font-display:'Space Grotesk', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text); line-height:1.5; margin:0 auto; box-sizing:border-box;
}
.ad-unit *{ box-sizing:border-box; }
.ad-unit a{ color:inherit; text-decoration:none; }

/* 1. Leaderboard 728x90 — self-promo */
.ad-leaderboard{
  width:728px; max-width:100%; height:90px;
  display:flex; align-items:center; gap:16px; padding:0 22px;
  background:radial-gradient(120% 180% at 0% 50%, rgba(45,212,191,.16), transparent 60%), var(--panel);
}
.ad-leaderboard .glyph{
  width:46px; height:46px; border-radius:10px; background:var(--panel-2);
  border:1.5px solid var(--teal); display:flex; align-items:center; justify-content:center; flex:none;
}
.ad-leaderboard .glyph svg{ width:22px; height:22px; }
.ad-leaderboard .copy strong{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--teal); display:block; }
.ad-leaderboard .copy span{ color:var(--text-dim); font-size:.85rem; }

/* 2. Medium rectangle 300x250 — co-branded travel */
.ad-rect{ width:300px; height:250px; display:flex; flex-direction:column; }
.ad-travel{ background:linear-gradient(160deg,#241a12,#171210 70%); }
.ad-travel .top{ display:flex; align-items:center; gap:8px; padding:14px 16px 0; }
.ad-travel .badge-pair{ display:flex; }
.ad-travel .coin{ width:22px; height:22px; border-radius:50%; margin-left:-8px; border:2px solid #171210; }
.ad-travel .coin:first-child{ margin-left:0; background:var(--amber); }
.ad-travel .coin:last-child{ background:var(--rose); }
.ad-travel .brand{ font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.ad-travel .photo{
  margin:12px 14px 0; height:96px; border-radius:8px;
  background:linear-gradient(0deg, rgba(20,14,9,.55), rgba(20,14,9,0) 60%), url('https://images.unsplash.com/photo-1494137319847-a9592a0e73ed?auto=format&fit=crop&w=600&q=70') center 30%/cover;
  position:relative; overflow:hidden;
}
.ad-travel .photo::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 90% at 30% 100%, rgba(0,0,0,.5), transparent); }
.ad-travel .body{ padding:12px 16px 14px; flex:1; display:flex; flex-direction:column; }
.ad-travel .body p{ margin:0 0 10px; font-size:.86rem; color:#f2d9c2; line-height:1.35; }
.ad-travel .body p b{ color:var(--amber); }
.ad-travel .cta{ margin-top:auto; align-self:flex-start; background:var(--amber); color:#241a12; font-weight:700; font-size:.78rem; padding:7px 16px; border-radius:999px; }
.ad-travel .fine{ font-size:.62rem; color:#8d7a68; margin-top:8px; }

/* 3. Medium rectangle 300x250 — fitness app */
.ad-fit{
  background:linear-gradient(180deg, rgba(10,12,16,.35), rgba(10,12,16,.94) 78%), url('https://images.unsplash.com/photo-1486739985386-d4fae04ca6f7?auto=format&fit=crop&w=600&q=70') center/cover;
  padding:18px; display:flex; flex-direction:column;
}
.ad-fit .icon{ width:52px; height:52px; border-radius:14px; background:var(--panel-2); border:1px solid #1f3a2e; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.ad-fit h3{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 6px; }
.ad-fit p{ font-size:.82rem; color:var(--text-dim); margin:0 0 auto; line-height:1.4; }
.ad-fit .stars{ color:var(--green); font-size:.78rem; margin:12px 0 10px; font-family:var(--font-mono); }
.ad-fit .cta{ background:var(--green); color:#08150f; font-weight:700; font-size:.8rem; padding:9px 0; border-radius:8px; text-align:center; }

/* 4. Square 250x250 — grocery */
.ad-square{ width:250px; height:250px; }
.ad-grocery{
  background:linear-gradient(180deg, rgba(10,12,16,.25), rgba(10,12,16,.92) 75%), url('https://images.unsplash.com/photo-1751200365135-9e9eb01a2919?auto=format&fit=crop&w=600&q=70') center/cover;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px;
}
.ad-grocery .pct{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--green); line-height:1; }
.ad-grocery .pct span{ font-size:1.1rem; vertical-align:top; }
.ad-grocery .sub{ font-size:.78rem; color:var(--text-dim); margin:8px 0 16px; }
.ad-grocery strong{ font-family:var(--font-display); font-size:1rem; display:block; margin-bottom:14px; }
.ad-grocery .cta{ background:transparent; border:1.5px solid var(--green); color:var(--green); font-weight:600; font-size:.78rem; padding:8px 20px; border-radius:999px; }

/* 5. Skyscraper 160x600 — cloud storage */
.ad-sky{ width:160px; height:600px; }
.ad-cloud{ background:linear-gradient(180deg,#101820,#0a0c10 60%); padding:20px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ad-cloud .glyph{ width:56px; height:56px; border-radius:14px; background:var(--panel-2); border:1px solid var(--teal); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ad-cloud h4{ font-family:var(--font-display); font-size:.95rem; margin:0 0 10px; line-height:1.3; }
.ad-cloud p{ font-size:.72rem; color:var(--text-dim); margin:0 0 20px; line-height:1.4; }
.ad-cloud .stat{ font-family:var(--font-mono); font-size:1.5rem; color:var(--teal); font-weight:600; }
.ad-cloud .stat-label{ font-size:.66rem; color:var(--text-dim); margin-bottom:22px; }
.ad-cloud .cta{ background:var(--teal); color:#04211c; font-weight:700; font-size:.74rem; padding:9px 0; width:100%; border-radius:7px; }

/* 6. Billboard 970x250 — music */
.ad-billboard{
  width:970px; max-width:100%; height:250px; padding:0 42px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:linear-gradient(115deg,#1c1230,#0a0c10 65%); position:relative;
}
.ad-billboard .copy{ position:relative; z-index:2; max-width:420px; }
.ad-billboard .copy .eyebrow{ font-family:var(--font-mono); font-size:.7rem; color:var(--violet); letter-spacing:.08em; text-transform:uppercase; }
.ad-billboard .copy h3{ font-family:var(--font-display); font-size:1.7rem; margin:8px 0 10px; line-height:1.15; }
.ad-billboard .copy p{ color:var(--text-dim); font-size:.88rem; margin:0 0 18px; }
.ad-billboard .cta{ background:var(--violet); color:#160f26; font-weight:700; padding:11px 24px; border-radius:999px; font-size:.85rem; }
.ad-billboard .art{
  position:relative; z-index:2; width:150px; height:150px; border-radius:16px; flex:none;
  background:url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=400&q=70') center/cover;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(0,0,0,.4);
}

/* 7. Video ad unit */
.ad-video{ width:340px; max-width:100%; }
.ad-video .frame{
  position:relative; height:200px; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden;
  background:linear-gradient(0deg, rgba(10,12,16,.55), rgba(10,12,16,.05) 55%), url('https://images.unsplash.com/photo-1544111795-fe8b9def73f6?auto=format&fit=crop&w=700&q=70') center/cover;
}
.ad-video .playbtn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ad-video .playbtn svg{ margin-left:3px; }
.ad-video .title-row{
  position:absolute; top:0; left:0; right:0; padding:10px 12px; display:flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.ad-video .title-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none; }
.ad-video .title-row span{ font-size:.74rem; font-weight:600; }
.ad-video .progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.15); }
.ad-video .progress i{ display:block; width:34%; height:100%; background:var(--teal); }
.ad-video .meta{
  display:flex; align-items:center; gap:14px; padding:10px 14px; font-family:var(--font-mono);
  font-size:.7rem; color:var(--text-dim); border-top:1px solid var(--line);
}

/* 8. Service-status widget */
.ad-widget{ width:340px; max-width:100%; padding:20px; }
.ad-widget h4{ font-family:var(--font-display); font-size:1.02rem; margin:0 0 3px; }
.ad-widget .sub{ font-size:.78rem; color:var(--text-dim); margin:0 0 16px; }
.ad-widget .row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); border-radius:999px; padding:10px 16px; margin-bottom:10px;
}
.ad-widget .row strong{ font-size:.84rem; }
.ad-widget .status{ display:flex; align-items:center; gap:8px; }
.ad-widget .status span{ font-size:.68rem; color:var(--amber); }
.ad-widget .pulse{ display:flex; align-items:flex-end; gap:1.5px; height:16px; }
.ad-widget .pulse i{ width:2px; background:var(--amber); border-radius:1px; display:block; }
.ad-widget .foot{ text-align:center; font-size:.72rem; color:var(--text-dim); margin-top:12px; }
.ad-widget .foot b{ color:var(--rose); }

/* 9. Native in-feed card */
.ad-native{ width:300px; max-width:100%; }
.ad-native .photo{ height:160px; background:url('https://images.unsplash.com/photo-1709880945165-d2208c6ad2ec?auto=format&fit=crop&w=600&q=70') center/cover; }
.ad-native .body{ padding:14px 16px 16px; }
.ad-native .tag{ font-family:var(--font-mono); font-size:.62rem; color:var(--amber); text-transform:uppercase; letter-spacing:.06em; }
.ad-native h5{ font-family:var(--font-display); font-size:.98rem; margin:8px 0 6px; line-height:1.3; }
.ad-native p{ font-size:.78rem; color:var(--text-dim); margin:0; }
.ad-native .src{ display:flex; align-items:center; gap:6px; margin-top:12px; font-size:.7rem; color:var(--text-dim); }
.ad-native .src i{ width:16px; height:16px; border-radius:4px; background:var(--amber); display:block; }

/* 10. Flash sale 300x250 */
.ad-flash{ width:300px; height:250px; background:linear-gradient(160deg,#2a0f14,#0a0c10 70%); padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ad-flash .badge{ font-family:var(--font-mono); font-size:.66rem; background:var(--rose); color:#2a0f14; padding:3px 10px; border-radius:999px; font-weight:700; letter-spacing:.04em; }
.ad-flash h3{ font-family:var(--font-display); font-size:1.3rem; margin:12px 0 4px; }
.ad-flash .pct{ color:var(--rose); font-weight:700; }
.ad-flash .timer{ display:flex; gap:8px; margin:14px 0; font-family:var(--font-mono); }
.ad-flash .timer div{ background:var(--panel-2); border-radius:6px; padding:6px 9px; font-size:1rem; font-weight:600; min-width:34px; }
.ad-flash .timer span{ display:block; font-size:.58rem; color:var(--text-dim); margin-top:2px; }
.ad-flash .cta{ margin-top:auto; background:var(--rose); color:#2a0f14; font-weight:700; font-size:.82rem; padding:9px 26px; border-radius:999px; }

/* 11. Leaderboard — insurance modifier */
.ad-insure{ background:linear-gradient(90deg, rgba(96,165,250,.12), transparent 55%), var(--panel); justify-content:space-between; }
.ad-insure .cta{ background:var(--blue); color:#0a0c10; font-weight:700; font-size:.8rem; padding:9px 20px; border-radius:8px; flex:none; }

/* 12. App install rectangle */
.ad-install{ width:300px; height:250px; background:linear-gradient(160deg,#1a1420,#0a0c10 70%); padding:20px; display:flex; flex-direction:column; }
.ad-install .row{ display:flex; gap:12px; align-items:center; }
.ad-install .icon{ width:58px; height:58px; border-radius:14px; background:url('https://images.unsplash.com/photo-1432821397715-257962351702?auto=format&fit=crop&w=200&q=70') center/cover; flex:none; }
.ad-install h4{ font-family:var(--font-display); font-size:.98rem; margin:0 0 4px; }
.ad-install .stars{ font-size:.72rem; color:var(--amber); font-family:var(--font-mono); }
.ad-install p{ font-size:.78rem; color:var(--text-dim); margin:14px 0 auto; line-height:1.4; }
.ad-install .cta{ background:var(--violet); color:#1a1420; font-weight:700; font-size:.82rem; padding:10px 0; border-radius:8px; text-align:center; margin-top:14px; }

/* 13. Newsletter-style ad 300x250 */
.ad-news{ width:300px; height:250px; background:var(--panel-2); padding:22px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; }
.ad-news .mark{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-bottom:10px; letter-spacing:-.01em; }
.ad-news .mark span{ color:var(--teal); }
.ad-news p{ font-size:.8rem; color:var(--text-dim); margin:0 0 16px; }
.ad-news .field{ display:flex; width:100%; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ad-news .field input{ flex:1; background:transparent; border:0; padding:9px 10px; color:var(--text); font-size:.76rem; }
.ad-news .field button{ background:var(--teal); color:#04211c; border:0; font-weight:700; font-size:.76rem; padding:0 14px; }

/* 14. Compact native text-link ad */
.ad-textlink{ width:100%; max-width:640px; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.ad-textlink .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; }
.ad-textlink a{ font-size:.86rem; color:var(--text); font-weight:600; }
.ad-textlink a:hover{ color:var(--teal); }
.ad-textlink span{ font-size:.76rem; color:var(--text-dim); margin-left:auto; flex:none; }