/* ═══════════════════════════════════════════════════════════════
   site.css — the block every page shares.

   Until now this lived inline in six files. Four separate six-file
   edits in one session (the mobile nav wrap, the How It Works
   dropdown, the nav z-index fix, the CTA rewiring) is what finally
   made it worth extracting.

   Linked by: pricing, website, reviews, followup, missedcall.

   NOT linked by v2.html. The homepage nav is a genuinely different
   skin — white-on-violet inside the hero, its own padding, its own
   button variants, and a mesh closing band rather than the flat
   .pband. Forcing it through this file would mean more overrides
   than it saves. It stays self-contained on purpose.

   Load order matters: link this FIRST, then the page's own <style>,
   so page rules win on equal specificity.

   Geometry throughout was read off hyros.com with getComputedStyle
   at 1440 — see the per-page comments for what came from where.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --field:        #5150F7;
  --field-deep:   #3A2BC9;

  --page:         #0B0B0C;
  --white:        #FFFFFF;
  --ink:          #0E0E11;
  --ink-soft:     #63656E;

  --pink:         #EC2E7B;
  --pink-hi:      #FF4A91;
  --pink-h:       #E83298;
  --cream:        #F4F0E6;
  --ink2:         #17171E;

  --b1:           #5150F7;
  --b2:           #EC2E7B;
  --b3:           #F2545B;   /* the one who rang the next plumber */
  --b4:           #12A150;

  --mist:         #F8F8FC;
  --lilac:        #F5F3FE;
  --lilac-2:      #EFECFD;
  --ink3:         #41414B;
  --grey:         #6B6B78;
  --grey2:        #83838D;
  --gold:         #F2B01E;
  --carbon:       #08080C;

  --panel:        min(88vw,1200px);
  --shell:        1480px;

  --ease-spring:  cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink2);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.display{
  font-family:Fraunces,Newsreader,Georgia,'Times New Roman',serif;
  font-optical-sizing:none;
  font-variation-settings:'opsz' 9,'SOFT' 0,'WONK' 0;
  font-weight:700;
}

/* ── TOP BAR ────────────────────────────────────────────────── */
.topbar{ background:var(--white); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  max-width:var(--shell); margin-inline:auto;
  padding:22px 24px;
}
.brand{
  display:inline-flex; align-items:center; gap:11px;
  color:var(--field); text-decoration:none;
  border-radius:10px;
}
.brand svg{ width:26px; height:26px; display:block; color:var(--field); flex:none; }
.brand span{
  font-family:Fraunces,Georgia,serif; font-weight:700;
  font-size:27px; letter-spacing:-.015em; line-height:1;
  color:var(--ink2);
}
.brand:focus-visible{ outline:2px solid var(--field); outline-offset:6px; }

.navlinks{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.navlink{
  position:relative; display:inline-block;
  font-size:15.5px; font-weight:500; letter-spacing:-.005em;
  color:var(--ink3);
  text-decoration:none;
  padding:6px 2px; border-radius:8px;
  transition:color .28s var(--ease-spring);
}
.navlink .grad{
  position:absolute; inset:6px 2px;
  background-image:linear-gradient(95deg,#2FE08A 0%,#5BE8C0 26%,#FF2D7E 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  opacity:0;
  transition:opacity .3s var(--ease-spring);
  pointer-events:none; white-space:nowrap;
}
.navlink:hover{ color:transparent; }
.navlink:hover .grad{ opacity:1; }
.navlink.is-current{ color:transparent; }
.navlink.is-current .grad{ opacity:1; }
.navlink:focus-visible{ outline:2px solid var(--field); outline-offset:3px; }

/* ── "HOW IT WORKS" DROPDOWN ────────────────────────────────── */
/* Click/tap to open, not hover. <details> gives touch and keyboard
   support for nothing, and a hover-only menu is unreachable on a
   phone — which is the exact bug the nav had until just now. */
/* The nav carries .rise on the homepage, whose transform opens a stacking
   context — so the menu z-index cannot escape it and the headline, a later
   sibling, paints over the panel. Lifting the whole nav fixes it. */
.nav{ position:relative; z-index:50; }
.navdrop{ position:relative; }
.navdrop > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.navdrop > summary::-webkit-details-marker{ display:none; }
.navdrop > summary::marker{ content:''; }
/* The gradient swap targets the label only, so the chevron does not
   turn transparent along with the text. */
.navlabel{ position:relative; display:inline-block; }
.navdrop .grad{ inset:0; }
.navdrop > summary.navlink:hover,
.navdrop > summary.navlink.is-current{ color:inherit; }
.navdrop > summary.navlink:hover .navlabel,
.navdrop > summary.navlink.is-current .navlabel{ color:transparent; }
.navchev{ width:11px; height:11px; flex:none; transition:transform .26s var(--ease-spring); }
.navdrop[open] .navchev{ transform:rotate(180deg); }

.navmenu{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%);
  z-index:40;
  min-width:236px;
  background:var(--white);
  border:1px solid #EDEDF3;
  border-radius:16px;
  padding:14px;
  display:grid; gap:8px;
  box-shadow:0 24px 48px -16px rgba(23,23,40,.22), 0 4px 12px -4px rgba(23,23,40,.10);
}
.navmenu-item{
  display:flex; align-items:center; gap:13px;
  padding:6px; border-radius:11px;
  text-decoration:none;
  font-family:Inter,sans-serif;
  font-size:15.5px; font-weight:600; letter-spacing:-.005em;
  color:var(--ink2); white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}
.navmenu-item:hover{ background:var(--lilac); color:var(--field); }
.navmenu-item:focus-visible{ outline:2px solid var(--field); outline-offset:2px; }
.navmenu-ico{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid #ECECF3; border-radius:10px;
  background:var(--white); color:var(--field);
}
.navmenu-ico svg{ width:20px; height:20px; display:block; }

.navactions{ display:flex; align-items:center; gap:11px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Inter,sans-serif; font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer;
  border-radius:999px; white-space:nowrap;
  transition:transform .3s var(--ease-spring), background-color .25s ease,
             color .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn-ghost{
  padding:10px 24px;
  color:var(--ink2); background:transparent;
  border:1px solid rgba(23,23,30,.22);
}
.btn-ghost:hover{ background:rgba(23,23,30,.05); border-color:rgba(23,23,30,.42); }
.btn-ghost:focus-visible{ outline:2px solid var(--field); outline-offset:3px; }
.btn-dark{
  padding:11px 24px;
  color:var(--white); background:var(--ink2);
  border:1px solid var(--ink2);
}
.btn-dark:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,0,0,.45); }
.btn-dark:focus-visible{ outline:2px solid var(--field); outline-offset:3px; }

