/* SEO hero: an Example Google results page, matched to Google's live light page (measured 2026-10-01):
   Google Sans, logo + search pill header, tabs on a hairline, filter chips, location line, "Businesses" with the
   map strip above the list, 16px names, 14px detail lines, round Website and Directions buttons.
   Names stay at weight 500 (site rule, Google uses 700). Other businesses are greyed; every name is made up. */
.serp-shot { border: 0 !important; background: #fff; }
.serp-stage { position: relative; display: flex; flex-direction: column; gap: 20px; }   /* moved from the hero into "Get found on Google" (Evan 2026-10-01) */
.serp-stage .serp-shot { height: min(640px, calc(100vh - 220px)); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
.serp-stage .serp-shot figcaption { top: 4px; left: auto; right: 4px; z-index: 2; }   /* top-right strip, clear of tabs and map */

/* Header: small logo + search pill (results page); on the home page the logo collapses and the pill centres */
.serp-top { display: flex; align-items: center; position: relative; z-index: 2; }
.serp-stage .serp-top .seo-search-box.serp-searchbar { flex: 1; min-width: 0; height: 48px; padding: 0 16px 0 20px; gap: 12px; border: 0; border-radius: 24px; background: #fff;
  box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16); font: 16px "Google Sans", Arial, sans-serif; color: #1f1f1f; }
.serp-searchbar .seo-search-icon { color: #9aa0a6; }
.serp-searchbar .seo-caret { height: 18px; margin-left: -11px; }   /* sit right after the text, not after the 12px flex gap */
.serp-x { margin-left: auto; color: #474747; font-size: 22px; line-height: 1; transition: opacity .3s; }
.serp-stage.home .serp-x { opacity: 0; }
.serp-mic, .serp-lens { display: inline-flex; color: #474747; }
.serp-mic { padding-left: 12px; border-left: 1px solid #dadce0; }
.serp-mic svg, .serp-lens svg { width: 20px; height: 20px; }

.serp { --blue: #1a0dab; --link: #0b57d0; --ink: #1f1f1f; --mute: #474747; --grey: #70757a; --line: #ebebeb; --chip: #f1f3f4;
  --star: #fbbc04; --pin: #ea4335; --green: #188038; --row: 104px;
  padding: 30px 56px 0 22px; font: 14px/1.5 "Google Sans", Arial, sans-serif; color: var(--ink); text-align: left; }
.serp-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 0 -56px 12px -22px; padding: 0 56px 0 22px; font-size: 14px; font-weight: 500; color: var(--grey); white-space: nowrap; overflow: hidden; }
.serp-tabs span { padding: 0 0 10px; }
.serp-tabs .on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.serp-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.serp-chips span { height: 34px; display: inline-flex; align-items: center; border: 1px solid #dadce0; border-radius: 999px; padding: 0 15px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.serp-loc { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--mute); margin-bottom: 14px; }
.serp-loc svg { width: 16px; height: 16px; color: var(--ink); margin-right: 4px; }
.serp-loc .city { color: var(--ink); font-weight: 500; }
.serp-loc .choose { color: var(--link); }
.serp-loc .dots { margin-left: 14px; color: var(--mute); font-size: 16px; }
.serp-h { font-size: 20px; line-height: 28px; color: var(--ink); margin: 0 0 12px; }

/* Map strip above the list, like Google */
.biz-map { position: relative; height: 140px; border-radius: 12px; overflow: hidden; margin-bottom: 4px; background: #f2efe9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 150' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='640' height='150' fill='%23f2efe9'/%3E%3Crect x='150' y='96' width='58' height='34' rx='4' fill='%23c8e6c9'/%3E%3Crect x='388' y='12' width='40' height='26' rx='4' fill='%23c8e6c9'/%3E%3Cpath d='M250 118c14-8 40-6 48 6s-4 24-26 24-34-6-34-16 4-10 12-14z' fill='%23d7ecd0'/%3E%3Cpath d='M14 -5 L14 155 M44 -5 L44 155 M74 -5 L74 155 M104 -5 L104 155 M134 -5 L134 155 M164 -5 L164 155 M194 -5 L194 155 M224 -5 L224 155 M254 -5 L254 155 M284 -5 L284 155 M314 -5 L314 155 M344 -5 L344 155 M374 -5 L374 155 M404 -5 L404 155 M434 -5 L434 155 M464 -5 L464 155 M494 -5 L494 155 M524 -5 L524 155 M554 -5 L554 155 M584 -5 L584 155 M614 -5 L614 155 M-5 10 L645 10 M-5 34 L645 34 M-5 58 L645 58 M-5 82 L645 82 M-5 106 L645 106 M-5 130 L645 130' stroke='%23e3e0da' stroke-width='4.2' fill='none'/%3E%3Cpath d='M14 -5 L14 155 M44 -5 L44 155 M74 -5 L74 155 M104 -5 L104 155 M134 -5 L134 155 M164 -5 L164 155 M194 -5 L194 155 M224 -5 L224 155 M254 -5 L254 155 M284 -5 L284 155 M314 -5 L314 155 M344 -5 L344 155 M374 -5 L374 155 M404 -5 L404 155 M434 -5 L434 155 M464 -5 L464 155 M494 -5 L494 155 M524 -5 L524 155 M554 -5 L554 155 M584 -5 L584 155 M614 -5 L614 155 M-5 10 L645 10 M-5 34 L645 34 M-5 58 L645 58 M-5 82 L645 82 M-5 106 L645 106 M-5 130 L645 130' stroke='%23ffffff' stroke-width='3' fill='none'/%3E%3Cpath d='M560 -5 C540 30 568 55 548 85 C532 110 556 130 544 160 L650 160 L650 -5 Z' fill='%23aadaff'/%3E%3Cpath d='M-5 58 L538 58' stroke='%23d6d3cc' stroke-width='10' fill='none'/%3E%3Cpath d='M-5 58 L538 58' stroke='%23ffffff' stroke-width='8' fill='none'/%3E%3Cpath d='M478 -5 L478 155' stroke='%23d6d3cc' stroke-width='10' fill='none'/%3E%3Cpath d='M478 -5 L478 155' stroke='%23ffffff' stroke-width='8' fill='none'/%3E%3Cpath d='M-5 150 L330 -5' stroke='%23d6d3cc' stroke-width='11' fill='none'/%3E%3Cpath d='M-5 150 L330 -5' stroke='%23ffffff' stroke-width='9' fill='none'/%3E%3Cg font-family='Google Sans, Arial, sans-serif' fill='%235f6368' font-size='12.5' text-anchor='middle'%3E%3Ctext x='70' y='92'%3ECoral Gables%3C/text%3E%3Ctext x='420' y='132'%3ECoconut Grove%3C/text%3E%3Ctext x='64' y='136'%3ESouth Miami%3C/text%3E%3C/g%3E%3Ctext x='598' y='76' font-family='Google Sans, Arial, sans-serif' font-size='11' font-style='italic' fill='%233b78c3' text-anchor='middle'%3EBiscayne Bay%3C/text%3E%3C/svg%3E") center / cover no-repeat; }
/* Google Maps pin: red teardrop, darker red edge, dark centre dot. The tip sits on the point (left/top). */
.serp-pin { position: absolute; width: 19px; height: 30px; margin: -30px 0 0 -9.5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 43'%3E%3Cpath d='M13.5 1C6.6 1 1 6.6 1 13.5c0 4.7 2.2 8.4 5.3 12.3 3.4 4.3 6.2 9 7.2 16.2 1-7.2 3.8-11.9 7.2-16.2 3.1-3.9 5.3-7.6 5.3-12.3C26 6.6 20.4 1 13.5 1z' fill='%23ea4335' stroke='%23b31412' stroke-width='1.3'/%3E%3Ccircle cx='13.5' cy='13.5' r='4.6' fill='%23b31412'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.serp-pin.you { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 43'%3E%3Cpath d='M13.5 1C6.6 1 1 6.6 1 13.5c0 4.7 2.2 8.4 5.3 12.3 3.4 4.3 6.2 9 7.2 16.2 1-7.2 3.8-11.9 7.2-16.2 3.1-3.9 5.3-7.6 5.3-12.3C26 6.6 20.4 1 13.5 1z' fill='%23bdc1c6' stroke='%239aa0a6' stroke-width='1.3'/%3E%3Ccircle cx='13.5' cy='13.5' r='4.6' fill='%2380868b'/%3E%3C/svg%3E"); }
.serp-pin.you.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 43'%3E%3Cpath d='M13.5 1C6.6 1 1 6.6 1 13.5c0 4.7 2.2 8.4 5.3 12.3 3.4 4.3 6.2 9 7.2 16.2 1-7.2 3.8-11.9 7.2-16.2 3.1-3.9 5.3-7.6 5.3-12.3C26 6.6 20.4 1 13.5 1z' fill='%23ea4335' stroke='%23b31412' stroke-width='1.3'/%3E%3Ccircle cx='13.5' cy='13.5' r='4.6' fill='%23b31412'/%3E%3C/svg%3E"); transform: scale(1.35); }
.serp-maplabel { position: absolute; font-size: 11.5px; line-height: 14px; color: #c5221f; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.serp-maplabel.g { color: #5f6368; opacity: 1; }
.serp-dot { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--pin); border: 1.5px solid #fff; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.serp-maplabel.on { opacity: 1; }
.map-exp { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #474747; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.map-exp svg { width: 16px; height: 16px; }

/* List: 6 rows; Your Business waits below them (clipped) and rises past up to 7 others. The right gutter holds the rise arrow. */
.biz-wrap { position: relative; margin-bottom: 10px; }
.biz-list { position: relative; list-style: none; margin: 0; padding: 0; height: calc(var(--row) * 6); overflow: clip; overflow-clip-margin: 26px; }   /* card, shadow, ring and arrow can draw 26px past the edges */
.biz { position: absolute; left: 0; right: 0; top: 0; height: var(--row); display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; box-sizing: border-box; background: #fff; border-bottom: 1px solid var(--line);   /* 14px sides: dividers run past the text */ transform: translateY(calc(var(--pos, 0) * var(--row)));
  transition: transform .45s cubic-bezier(.25,.74,.22,.99), opacity .25s; }
.biz.grey.bump { opacity: .45; }
.biz-main { min-width: 0; flex: 1; }
.biz-name { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-meta { font-size: 14px; color: var(--mute); line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ystars { color: var(--star); font-size: 13px; letter-spacing: .5px; }
.gstars { color: #dadce0; font-size: 13px; letter-spacing: .5px; }
.biz-meta .open { color: var(--green); }
.biz-act { display: flex; gap: 10px; flex: none; align-items: flex-start; padding-top: 4px; }
.act { display: grid; justify-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--link); width: 72px; }
.act i { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #c4c7c5; box-sizing: border-box; display: grid; place-items: center; color: var(--link); }
.act i svg { width: 18px; height: 18px; }
.biz.grey .biz-name { color: #9aa0a6; }
.biz.grey .biz-meta, .biz.grey .biz-meta .open { color: #bdc1c6; }
.biz.grey .act { color: #bdc1c6; } .biz.grey .act i { color: #bdc1c6; border-color: #e3e3e3; }
.serp-morebiz { display: flex; justify-content: center; margin: 0 0 26px; border: 1px solid #dadce0; border-radius: 999px; padding: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }

/* Rise: Your Business lifts, glides up past the others in one move, and settles at #2 (never #1: the playbook
   does not promise the top spot). The arrow rides beside the card in the right gutter (Evan 2026-10-01). */
.biz.you { z-index: 3; transition: transform .75s cubic-bezier(.25,.74,.22,.99), box-shadow .6s, scale .5s cubic-bezier(.25,.74,.22,.99), border-radius .3s; }
/* The arrow lives outside the clipped list, in the right gutter, and follows Your Business row by row (same --pos). */
.rise-arrow { position: absolute; right: -52px; top: calc(var(--pos, 6) * var(--row) + var(--row) / 2 - 16px); width: 32px; height: 32px;   /* ~11px clear of the lifted card */ border-radius: 50%; background: var(--link); color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(11,87,208,.35); opacity: 0; transform: translateY(10px) scale(.6);
  transition: opacity .35s, transform .45s cubic-bezier(.25,.74,.22,.99); }
.rise-arrow svg { width: 18px; height: 18px; }
.biz.you.lift { box-shadow: 0 18px 30px -12px rgba(32,33,36,.38), 0 0 0 1.5px rgba(11,87,208,.45); scale: 1.03; border-radius: 12px; border-bottom-color: transparent; }
.rise-arrow.on { opacity: 1; transform: none; }
.biz.you.rising { transition: box-shadow .6s, scale .5s cubic-bezier(.25,.74,.22,.99); }   /* JS drives --pos frame by frame */
.biz.you.thud { animation: serp-thud .55s cubic-bezier(.3,1.5,.5,1); }
@keyframes serp-thud { 0% { scale: 1.03; } 45% { scale: .975; } 100% { scale: 1; } }
.biz.you.thud::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 0 2px var(--link); pointer-events: none; animation: serp-ring .8s ease-out forwards; }
@keyframes serp-ring { from { opacity: 1; inset: 0; } to { opacity: 0; inset: -10px -12px; } }
.biz.you.landed { background: #f8fafd; }
.biz.you.landed { transition: transform .75s cubic-bezier(.25,.74,.22,.99), box-shadow 1.2s, scale .5s; }

/* Organic results */
.serp-res { margin-bottom: 24px; }
.serp-src { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.serp-fav { width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; display: grid; place-items: center; font-size: 12px; color: #1f1f1f; flex: none; }
.serp-src .nm { font-size: 14px; color: var(--ink); line-height: 20px; }
.serp-src .url { font-size: 12px; color: var(--mute); line-height: 18px; }
.serp-res .t { display: block; color: var(--blue); font-size: 20px; line-height: 26px; margin-bottom: 4px; }
.serp-res p { margin: 0; color: var(--mute); font-size: 14px; line-height: 22px; }
.serp-bar { display: block; height: 9px; border-radius: 5px; background: var(--chip); margin: 6px 0; }

/* Loading between searches: a bar runs along the tabs line while the results dim (js/seo-serp.js: .run, .loading) */
.serp-tabs { position: relative; }
.serp-tabs .serp-load { padding: 0; }
.serp-load { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; opacity: 0; transition: opacity .2s; }
.serp-load::before { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; background: var(--link); }
.serp-load.run { opacity: 1; }
.serp-load.run::before { animation: serp-load .9s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes serp-load { to { left: 100%; } }
.serp > :not(.serp-tabs) { transition: opacity .45s, filter .45s; }
.serp { transition: transform 1s cubic-bezier(.65,0,.35,1); }   /* scrolls down to Businesses after each load */
.serp-shot.instant .serp { transition: none; }
.serp-shot.loading .serp > :not(.serp-tabs) { opacity: .25; filter: blur(1.5px); transition-duration: .25s; }
.serp-shot.instant .biz, .serp-shot.instant .serp-pin, .serp-shot.instant .serp-maplabel { transition: none !important; }

/* First search only: a home screen (just the search pill, no Google wordmark, brand check 2026-10-03), type there,
   then the pill slides up into the results page.
   js/seo-serp.js sets .home on the panel and --home-y (pill to centre gap). */
.serp-home { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  pointer-events: none; opacity: 0; transition: opacity .5s; }
.serp-home-gap { height: 48px; }
/* Only transforms and opacity animate, so the slide stays on the GPU: the pill keeps its results-page size and
   is shifted to the home position (--home-x, --home-y from js/seo-serp.js). */
.serp-stage .serp-searchbar { position: relative; transition: transform 1s cubic-bezier(.5,0,.15,1); }
.serp-stage.home .serp-searchbar { transform: translate(var(--home-x, 0px), var(--home-y, 0px)); transition: transform .7s linear; }   /* down: plain and linear */
.serp-stage.home .serp-home { opacity: 1; }
.serp-stage.home .serp-shot { opacity: 0; transition: none; }

@media (max-width: 991px) {
  .serp-stage { min-width: 0; max-width: 100%; }   /* the nowrap tabs row was widening the grid column past the screen */
  .serp-stage .serp-shot { height: auto; max-height: none; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 560px) {
  .serp { padding: 30px 42px 0 4px; } .serp-tabs { margin: 0 -42px 12px -4px; padding: 0 42px 0 4px; }
  .rise-arrow { right: -38px; width: 28px; height: 28px; top: calc(var(--pos, 6) * var(--row) + var(--row) / 2 - 14px); } .rise-arrow svg { width: 16px; height: 16px; }
  .serp-tabs { gap: 18px; } .serp-chips span:nth-child(3) { display: none; }
  .biz-act .act:nth-child(2) { display: none; } .act { width: 60px; }
  .serp-maplabel.g { display: none; }
  .serp-res .t { font-size: 17px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .biz, .biz.you, .rise-arrow, .serp-pin, .serp-maplabel, .serp > *, .serp-searchbar { transition: none !important; } }

/* In "Get found on Google" the mockup needs more room than the default split gives it, and must never push
   past its column (the nowrap tabs row would). */
.serp-stage { min-width: 0; max-width: 100%; }
#seo-profile:has(.serp-stage) { min-width: 0; }
@media (min-width: 992px) { #included .seo-split:has(.serp-stage) { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); } }


/* The Google home frame sits at the top of the stage, so the animation's first frame lines up with the
   "Get found on Google." heading (Evan, 2026-10-03). js/seo-serp.js measures .serp-home-gap on load, so the
   search bar still lands in the gap. */
@media (min-width: 992px) { #included .serp-home { justify-content: flex-start; padding-top: 0; } }
/* Phones (Evan approved 2026-10-05, mobile lab #1): the results stay visible while the search types, dimmed while it "loads", so the screen is never empty. */
@media (max-width: 767px) { .serp-stage.home .serp-shot { opacity: 1; } .serp-shot.loading .serp > :not(.serp-tabs) { opacity: .6; filter: none; } }