/* Light-page layer: restyles the CoStar and Advertising pages to the site design.
   Loaded after each page's own <style>, so these rules win. */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}

/* Dark bands: same treatment as the home page hero and CTA */
.hero,.case-hero{background:radial-gradient(ellipse at 75% 40%, #16307a 0%, rgba(10,19,48,.75) 40%, transparent 75%), var(--dark);border-bottom:0}
.hero-phones{background:radial-gradient(ellipse at 50% 120%, #1b3a8f 0%, rgba(10,19,48,.6) 40%, transparent 70%), var(--dark)}
.hero-phones::before{background:linear-gradient(to top, var(--dark), transparent)}
.section-blue,.section-dark,.highlight-band,.icon-nav-showcase,.cell-blue{background:var(--dark)}
.context-bar{background:var(--ink);font-family:var(--sans);font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.6)}

/* Hero type */
.hero-title,.case-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3rem,7vw,5.6rem);line-height:.9;letter-spacing:.005em;color:#fff}
.hero-title span,.case-hero h1 span{color:var(--neon)}
.hero-subtitle,.case-hero-sub{font-family:var(--serif);font-style:normal;font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.3;color:rgba(255,255,255,.88)}
.case-hero-bio{font-family:var(--sans);font-size:1rem;line-height:1.6;color:rgba(255,255,255,.75)}
.eyebrow,.hero-eyebrow{color:rgba(255,255,255,.7)}
.eyebrow::before{background:var(--neon)}
.meta-item strong{font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:0;text-transform:none}

/* Labels, tags and small type: mono, readable size, no all-caps */
.hero-eyebrow,.eyebrow,.meta-item,.cell-label,.tag,.showcase-label,.desktop-caption,.nav-compare-label,.stat-label,
.client-tag,.campaign-type,.award,.client-jump a,.ticker-text{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;text-transform:none}
.cell-label{color:var(--muted);font-weight:500}
.showcase-label,.client-tag,.campaign-type{color:var(--muted)}
.tag,.award{color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:0}
.label-after{color:var(--ink)}
.label-before{color:var(--muted)}
.icon-nav-text .showcase-label,.cell-label-white{color:rgba(255,255,255,.6)}

/* Headings */
.intro-heading,.showcase-heading,.client-name,.campaign-name,.contrib-title,.app-icon-text h3{font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:.005em}
.intro-heading em{font-family:var(--serif);color:var(--ink)}
.icon-nav-text .showcase-heading{color:#fff}
.contrib-icon{color:var(--ink)}
.stat-num{font-family:var(--display);color:#fff}
.highlight-quote{font-family:var(--serif)}

/* Body copy */
.intro-body,.contrib-body,.showcase-desc,.app-icon-text p,.campaign-desc{font-family:var(--sans);font-size:.95rem;line-height:1.65;color:var(--muted)}
.intro-body{font-size:1rem}
.intro-body strong{color:var(--ink);font-weight:600}
.icon-nav-text .showcase-desc{color:rgba(255,255,255,.7)}

/* Surfaces */
.contrib-card,.showcase,.nav-compare-panel,.cell-white{background:#fbfaf7}
.contrib-card:hover{background:#fff}
.campaign-img{background:var(--paper-2)}
.client-jump{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.client-jump a:hover{color:var(--ink);border-color:var(--neon)}

/* Ticker, matching the home page */
.ticker{background:var(--ink);border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a}
.ticker-text{font-size:.78rem;color:rgba(255,255,255,.7)}
.ticker-sep{color:var(--neon);opacity:1}

/* Line content up with the header: same max width and side gutter */
.hero,.case-hero,.hero-phones,.full,.showcase,.highlight-band,.icon-nav-showcase,.report-builder,.app-icon-section,.context-bar,.client-jump{
  padding-left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
  padding-right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.grid-2{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.cell{padding-left:var(--gut);padding-right:var(--gut)}
/* Let rows of app screens wrap instead of running off the page */
[style*="align-items: flex-end"]{flex-wrap:wrap}
.phone-frame img[src$="costar-report-builder-intro.png"]{height:auto!important;max-width:100%}
.phone-frame:has(img[src$="costar-report-builder-intro.png"]){flex:1 1 100%;min-width:0}