/* ============================================================
   AI SEARCH — colour experiment. Service colour (green) themes
   the hero + nav-over-hero + Signal. Loaded after paid-media.css.
   ============================================================ */

:root { --svc: #0ADBFE; }   /* AI Search green */
/* page bg matches the hero so the iOS browser bars / overscroll aren't brand-blue */
html, body { background: var(--svc); }

/* HERO: service colour. Content-sized (no 100svh bottom-pin).
   The old `margin-top:auto` bottom-pin was fragile: on tall viewports it pushed
   the spec sheet below the fold, on short ones the gap collapsed to nothing.
   Now the hero fits its content and the spec sits a fixed, comfortable gap
   below the CTA on every viewport. */
.pm-hero { background: var(--svc); padding-bottom: clamp(64px, 9vh, 120px); }
.pm-hero .section-wrap { display: block; }
.pm-hero-cta { display: inline-flex; }
.pm-spec { margin-top: clamp(56px, 8vh, 110px); }

/* "What's included" overline is one of our greys, not the blue overline default */
.pm-tiers .overline { color: var(--n500); }
.pm-hero .overline { color: rgba(255, 255, 255, 0.8); }
.pm-spec { border-top-color: rgba(255, 255, 255, 0.32); }
.pm-spec-row { border-bottom-color: rgba(255, 255, 255, 0.28); }
.pm-spec dt { color: rgba(255, 255, 255, 0.72); }
.pm-spec dd { color: #fff; }
.pm-hero-cta { border-color: #fff; }
/* hovers invert to the service colour, not black/blue */
.pm-hero-cta:hover { color: var(--svc); }
.nav-contact:hover { color: var(--svc); }

/* NARRATIVE (the one blue section) -> white with dark text */
.pm-story { background: #fff; }
.pm-story .story-copy,
.pm-story .story-para,
.pm-story .story-para .w { color: #171818; }

/* grain is tuned for near-black; on the bright colour the overlay/multiply
   blends read way too strong, so dial them down */
.noise-canvas { opacity: 0.07; }
.noise-canvas--mult { opacity: 0.025; }

/* dropdown sheet takes the service colour when the nav is over the hero,
   and its grain is dialed WAY down there (overlay on a bright colour = static) */
.mega--svc .mega-panel { background: var(--svc); }
.mega--svc .mega-noise { opacity: 0.03; }

/* ---- MOBILE: the desktop bottom-pin makes a weird gap on phones, so the hero
   goes back to natural flow with a tighter top, bigger headline + backdrop ---- */
@media (max-width: 768px) {
  .pm-hero { min-height: auto; display: block; padding-top: clamp(200px, 54vw, 300px); padding-bottom: clamp(48px, 11vw, 84px); }
  .pm-hero .section-wrap { display: block; }
  .pm-spec { margin-top: clamp(44px, 11vw, 84px); }
  .pm-hero-title { font-size: clamp(30px, 8.8vw, 42px); max-width: 100%; }
  .pm-hero-title .word-mask { max-width: 100%; }
  .pm-hero-title .word { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
  .pm-hero { overflow: hidden; }
  .pm-hero-bg { font-size: 15vw; top: clamp(80px, 15vw, 120px); }
}

/* Mobile menu theming is handled by the shared nav JS (is-light / mm-light,
   luminance-aware) + v2.css base — no per-page override needed here. */