
@media(max-width:980px) {
  
  body {
    background:#030611;
    overflow-x:hidden
  }
  .site-frame {
    width:100%
  }
  
  .topbar {
    position:absolute;
    height:64px;
    padding:0 18px;
    background:linear-gradient(#030611e8,transparent);
    gap:12px
  }
  .brand-star {
    font-size:28px
  }
  .brand b {
    font-size:19px
  }
  .brand small {
    font-size:7px
  }
  .menu {
    margin-left:auto;
    border-radius:99px;
    padding:8px 15px;
    font-size:13px
  }
  
  .topbar nav {
    top:58px;
    left:12px;
    right:12px;
    padding:14px 18px;
    border-radius:10px;
    background:#050817f5;
    box-shadow:0 18px 50px #000
  }
  .topbar nav a {
    padding:10px 4px;
    font-size:15px
  }
  
  .hero {
    height:760px;
    min-height:760px;
    background:#030611
  }
  .hero-image {
    top:0;
    left:0;
    width:100%;
    height:390px;
    object-fit:cover;
    object-position:43% center
  }
  .hero-shade {
    background:linear-gradient(0deg,#030611 47%,rgba(3,6,17,.72) 61%,transparent 82%)
  }
  .hero-luna,.adult {
    display:none
  }
  

  
  .hero-copy {
    left:22px;
    right:22px;
    top:auto;
    bottom:25px;
    max-width:none
  }
  .hero h1 {
    font-size:51px;
    line-height:.86;
    margin:8px 0 12px
  }
  .hero .lead {
    font-size:16px
  }
  .trust {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:20px 0
  }
  .trust>span {
    font-size:21px
  }
  .trust small {
    font-size:10px
  }
  .primary {
    width:100%;
    padding:13px 20px;
    font-size:16px
  }
  
  .companions.section {
    padding:16px 0 23px
  }
  .section-heading {
    padding:0 18px;
    gap:10px
  }
  .section-heading h2 {
    font-size:31px;
    white-space:nowrap
  }
  .subhead {
    padding:0 24px;
    font-size:13px;
    line-height:1.4;
    margin:3px 0 14px
  }
  .girl-grid {
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:0 18px 12px;
    scrollbar-width:none
  }
  .girl-grid::-webkit-scrollbar {
    display:none
  }
  .girl {
    flex:0 0 72vw;
    height:445px;
    min-height:445px;
    scroll-snap-align:center
  }
  .girl img {
    height:100%;
    object-position:center 18%
  }
  .girl>div {
    padding:75px 16px 15px
  }
  .girl h3 {
    font-size:31px
  }
  .girl p {
    font-size:14px;
    margin:3px 0 12px
  }
  .girl a {
    font-size:15px;
    padding:10px
  }
  
  .zara {
    display:block;
    height:auto;
    min-height:720px;
    padding:0 24px 34px;
    background:linear-gradient(150deg,#16072b,#071634 70%,#030611)
  }
  .zara-portrait {
    position:relative;
    left:auto;
    bottom:auto;
    width:calc(100% + 48px);
    height:300px;
    margin-left:-24px;
    background:url('assets/zara-mockup.jpg') center/cover no-repeat;
    opacity:1;
    filter:none
  }
  .zara-copy {
    max-width:none;
    margin:0;
    padding-top:22px
  }
  .zara-copy .eyebrow {
    font-size:10px
  }
  .zara h2 {
    font-size:42px
  }
  .zara-lead {
    font-size:17px
  }
  .zara ul {
    font-size:16px;
    line-height:1.8;
    margin:14px 0
  }
  .zara .cosmic {
    width:100%;
    font-size:15px;
    padding:12px
  }
  .zara blockquote {
    display:none
  }
  
  .ai-help.section {
    display:block;
    height:auto;
    min-height:0;
    padding:34px 24px 38px;
    text-align:left
  }
  .ai-help .brain {
    float:right;
    font-size:90px;
    margin:-15px -4px 5px 10px
  }
  .ai-help h2 {
    font-size:36px
  }
  .ai-help .lead {
    font-size:18px
  }
  .ai-help p {
    font-size:15px;
    line-height:1.55
  }
  .ai-help ul {
    clear:both;
    font-size:15px;
    line-height:1.8;
    margin:18px 0
  }
  .ai-help .cosmic {
    width:100%;
    padding:12px
  }
  
  .sound {
    position:relative;
    display:block;
    height:390px;
    min-height:390px;
    padding:32px 24px;
    background:#030611 url('assets/soundforge-banner.png') 54% center/auto 100% no-repeat;
    border-block:1px solid #e129d4
  }
  .sound:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(1,3,10,.96) 0%,rgba(1,3,10,.72) 38%,rgba(1,3,10,.10) 67%,rgba(1,3,10,.82) 100%)
  }
  .sound .sound-copy {
    position:relative;
    z-index:1;
    display:block;
    max-width:330px
  }
  .sound .wave {
    margin:0 0 3px;
    font-size:15px
  }
  .sound h2 {
    font-size:38px;
    line-height:1;
    margin:0 0 7px
  }
  .sound .eyebrow {
    margin:0 0 12px;
    font-size:10px;
    letter-spacing:.17em
  }
  .sound-copy>p:not(.wave):not(.eyebrow) {
    max-width:270px;
    margin:0;
    font-size:13px;
    line-height:1.4
  }
  .sound .youtube {
    position:absolute;
    top:282px;
    left:0;
    min-width:220px;
    margin:0;
    padding:12px 18px;
    font-size:14px
  }
  .sound .filmstrip {
    display:none
  }
  .sound-banner-link {
    position:absolute;
    inset:0;
    z-index:2;
    display:block
  }
  
  footer {
    height:auto;
    min-height:220px;
    padding:30px 24px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px
  }
  footer p {
    grid-column:1/-1;
    margin:0
  }
  footer nav {
    grid-column:1/-1;
    order:3;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    font-size:13px
  }
  .footer-age {
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:end;
    width:44px;
    height:44px;
    padding:0;
    display:grid;
    place-items:center;
    border-width:1px;
    border-radius:50%;
    font-size:15px
  }
}

@media (max-width: 980px) {

    .hero-image {
        content: url("assets/luna-mobile.png");
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center top;
    }

    .hero-copy .eyebrow {
        display: none !important;
    }

    .hero-shade {
        display: none !important;
    }

}
/* Website promotion: scoped to the existing strip. */
.ai-help.web-promo {
  background: radial-gradient(ellipse at 5% 100%, #124b77 0, transparent 48%), linear-gradient(110deg, #132a51, #39226e 55%, #681c62);
  border-block: 1px solid #b26ce4;
  overflow: hidden;
}
.web-promo > * { min-width: 0; }
.web-promo .web-graphic { display:block; width:125px; max-width:100%; height:auto; }
.web-promo .eyebrow { display:block; color:#83efff; font-size:10px; letter-spacing:1.5px; margin:0 0 6px; }
.web-promo h2 { color:#fff; font-family:"DM Sans",sans-serif; font-size:27px; font-weight:700; line-height:1.08; margin:0 0 7px; }
.web-promo .web-copy > p:last-child { color:#eee7ff; font-size:12px; line-height:1.5; margin:0; max-width:350px; }
.web-promo .web-prices { display:flex; gap:10px; margin:0; padding:0; list-style:none; line-height:1.3; }
.web-promo .web-prices li { flex:1; padding:12px; border:1px solid #b69ada; border-radius:12px; background:#100e35a6; }
.web-promo .web-prices li::before { content:none; }
.web-promo .web-prices span { display:block; color:#f4eeff; font-size:15px; font-weight:600; white-space:nowrap; }
.web-promo .web-prices strong { display:block; color:#83efff; font-size:40px; line-height:1.15; margin-top:4px; }
.web-promo .web-prices li:last-child strong { color:#ffd782; }
.web-promo .web-cta { background:linear-gradient(110deg,#ffe299,#ffadd9); color:#241333; border:0; font-size:12px; font-weight:700; line-height:1.45; text-align:center; padding:12px 18px; box-shadow:0 4px 18px #10062255; }
.web-promo .web-cta:hover { filter:brightness(1.08); }
.web-promo .web-cta:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media(min-width:981px) {
  .ai-help.web-promo { grid-template-columns:125px minmax(0,1.4fr) minmax(340px,1fr) auto; }
}
@media(max-width:980px) {
  .ai-help.section.web-promo { display:grid; grid-template-columns:80px minmax(0,1fr); gap:18px; padding:26px 24px; }
  .web-promo .web-graphic { width:80px; }
  .web-promo h2 { font-size:clamp(20px,4vw,28px); }
  .web-promo .eyebrow { font-size:9px; line-height:1.5; }
  .web-promo .web-copy > p:last-child { font-size:14px; }
  .web-promo .web-prices, .web-promo > .web-cta { grid-column:1 / -1; }
  .web-promo .web-prices span { white-space:normal; font-size:16px; }
  .web-promo .web-cta br { display:none; }
}
