/* Demo banner: a "demo in progress" window - collect the business data, push the update to the
   directories, check the Google Maps ranking - played once on load, left to right. Same type as
   the other banners, but a different picture from the Solutions and Pricing hubs. */
.egd-hero{
    background: radial-gradient(circle at 1px 1px, rgba(1,103,205,.08) 1px, transparent 0) 0 0 / 22px 22px,
                linear-gradient(180deg, #EAF3FD 0%, #FFFFFF 100%);
    border-bottom: 1px solid #DCE9F6; overflow: hidden;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.egd-hero *{ box-sizing: border-box; }
.egd-row{ display: contents; }
.egd-hero p, .egd-hero ul, .egd-hero ol, .egd-hero li, .egd-hero h4{ margin: 0; padding: 0; list-style: none; }
.egd-inner{
    max-width: 1180px; margin: 0 auto; padding: 40px 24px;
    display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 40px; align-items: center;
}
.egd-title{ margin: 0 0 14px !important; font-size: 46px; font-weight: 900; line-height: 1.02; letter-spacing: -.025em; color: #0167CD; }
.egd-title em{ display: block; font-style: normal; color: #FF5A00; }
.egd-sub{ margin: 0 0 24px !important; max-width: 430px; font: 500 17px/1.45 Roboto, Arial, sans-serif; color: #51657E; }
.egd-stats{ margin: 0 0 26px !important; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 16px; }
.egd-stats li + li{ padding-left: 16px !important; border-left: 2px solid rgba(1,103,205,.18); }
.egd-stats b{ display: block; font-size: 25px; font-weight: 900; line-height: .95; letter-spacing: -.02em; color: #FF5A00; }
.egd-stats span{ display: block; margin-top: 5px; font-size: 11px; font-weight: 800; line-height: 1.15; color: #0167CD; text-transform: uppercase; letter-spacing: .02em; max-width: 120px; }
.egd-cta{
    display: inline-block; padding: 14px 28px; border-radius: 999px; background: #FF5A00; color: #fff !important;
    text-decoration: none !important; font-size: 16px; font-weight: 800; letter-spacing: .06em;
    box-shadow: 0 6px 16px rgba(255,90,0,.25); transition: transform .15s, background .15s;
}
.egd-cta:hover{ background: #E04F00; transform: translateY(-1px); }

/* the window */
.egd-win{ background: #fff; border-radius: 18px; box-shadow: 0 22px 48px rgba(18,63,114,.18); overflow: hidden; font-family: Roboto, Arial, sans-serif; }
.egd-bar{ display: flex; align-items: center; gap: 6px; padding: 11px 16px; background: #F5F8FC; border-bottom: 1px solid #E8EEF5; }
.egd-bar > i{ width: 10px; height: 10px; border-radius: 50%; background: #DDE4EC; }
.egd-bar > span{ margin-left: 10px; font: 800 11px Montserrat, Arial, sans-serif; color: #123F72; text-transform: uppercase; letter-spacing: .06em; }
.egd-live{ margin-left: auto; font: 700 11px Roboto, Arial, sans-serif; font-style: normal; color: #0B7A5D; display: flex; align-items: center; gap: 6px; }
.egd-live::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34A853; box-shadow: 0 0 0 3px rgba(52,168,83,.2); }
.egd-steps{ position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 18px 12px !important; }
.egd-steps li{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    font: 800 11.5px Montserrat, Arial, sans-serif; color: #123F72; text-transform: uppercase; letter-spacing: .05em; }
.egd-steps li i{ font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: #FF5A00; color: #fff; display: grid; place-items: center; font-size: 11px; box-shadow: 0 0 0 4px #fff; }
.egd-track{ position: absolute; left: 18px; right: 18px; bottom: 4px; height: 4px; border-radius: 2px; background: #EEF2F7; overflow: hidden; }
.egd-track span{ display: block; height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(90deg, #FF5A00, #FF8A3D); transform-origin: left; }
.egd-panes{ display: grid; grid-template-columns: 1fr .9fr 1.15fr; gap: 12px; padding: 8px 16px 18px; }
.egd-pane{ min-width: 0; border: 1px solid #EDF1F6; border-radius: 12px; padding: 12px; background: #FBFCFE; }
.egd-pane h4{ margin: 0 0 10px !important; font: 800 10.5px Montserrat, Arial, sans-serif; color: #51657E; text-transform: uppercase; letter-spacing: .06em; }
.egd-ok{ flex: none; width: 16px; height: 16px; border-radius: 50%; background: #34A853; display: grid; place-items: center; }
.egd-ok svg{ width: 10px; height: 10px; }
.egd-form li{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 6px; padding: 6px 8px !important; margin-bottom: 6px !important; background: #fff; border: 1px solid #E8EEF5; border-radius: 8px; }
.egd-form span{ grid-column: 1; font-size: 9.5px; color: #8A97A8; }
.egd-form b{ grid-column: 1; font-size: 12px; font-weight: 500; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.egd-form .egd-ok{ grid-column: 2; grid-row: 1 / span 2; }
.egd-push li{ display: flex; align-items: center; gap: 8px; padding: 5px 0 !important; border-bottom: 1px dashed #E8EEF5; }
.egd-push li:last-child{ border-bottom: 0; }
.egd-logo{ flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(18,63,114,.12); display: grid; place-items: center; }
.egd-logo svg{ width: 13px; height: 13px; }
.egd-push b{ flex: 1; font-size: 12px; font-weight: 500; color: #222; }
.egd-more{ margin-top: 6px !important; font-size: 10.5px; color: #8A97A8; }
.egd-serp{ background: #fff; border: 1px solid #E8EEF5; border-radius: 10px; overflow: hidden; }
.egd-q{ display: flex; align-items: center; gap: 6px; margin: 8px !important; padding: 6px 10px !important; border-radius: 999px; background: #F3F6FA; font-size: 11.5px; color: #222; }
.egd-q svg{ flex: none; width: 13px; height: 13px; }
.egd-q span{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.egd-mapstrip{ position: relative; height: 40px; background: linear-gradient(135deg, #E6F2DE 0%, #DDEBFA 55%, #EEF3E6 100%); }
.egd-pin{ position: absolute; left: 50%; top: 50%; width: 14px; transform: translate(-50%, -60%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.egd-pin svg{ display: block; width: 14px; height: 19px; fill: #FF5A00; }
.egd-res{ position: relative; }
.egd-res li{ display: flex; gap: 8px; align-items: center; height: 42px; padding: 0 9px !important; border-top: 1px solid #F0F3F7; background: #fff; }
.egd-res li.egd-you{ background: #FFF6EF; position: relative; z-index: 1; }
.egd-rk{ flex: none; width: 18px; height: 18px; border-radius: 50%; background: #EAF2FC; color: #0167CD; font: 800 9.5px Montserrat, Arial, sans-serif; display: grid; place-items: center; }
.egd-you .egd-rk{ background: #FF5A00; color: #fff; }
.egd-rt{ min-width: 0; display: flex; flex-direction: column; }
.egd-rt b{ display: block; line-height: 1.3; font-size: 11.5px; font-weight: 700; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.egd-rt small{ display: block; line-height: 1.3; font-size: 10px; color: #F5B301; white-space: nowrap; overflow: hidden; }
.egd-rt small span{ color: #70757a; }
.egd-rt small em{ font-style: normal; color: #444; }
.egd-res li:not(.egd-you) .egd-rt b{ color: #4a5564; font-weight: 500; }
.egd-up{ margin-top: 8px !important; text-align: center; font: 700 11px Roboto, Arial, sans-serif; color: #0B7A5D; }
.egd-up b{ color: #0B7A5D; }

/* play the demo once: fields fill and tick, the bar moves on, directories tick, the rank grid
   fills from the pin outwards. Long soft ease-outs; each piece keeps its layer (no end "click"). */
@media (prefers-reduced-motion: no-preference){
    .egd-form li, .egd-push li, .egd-c, .egd-ok, .egd-track span, .egd-pane{ will-change: opacity, transform; backface-visibility: hidden; }
    .egd-pane{ opacity: 0; animation: egd-fade .8s cubic-bezier(.16, 1, .3, 1) both; }
    .egd-pane.p1{ animation-delay: .2s; } .egd-pane.p2{ animation-delay: 1.5s; } .egd-pane.p3{ animation-delay: 2.8s; }
    .egd-form li, .egd-push li{ opacity: 0; animation: egd-rise .7s cubic-bezier(.16, 1, .3, 1) var(--d) both; }
    .egd-form .egd-ok, .egd-push .egd-ok{ opacity: 0; animation: egd-pop .6s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .35s) both; }
    /* the climb: Your Business starts 3rd and rises to 1st while the other two step down */
    .egd-res li{ will-change: transform; }
    .egd-res .egd-r0{ animation: egd-climb 1.3s cubic-bezier(.65, 0, .25, 1) 3.35s both; }
    .egd-res .egd-r1, .egd-res .egd-r2{ animation: egd-down 1.3s cubic-bezier(.65, 0, .25, 1) 3.35s both; }
    .egd-res .egd-rk{ animation: egd-fade .4s ease-out 4.5s both; }
    .egd-up{ opacity: 0; animation: egd-rise .8s cubic-bezier(.16, 1, .3, 1) 4.6s both; }
    .egd-track span{ transform: scaleX(0); animation: egd-track 3.6s cubic-bezier(.45, 0, .2, 1) .2s both; }
    @keyframes egd-fade{ from{ opacity: 0; } to{ opacity: .999; } }
    @keyframes egd-rise{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }
    @keyframes egd-pop{ from{ opacity: 0; transform: scale(.6); } to{ opacity: 1; transform: scale(1); } }
    @keyframes egd-climb{ from{ transform: translateY(200%); } to{ transform: translateY(0); } }
    @keyframes egd-down{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }
    @keyframes egd-track{ 0%{ transform: scaleX(.02); } 33%{ transform: scaleX(.34); } 66%{ transform: scaleX(.67); } 100%{ transform: scaleX(1); } }
}
/* tablets: text on top, the window underneath */
@media only screen and (min-width: 768px) and (max-width: 1023px){
    .egd-inner{ grid-template-columns: 1fr; gap: 28px; padding: 36px 32px; }
    .egd-copy{ text-align: center; display: flex; flex-direction: column; align-items: center; }
    .egd-sub{ max-width: 560px; }
    .egd-visual{ width: 100%; max-width: 760px; justify-self: center; }
}
/* phones: centred; the three panes stack */
@media only screen and (max-width: 767px){
    .egd-inner{ grid-template-columns: 1fr; gap: 26px; padding: 32px 20px 32px; }
    .egd-copy{ text-align: center; display: flex; flex-direction: column; align-items: center; }
    .egd-title{ font-size: 34px; }
    .egd-sub{ font-size: 15px; }
    .egd-stats{ width: 100%; max-width: 380px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .egd-stats li{ padding: 0 6px !important; }
    .egd-stats li + li{ padding-left: 6px !important; }
    .egd-stats b{ font-size: clamp(18px, 5.4vw, 24px); }
    .egd-stats span{ font-size: 10px; max-width: none; }
    .egd-cta{ font-size: 15px; }
    /* phones: the step bar tells the story; show the finished ranking only, so the pin-code box stays near */
    .egd-panes{ grid-template-columns: 1fr; padding-top: 4px; }
    .egd-pane.p1, .egd-pane.p2{ display: none; }
    .egd-pane.p3{ animation-delay: .6s; }
    .egd-serp{ max-width: 320px; margin: 0 auto; }
}

/* ===== DESKTOP (1024px+): same height as the home page banner at every width =====
   The home hero is width / 4.968 tall with its content scaled from a 1394 x 275 design;
   this banner uses the same numbers, so the menu bar under it never moves between pages.
   Inside, 1em = 1 design pixel. */
@media only screen and (min-width: 1024px){
    .egd-hero{ aspect-ratio: 4.968; border-bottom: 0; }
    .egd-inner{ display: block; height: 100%; padding: 0 16px; container-type: size; }
    .egd-row{ display: flex; align-items: center; justify-content: space-between; gap: 30em;
        width: 100%; height: 100%; font-size: min(calc(100cqw / 1394), calc(100cqh / 275)); }
    .egd-copy{ flex: 0 0 500em; }
    .egd-title{ font-size: 50em; margin: 0 0 .26em !important; }
    .egd-sub{ display: none; }
    .egd-stats{ margin: 0 0 20em !important; gap: 0 16em; }
    .egd-stats li + li{ padding-left: 16em !important; border-left-width: 2em; }
    .egd-stats b{ font-size: 25em; white-space: nowrap; }
    .egd-stats span{ font-size: 11.5em; margin-top: .4em; max-width: 11em; }
    .egd-cta{ font-size: 17em; padding: .8em 1.55em; }
    .egd-visual{ flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
}
@media only screen and (min-width: 1024px){
    /* the demo window, sized to the banner height (1em = 1 design px) */
    .egd-row{ gap: 34em; }
    .egd-visual{ justify-content: flex-end; }   /* right edge lines up with the phone number and Login */
    /* a natural window shape (about 2.6 : 1) rather than a long thin strip */
    .egd-win{ width: 100%; max-width: 640em; border-radius: 16em; box-shadow: 0 16em 36em rgba(18,63,114,.18); }
    /* the site sets pixel line-heights on lists and paragraphs; keep them relative in here */
    .egd-win, .egd-win p, .egd-win li, .egd-win span, .egd-win b, .egd-win small, .egd-win h4{ line-height: 1.25; }
    .egd-bar{ gap: 6em; padding: 8em 14em; }
    .egd-bar > i{ width: 8em; height: 8em; }
    .egd-bar > span, .egd-live{ font-size: 10em; }
    .egd-live::before{ width: .7em; height: .7em; }
    .egd-steps{ padding: 9em 16em 9em !important; }
    .egd-steps li{ font-size: 10.5em; gap: .6em; }
    .egd-steps li i{ width: 1.9em; height: 1.9em; font-size: .9em; }
    .egd-track{ left: 16em; right: 16em; bottom: 3em; height: 3em; }
    .egd-panes{ gap: 10em; padding: 4em 14em 12em; }
    .egd-pane{ padding: 9em 10em; border-radius: 10em; }
    .egd-pane h4{ font-size: 9.5em; margin: 0 0 .8em !important; }
    .egd-ok{ width: 14em; height: 14em; }
    .egd-ok svg{ width: 9em; height: 9em; }
    .egd-form li{ grid-template-columns: auto 1fr auto; gap: 0 6em; padding: 0 8em !important; height: 26em; margin-bottom: 5em !important; border-radius: 7em; }
    .egd-form span{ grid-column: 1; font-size: 9em; }
    .egd-form b{ grid-column: 2; font-size: 11em; text-align: right; }
    .egd-form .egd-ok{ grid-column: 3; grid-row: auto; }
    .egd-push li{ gap: 8em; padding: 3.5em 0 !important; }
    .egd-logo{ width: 19em; height: 19em; }
    .egd-logo svg{ width: 11em; height: 11em; }
    .egd-push b{ font-size: 11em; }
    .egd-more{ font-size: 9.5em; margin-top: .4em !important; }
    .egd-serp{ border-radius: 8em; }
    .egd-q{ margin: .57em !important; padding: .38em .86em !important; font-size: 10.5em; gap: .5em; }
    .egd-q svg{ width: 1.1em; height: 1.1em; }
    .egd-mapstrip{ display: none; }
    .egd-res li{ height: 28em; padding: 0 8em !important; gap: 7em; }
    .egd-rk{ width: 1.78em; height: 1.78em; font-size: 9em; }
    .egd-rt b{ font-size: 10.5em; }
    .egd-rt small{ font-size: 9em; }
    .egd-up{ font-size: 9.5em; margin-top: .5em !important; }
}

/* ===== stats row, balanced: equal space either side of each divider ===== */
.egd-stats{ display: flex !important; gap: 0 !important; justify-content: flex-start; width: auto !important; max-width: none !important; }
.egd-stats li, .egd-stats li + li{ padding: 0 18px !important; }
.egd-stats li:first-child{ padding-left: 0 !important; }
.egd-stats li:last-child{ padding-right: 0 !important; }
.egd-stats li{ flex: none; }   /* never squeeze a column - that is what pushed a label onto a 3rd line */
.egd-stats span{ max-width: none !important; white-space: nowrap; }   /* exactly the two lines set with <br> */
@media only screen and (max-width: 1023px){
    .egd-stats{ justify-content: center; }
}
@media only screen and (max-width: 767px){
    .egd-stats li, .egd-stats li + li{ padding: 0 14px !important; }
    .egd-stats li:first-child{ padding-left: 0 !important; }
    .egd-stats li:last-child{ padding-right: 0 !important; }
}
@media only screen and (min-width: 1024px){
    .egd-stats li, .egd-stats li + li{ padding: 0 18em !important; }
    .egd-stats li:first-child{ padding-left: 0 !important; }
    .egd-stats li:last-child{ padding-right: 0 !important; }
}