.btn-white{
  padding:11px 24px;
  color:var(--ink); background:var(--white);
  border:1px solid var(--white);
}
.btn-white:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(0,0,0,.5); }
.btn-white:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
/* ══ CLOSE ═════════════════════════════════════════════════════ */
.close{ background:var(--white); padding:clamp(18px,2.6vw,40px) 24px clamp(26px,3vw,42px); }
.pband{
  max-width:var(--panel);
  margin:0 auto;
  background:var(--field);
  border-radius:32px;
  padding:clamp(48px,5vw,72px) clamp(24px,3.9vw,56px) clamp(44px,4.6vw,66px);
  text-align:center;
}
.pband-h{
  color:var(--white);
  font-size:clamp(1.62rem,2.92vw,2.62rem);
  line-height:1.12; letter-spacing:-.01em;
  margin:0 0 10px;
  text-wrap:balance;
}
.pband-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 40px;
  font-family:Fraunces,Newsreader,Georgia,serif;
  font-variation-settings:'opsz' 9,'SOFT' 0,'WONK' 0;
  font-size:21px; font-weight:700; letter-spacing:-.008em;
  color:var(--white); background:var(--pink-h);
  border-radius:10px; text-decoration:none; white-space:nowrap;
  box-shadow:0 10px 30px rgba(232,50,152,.40);
  transition:transform .3s var(--ease-spring), background-color .25s ease, box-shadow .3s ease;
}
.pband-btn:hover{ background:#FF3FA8; transform:translateY(-2px); box-shadow:0 14px 34px rgba(232,50,152,.52); }
.pband-btn:active{ transform:translateY(0) scale(.985); }
.pband-btn:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.foot{
  max-width:var(--panel);
  margin:clamp(40px,4vw,58px) auto 0;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  gap:34px;
}
.foot-tile{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:11px;
  background:var(--field);
  margin-bottom:18px;
}
.foot-tile svg{ width:29px; height:29px; display:block; color:var(--white); }
.foot-tag{
  font-family:Inter,sans-serif;
  font-size:16.5px; font-weight:700; line-height:1.36;
  letter-spacing:-.015em; color:var(--ink2);
  margin:0; max-width:205px;
}
.foot h4{
  font-family:Inter,sans-serif;
  font-size:16px; font-weight:700; letter-spacing:-.015em;
  color:var(--ink2);
  margin:0 0 16px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.foot a{
  font-size:14.5px; line-height:1.2;
  color:#74747E; text-decoration:none;
  justify-self:start;
  transition:color .22s ease;
}
.foot a:hover{ color:var(--ink2); }
.foot a:focus-visible{ outline:2px solid var(--field); outline-offset:3px; border-radius:4px; }
.foot-rule{
  max-width:var(--panel);
  margin:clamp(56px,6.4vw,92px) auto 0;
  border-top:1px solid #E5E5EA;
  padding-top:22px;
  font-size:13.5px; color:#8A8A94;
}


/* ── SHARED RESPONSIVE ──────────────────────────────────────── */
@media (max-width:1080px){
  .foot{ grid-template-columns:1.4fr 1fr 1fr; row-gap:46px; }
  .navlinks{ gap:24px; }
}
@media (max-width:900px){
  /* Mobile: the links wrap onto their own row instead of vanishing.
     There was no menu behind the old display:none, so Pricing and
     Results were unreachable on a phone. */
  .nav{ flex-wrap:wrap; row-gap:14px; }
  .navlinks{ order:3; width:100%; justify-content:center; gap:22px; }
  .navlink{ font-size:14px; }
}
@media (max-width:620px){
  .close{ padding-left:16px; padding-right:16px; }
  .pband-btn{ width:100%; padding:0 16px; }
  .foot{ grid-template-columns:1fr 1fr; gap:26px; row-gap:38px; max-width:none; }
  .foot > div:first-child{ grid-column:1 / -1; }
  .foot-rule{ max-width:none; }
  .brand span{ font-size:22px; }
  .navactions .btn{ padding:9px 15px; font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}