/* Keep the landing preview's scrollable cards from widening the page. */
@media (max-width: 1100px) {
  main[data-page="landing"] .hero > * { min-width: 0; }
  main[data-page="landing"] .discovery { min-width: 0; max-width: 100%; }
  main[data-page="landing"] .cards { min-width: 0; max-width: 100%; }
}
@media (max-width: 720px) {
  main[data-page="landing"] .hero { grid-template-columns: minmax(0, 1fr); }
  main[data-page="landing"] .hero h1 {
    font-size: clamp(36px, 9.5vw, 46px);
    letter-spacing: -1.8px;
    overflow-wrap: break-word;
  }
  main[data-page="landing"] .hero .lead { font-size: 19px; line-height: 1.5; }
  main[data-page="landing"] .actions { flex-wrap: wrap; }
  main[data-page="landing"] .actions .btn { padding: 12px 10px; gap: 8px; }
  main[data-page="landing"] .proof { flex-wrap: wrap; gap: 10px 6px; justify-content: space-between; }
  main[data-page="landing"] .proof > span { min-width: 0; gap: 5px; white-space: nowrap; }
  main[data-page="landing"] .proof .icon { width: 26px; height: 26px; }
  main[data-page="landing"] .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main[data-page="landing"] .filters select { min-width: 0; width: 100%; }
  main[data-page="landing"] .audience > * { min-width: 0; }
}
@media (max-width: 600px) {
  main[data-page="landing"] .audience { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  main[data-page="landing"] .features { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  main[data-page="landing"] .actions { flex-direction: column; }
  main[data-page="landing"] .filters { grid-template-columns: minmax(0, 1fr); }
  body:has(main[data-page="landing"]) header .logo { width: 140px; }
}

/* Clean portrait-only artwork for the landing page preview. */
main[data-page="landing"] .landing-preview-card .portrait {
  background-image: url('assets/landing-portraits-clean.png');
  background-size: 300% auto;
  background-repeat: no-repeat;
  background-position: left 38%;
}
main[data-page="landing"] .landing-preview-card .portrait.eli { background-position: center 38%; }
main[data-page="landing"] .landing-preview-card .portrait.sophie { background-position: right 38%; }

/* Shared dropdown spacing and real creator preview. */
select {appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b52a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px!important;}
main[data-page="landing"] .actual-portrait{background-image:none!important;position:relative;overflow:visible}
main[data-page="landing"] .actual-portrait>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 20%;border-radius:10px}
.preview-filters>span{display:flex;justify-content:space-between;gap:10px;background:#f8f6ff;border:1px solid #e8e0ff;border-radius:10px;padding:10px 12px;color:#7950d4;font-size:12px;min-width:0}
.preview-filters i{font-style:normal}
.landing-preview-card .creator-meta>div:first-child{min-width:0}
.landing-preview-card h4,.landing-preview-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.landing-photo-credit{position:absolute;left:5px;bottom:5px;font-size:9px;z-index:2;color:#514087}
.landing-photo-credit summary{background:#ffffffed;border-radius:4px;padding:3px 5px;cursor:pointer;list-style:none}
.landing-photo-credit>div{position:absolute;top:100%;left:0;width:175px;background:white;border:1px solid #e8e0ff;border-radius:8px;padding:10px;box-shadow:0 5px 15px #160b3020;font-size:11px}
main[data-page="landing"] .features{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:720px){main[data-page="landing"] .features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){main[data-page="landing"] .features{grid-template-columns:minmax(0,1fr)}}
/* Stable navigation baseline and provider branding. */
header nav a,header nav a.active,header .header-actions>a:not(.btn),header .header-actions>a.active:not(.btn){position:relative;display:inline-flex;align-items:center;line-height:1.4;padding:8px 0;border-bottom:0;margin:0}
header nav a.active::after,header .header-actions>a.active:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--purple)}
.social-buttons button{display:flex;justify-content:center;align-items:center;gap:10px}
.provider-logo{display:block;flex:0 0 22px;width:22px;height:22px}
main[data-page="landing"] .discovery .cards{scrollbar-width:none;-ms-overflow-style:none}
main[data-page="landing"] .discovery .cards::-webkit-scrollbar{display:none}
header nav a.mobile-signin,header nav a.mobile-signin.active{display:none}
@media(max-width:720px){header nav.open a.mobile-signin,header nav.open a.mobile-signin.active{display:inline-flex}}

@media(max-width:720px){
 .pricing-intro{text-align:left}
 .pricing-intro h1,.pricing-intro p{margin-left:0;margin-right:0;text-align:left}
 .pricing-intro .billing{margin-left:0;margin-right:auto;justify-content:flex-start}
}