/* Home hero on phones: "deep blue poster" (draft A). Full-screen Slate blue with cyan and violet light,
   big white headline, the 8-week guarantee, one Free 1-minute plan button (the astronaut sits on it)
   and two client results. Kept out of the light-mode generator on purpose: it looks the same in both modes. */
.hxm { display:none; }
@media(max-width:767px){
  html body .hero {
    min-height:100svh; padding:96px 0 34px !important; display:flex; align-items:stretch; text-align:left !important; color:#fff !important;
    background:
      radial-gradient(120% 60% at 85% 0%, #5B7CFA 0%, rgba(91,124,250,0) 60%),
      radial-gradient(90% 55% at 0% 100%, #38BDF8 0%, rgba(56,189,248,0) 62%),
      radial-gradient(80% 45% at 100% 85%, #8B5CF6 0%, rgba(139,92,246,0) 60%),
      linear-gradient(170deg, #0B1440 0%, #1A2A8F 48%, #2F4BE0 100%) !important;
  }
  html body .hero::before, html body .hero::after { display:none !important; }
  html body .hero .hero-inner { display:block !important; width:100%; padding:0 22px !important; }
  html body .hero .hero-left { display:flex !important; flex-direction:column; align-items:stretch !important; text-align:left !important; min-height:calc(100svh - 130px); }
  html body .hero .hero-right, html body .hero .hx-check, html body .hero .hx-proof, html body .hero .hx-cue,
  html body .hero #r3, html body .hero .scroll-cue { display:none !important; }
  /* the Bismillah keeps its place at the very top: invisible, with the reflection passing over it */
  html body .hero .hero-left .bismillah { align-self:flex-start !important; margin:0 0 10px !important; font-size:14px !important; }
  html body .hero .eyebrow { color:#BFD0FF !important; -webkit-text-fill-color:#BFD0FF !important; font-size:14px !important; text-align:left !important; margin:0 !important; }
  html body .hero h1 { font-family:'Archivo',sans-serif !important; font-weight:800 !important; font-size:clamp(50px,16.2vw,66px) !important; line-height:.95 !important; letter-spacing:-.035em !important;
    margin:14px 0 16px !important; text-align:left !important; color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; }
  html body .hero h1 br { display:none; }
  html body .hero h1 em { display:inline !important; white-space:normal !important; color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; animation:none !important; }
  html body .hero h1 .hw { color:#9FE3FF !important; -webkit-text-fill-color:#9FE3FF !important; }
  html body .hero h1 .hw::after { content:'.'; }
  .hxm { display:flex; flex-direction:column; flex:1; }
  .hxm-sub { font-size:17px; line-height:1.5; color:#DCE4FF; max-width:30ch; margin:0; }
  .hxm-g { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:9px 13px; border-radius:10px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font:600 14px/1.2 'Inter',sans-serif; color:#fff; }
  .hxm-g svg { color:#FFD66B; flex:none; }
  .hxm-g b { color:#FFD66B; font-weight:700; }
  /* the button sits low on the screen, with room above it for the astronaut */
  .hxm-cta { position:relative; margin-top:auto; display:flex; align-items:center; justify-content:center; height:56px; border-radius:12px;
    background:#fff; color:#11131F !important; font:700 16.5px 'Inter',sans-serif; text-decoration:none; box-shadow:0 18px 36px -16px rgba(5,10,40,.7); }
  .hxm-cta:active { transform:translateY(1px); }
  .hxm-proof { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
  .hxm-proof a { display:block; padding:13px 13px 14px; border-radius:12px; background:rgba(8,14,50,.45); border:1px solid rgba(255,255,255,.12); color:#fff; text-decoration:none; }
  .hxm-proof b { display:block; font:800 29px/1 'Archivo',sans-serif; color:#fff; }
  .hxm-proof span { display:block; margin-top:6px; font-size:12px; line-height:1.35; color:#C3CDEB; }
  html body .hero .theme-pick.tp-hero { margin:16px 0 0 !important; align-self:center; }
  html body .hero .theme-pick.tp-hero, html body .hero .theme-pick.tp-hero button, html body .hero .theme-pick.tp-hero i { color:rgba(255,255,255,.7) !important; }
  html body .hero .theme-pick.tp-hero button[aria-pressed="true"] { color:#fff !important; }
  /* the header sits on the blue while the hero is on screen: white logo and menu button */
  body.hx-blue:not(:has(.mobile-menu.open)) header .logo img { content:url(/assets/logo-white.webp); }
  body.hx-blue:not(:has(.mobile-menu.open)) .menu-btn { background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.22) !important; }
  body.hx-blue:not(:has(.mobile-menu.open)) .menu-btn span { background:#fff !important; }
  /* while the hero's own button is on screen, the floating one waits */
  body.hx-cta-in .cta-float { opacity:0 !important; pointer-events:none !important; }}

/* v2: everything fits one screen, fewer things on it, and the astronaut has his own space */
@media(max-width:767px){
  html body .hero { min-height:100svh; height:100svh; max-height:900px; padding:clamp(76px,11svh,92px) 0 clamp(14px,2.6svh,26px) !important; }
  html body .hero .hero-left { min-height:0 !important; height:100%; }
  html body .hero .eyebrow { font-size:13px !important; }
  html body .hero h1 { font-size:min(14.2vw, 7.4svh, 60px) !important; margin:clamp(8px,1.4svh,14px) 0 clamp(14px,2.4svh,22px) !important; }
  .hxm-sub { display:none; }
  .hxm-g { margin-top:0; padding:8px 12px; font-size:13px; }
  /* room above the button for the astronaut, who sits at its right end, clear of the guarantee */
  .hxm-cta { margin-top:auto; height:clamp(48px,6.6svh,54px); font-size:16px; }
  .hxm-g { margin-bottom:58px; }
  /* results: two plain columns, no boxes */
  .hxm-proof { margin-top:clamp(12px,2.2svh,20px); gap:0; }
  .hxm-proof a { background:none; border:0; border-radius:0; padding:0 12px 0 0; }
  .hxm-proof a + a { padding:0 0 0 14px; border-left:1px solid rgba(255,255,255,.2); }
  .hxm-proof b { font-size:clamp(22px,3.3svh,27px); }
  .hxm-proof span { margin-top:4px; font-size:11.5px; color:#C9D3F0; }
  html body .hero .theme-pick.tp-hero { margin:clamp(10px,2svh,18px) 0 0 !important; font-size:12px !important; }
  /* on this first screen the WhatsApp bubble waits too; it comes back as you scroll */
  body.hx-cta-in .wa-float { opacity:0 !important; pointer-events:none !important; }}

/* v3: a brighter Slate blue that sits closer to the rest of the site, fading into the page below */
@media(max-width:767px){
  html body .hero {
    padding-bottom:calc(clamp(14px,2.6svh,26px) + 34px) !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) calc(100% - 46px), #000 100%),
      radial-gradient(120% 60% at 85% 0%, #8EA2FF 0%, rgba(142,162,255,0) 60%),
      radial-gradient(90% 55% at 0% 100%, #38BDF8 0%, rgba(56,189,248,0) 62%),
      radial-gradient(80% 45% at 100% 85%, #8B5CF6 0%, rgba(139,92,246,0) 60%),
      linear-gradient(170deg, #2338B8 0%, #2F4BE0 52%, #4E6BF5 100%) !important;
  }}

/* v4 "blue into sky": bold blue at the top melting away at the bottom. It fades to transparent, so the page
   underneath (black in Starlight, pale blue in Violet) shows through with no visible edge. */
@media(max-width:767px){
  html body .hero {
    padding-bottom:calc(clamp(14px,2.6svh,26px) + 40px) !important;
    background:linear-gradient(180deg, #2338B8 0%, #2F4BE0 32%, #3657E6 48%, rgba(47,75,224,.78) 62%, rgba(40,62,190,.5) 76%, rgba(24,36,120,.22) 88%, rgba(0,0,0,0) 100%) !important;
  }}

/* headline "Your business deserves to be found, and full." with its "We help" line underneath (phones) */
@media(max-width:767px){
  html body .hero h1 { font-size:min(12.6vw, 6.6svh, 54px) !important; margin-bottom:clamp(10px,1.8svh,16px) !important; }
  html body .hero h1 em { color:#9FE3FF !important; -webkit-text-fill-color:#9FE3FF !important; white-space:nowrap !important; }
  .hxm-sub { display:block; font-size:15px; line-height:1.45; color:#DCE4FF; max-width:32ch; margin:0 0 clamp(12px,2svh,18px); }}
/* "We bring you more customers." is shorter: a bit bigger on phones */
@media(max-width:767px){ html body .hero h1 { font-size:min(14.6vw, 7.6svh, 62px) !important; }}
@media(max-width:767px){ html body .hero h1 em { white-space:normal !important; }}

/* headline flip: "more customers. / patients. / trials. ..." The old word folds shut, then the new one folds open in
   the same spot (flat, no 3D, so no ghost of the old word). All words share one grid cell, so the line never jumps. */
.hero .flip { display:inline-grid; vertical-align:bottom; justify-items:start; }
.hero .flip > span { grid-area:1 / 1; display:block; white-space:nowrap; transform-origin:50% 62%;
  visibility:hidden; transform:scaleY(0); transition:transform .2s ease-in, visibility 0s linear .2s; }
.hero .flip > span.on { visibility:visible; transform:scaleY(1); transition:transform .28s cubic-bezier(.2,.9,.3,1.25) .2s, visibility 0s linear .2s; }
.hero .flip > span:first-child.on.first { transition:none; }
@media(prefers-reduced-motion:reduce){ .hero .flip > span { transition:none !important; }}

/* phone hero, v5: one line of results that flips through (replaces the two result columns), and the
   Free 1-minute plan button at the bottom of the screen, where the astronaut lives */
.hxm-tick { display:none; }
@media(max-width:767px){
  .hxm-proof, .hxm-sub { display:none !important; }
  .hxm-g { margin-bottom:0 !important; }
  .hxm-tick { display:grid; margin-top:16px; font:500 clamp(12.5px,3.7vw,14.5px)/1.3 'Inter',sans-serif; color:#fff; }
  .hxm-tick > span { grid-area:1 / 1; white-space:nowrap; visibility:hidden; transform:scaleY(0); transform-origin:50% 60%;
    transition:transform .2s ease-in, visibility 0s linear .2s; }
  .hxm-tick > span.on { visibility:visible; transform:scaleY(1); transition:transform .28s cubic-bezier(.2,.9,.3,1.2) .2s, visibility 0s linear .2s; }
  .hxm-tick > span:first-child.on { transition-delay:0s, 0s; }
  .hxm-tick b { font:800 1.15em 'Archivo',sans-serif; color:#9FE3FF; margin-right:2px; }
  .hxm-cta { margin-top:auto !important; }
  html body .hero .theme-pick.tp-hero { margin-top:12px !important; }}
@media(max-width:767px){
  /* fill the screen so the plan button sits at the bottom */
  html body .hero { align-items:stretch !important; }
  html body .hero .hero-inner { align-self:stretch !important; height:auto !important; display:flex !important; flex-direction:column; }
  html body .hero .hero-left { flex:1; height:auto !important; }}
@media(max-width:767px){ html body .hero { justify-content:flex-start !important; } html body .hero .hero-inner { flex:1 1 auto !important; }}

/* Starlight on phones: no blue, the hero is see-through so the starry page shows behind it
   (Violet mode sets its own street-photo background in light-extra) */
@media(max-width:767px){ html body .hero { background:transparent !important; }}
@media(max-width:767px){ .hxm-g svg, .hxm-g b { color:#9FE3FF; }}

/* the one-line results now sit under the intro video (every screen size), centred */
.hxm-tick.vid-tick { display:grid !important; justify-items:center; text-align:center; margin:22px auto 0 !important;
  font:600 clamp(14px,3.9vw,18px)/1.3 'Inter',sans-serif !important; color:#F2F0EA !important; text-shadow:none !important; }
.hxm-tick.vid-tick > span { grid-area:1 / 1; white-space:nowrap; visibility:hidden; transform:scaleY(0); transform-origin:50% 60%;
  transition:transform .2s ease-in, visibility 0s linear .2s; }
.hxm-tick.vid-tick > span.on { visibility:visible; transform:scaleY(1); transition:transform .28s cubic-bezier(.2,.9,.3,1.2) .2s, visibility 0s linear .2s; }
.hxm-tick.vid-tick b { font:800 1.2em 'Archivo',sans-serif; color:#9FE3FF !important; margin-right:3px; }

/* phones, both modes: the plan button and the Sunlight / Starlight switch sit in the same place */
@media(max-width:767px){
  html body .hero { padding-bottom:clamp(12px,2.4svh,20px) !important; }
  html body .hero .theme-pick.tp-hero { margin-top:18px !important; }
  /* the menu button: just the three lines, no box */
  html body .menu-btn, html body.hx-blue:not(:has(.mobile-menu.open)) .menu-btn { background:none !important; border-color:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }}