/* Opening: headline over one realistic assistant panel that answers, then folds its answer into
   one Recommended card that becomes Your business. Geometry is measured in js/hero.js. */

/* theme: the opening's own shades of the site tokens */
#hero {
  --floor: #10131D;                       /* the ground under the panel, a hint of dark blue */
  --hair: rgb(246 247 249 / .045);        /* the hairline grid */
  background: var(--bg); color: var(--fg); position: relative;
}
:root[data-scheme="light"] #hero {
  --floor: #E3ECFF;
  --hair: rgb(11 30 91 / .06);
}
.hero-pin {
  position: relative; height: 100svh; min-height: 760px; overflow: hidden;
  /* the floor fades back to the page ground at the very bottom, so no hard edge passes behind the
     card as it leaves for What GEO means (Josh, 11 Nov 2026) */
  background: linear-gradient(to bottom, transparent 84%, var(--bg) 100%), radial-gradient(120% 80% at 50% 100%, var(--floor) 0%, var(--bg) 60%);
}

/* Background: a faint hairline grid and grain. */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 20%, transparent 75%);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Copy */
.hero-copy {
  position: relative; z-index: 12; text-align: center;
  padding: calc(var(--header-h) + 20px) var(--gutter) 0;
  max-width: 1180px; margin: 0 auto;
}
.hero-copy h1 {
  margin: 0; font-weight: 600; letter-spacing: -0.038em; line-height: 1;
  font-size: clamp(2.375rem, 4.3vw, 3.875rem); text-wrap: balance;
}
.hero-copy h1 .h1-dot { color: var(--blue); }
.hero-sub {
  margin: 12px auto 0; max-width: 46em; color: var(--fg-2);
  font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.45; text-wrap: balance;
}
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- The assistant panel ---------- */
.hero-stage {
  position: relative; z-index: 10;
  width: min(980px, calc(100% - 2 * var(--gutter))); margin: 22px auto 0;
  will-change: transform;
}
.panel {
  --pn-line: rgba(10, 10, 11, .08);
  --pn-muted: rgba(10, 10, 11, .52);
  position: relative; display: flex; color: #17171A;
  font-family: var(--font); font-size: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 120px),
    #FBFBF9;
  border-radius: 20px; overflow: hidden; transform-origin: 50% 40%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    0 0 0 1px rgba(0, 0, 0, .55),
    0 1px 1px rgba(0, 0, 0, .25),
    0 6px 12px -4px rgba(0, 0, 0, .35),
    0 24px 48px -16px rgba(0, 0, 0, .55),
    0 60px 120px -40px rgba(0, 0, 0, .8);
}
:root[data-scheme="light"] .panel {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(11, 30, 91, .11),
    0 1px 2px rgba(11, 30, 91, .08),
    0 14px 28px -12px rgba(11, 30, 91, .18),
    0 50px 100px -40px rgba(11, 30, 91, .34);
}
/* sidebar: faded conversations, like any assistant app */
.pn-side {
  flex: none; width: 212px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; background: #F3F2EE; border-right: 1px solid var(--pn-line);
  font-size: 13px; color: rgba(10, 10, 11, .7); user-select: none;
}
.pn-side-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; color: rgba(10, 10, 11, .55); }
.pn-side-top .spark { color: #17171A; }
.pn-side-new { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; }
.pn-side-new svg { color: rgba(10, 10, 11, .6); }
.pn-side-h { margin: 14px 8px 4px; font-size: 11.5px; color: rgba(10, 10, 11, .42); }
.pn-recent { list-style: none; margin: 0; padding: 0; }
.pn-recent li { padding: 6px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-recent li:nth-child(n+4) { opacity: .7; }
.pn-recent li:nth-child(n+6) { opacity: .45; }
.pn-recent .is-current { background: rgba(10, 10, 11, .06); color: #17171A; }
.pn-user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 8px; border-top: 1px solid var(--pn-line); }
.pn-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #DCD9D1; font-size: 11px; font-weight: 600; color: rgba(10, 10, 11, .7); }

.pn-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 12px 0 16px; }
.pn-model { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.pn-model svg { opacity: .55; }
.replay {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--pn-line); background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 500; color: rgba(10, 10, 11, .72);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04); transition: border-color .2s, color .2s, background-color .2s;
}
.replay:hover { border-color: rgba(10, 10, 11, .25); color: #17171A; }

/* the chat follows the answer by itself and never scrolls under a wheel or a finger: those always
   move the page (audit D1, 11 Nov 2026); once written the answer fits it whole (js/hero.js settle) */
.pn-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pn-thread .t-block.is-out { display: none; }
.pn-thread { width: min(680px, 100%); margin: 0 auto; padding: 8px 26px 4px; }
.panel[data-phase="empty"] .pn-thread { display: none; }

/* empty state with suggested prompts */
.pn-empty { display: none; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 12px 26px 6px; }
.panel[data-phase="empty"] .pn-empty { display: flex; animation: rise .5s var(--ease) both; }
.pn-hello { margin: 0 0 22px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: #17171A; }
.suggestions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(640px, 100%); }
.suggestion {
  position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left;
  min-height: 118px; padding: 14px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--pn-line); color: #17171A;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 2px 6px -2px rgba(0, 0, 0, .05);
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.suggestion:hover { border-color: rgba(10, 10, 11, .2); transform: translateY(-2px); box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 10px 22px -10px rgba(0, 0, 0, .25); }
.suggestion:active { transform: translateY(0) scale(.985); }
.suggestion:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the start by itself (first scroll, or 10s idle): a pointer glides onto a suggestion and presses it */
.suggestion.is-pressed { transform: scale(.975); border-color: rgb(31 111 255 / .55); box-shadow: 0 0 0 4px rgb(31 111 255 / .14); transition-duration: .12s; }
.auto-cursor {
  position: absolute; left: 0; top: 0; z-index: 6; width: 22px; height: 22px; pointer-events: none;
  opacity: 0; transition: transform .42s cubic-bezier(.3, .7, .2, 1), opacity .2s var(--ease);
  filter: drop-shadow(0 2px 3px rgb(11 30 91 / .3));
}
.auto-cursor.is-on { opacity: 1; }
.auto-cursor svg { display: block; width: 100%; height: 100%; transition: scale .12s var(--ease); transform-origin: 20% 15%; }
.auto-cursor.is-down svg { scale: .86; }
.sg-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #F1F0EC; color: rgba(10, 10, 11, .7); }
.sg-icon svg { width: 17px; height: 17px; }
.sg-text { display: flex; flex-direction: column; gap: 3px; }
.sg-tag { font-size: 11.5px; font-weight: 500; color: var(--pn-muted); }
.sg-q { font-size: 13.5px; line-height: 1.38; font-weight: 500; }
.sg-arrow { position: absolute; right: 12px; top: 14px; width: 15px; height: 15px; color: rgba(10, 10, 11, .3); transition: color .2s, transform .25s var(--ease); }
.sg-arrow svg { width: 100%; height: 100%; }
.suggestion:hover .sg-arrow { color: var(--blue); transform: translate(2px, -2px); }

/* composer */
/* the moment the last reason is written the input bar folds to a slim pill, quickly, so the answer
   gets the room; a tap opens it again (Josh, 10 and 11 Nov 2026) */
.panel.is-slim:not(.cmp-open) .pn-composer { padding: 8px 16px; border-radius: 999px; cursor: text; }
.panel.is-slim:not(.cmp-open) .cmp-tools { display: none; }
.panel.is-slim:not(.cmp-open) .cmp-field { min-height: 22px; font-size: 14px; }
.pn-composer {
  flex: none; margin: auto auto 0; width: min(680px, calc(100% - 32px));
  border-radius: 22px; background: #fff; border: 1px solid rgba(10, 10, 11, .1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .14);
  padding: 12px 12px 10px 16px;
  transition: padding .2s var(--ease), border-radius .2s var(--ease);
}
.cmp-field { min-height: 24px; font-size: 15px; line-height: 1.5; color: #17171A; position: relative; }
.cmp-placeholder { position: absolute; left: 0; top: 0; color: rgba(10, 10, 11, .4); }
.panel.has-text .cmp-placeholder { display: none; }
.caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: #17171A; animation: caret 1.05s steps(1) infinite; }
.panel:not([data-phase="composing"]) .caret { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.cmp-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: rgba(10, 10, 11, .55); }
.cmp-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--pn-line); }
.cmp-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--pn-line); font-size: 13px; }
.cmp-pill svg { color: var(--blue); }
.cmp-spacer { flex: 1; }
.cmp-send {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #E6E5E1; color: #fff; transition: background-color .2s, transform .15s var(--ease);
}
.panel.has-text .cmp-send { background: #17171A; }
.panel.is-sending .cmp-send { transform: scale(.86); background: #3A3A3F; }
.pn-foot { flex: none; margin: 0; padding: 7px 16px 10px; text-align: center; font-size: 11.5px; color: rgba(10, 10, 11, .45); }

/* ---------- The thread ---------- */
.t-block { scroll-margin-top: 12px; }
.chat-q { display: flex; justify-content: flex-end; padding: 6px 0 12px; }
.q-bubble { margin: 0; max-width: 80%; padding: 10px 16px; border-radius: 20px; background: #EFEEEA; line-height: 1.45; }

.shimmer {
  background: linear-gradient(90deg, rgba(10, 10, 11, .42) 0%, rgba(10, 10, 11, .42) 40%, rgba(10, 10, 11, .95) 50%, rgba(10, 10, 11, .42) 60%, rgba(10, 10, 11, .42) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.think { margin: 0 0 6px; }
.think-head {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; color: var(--pn-muted);
}
.think-head:hover { color: #17171A; }
.think-icon svg, .search-icon svg { width: 15px; height: 15px; display: block; }
.think-chev svg { width: 11px; height: 11px; display: block; transition: transform .25s var(--ease); }
.think.is-open .think-chev svg { transform: rotate(180deg); }
.think-lines { list-style: none; margin: 4px 0 6px 7px; padding: 0 0 0 16px; border-left: 1px solid rgba(10, 10, 11, .12); display: none; }
.think.is-open .think-lines { display: block; }
.think-lines li { padding: 3px 0; font-size: 13.5px; line-height: 1.45; color: rgba(10, 10, 11, .55); }

.search { margin: 0 0 14px; }
.search-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-size: 13.5px; color: var(--pn-muted); }
.queries { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.queries li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 8px; background: #F1F0EC; font-size: 12.5px; color: rgba(10, 10, 11, .65); }
.queries svg { width: 12px; height: 12px; }
.src-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.src-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: #fff;
  border: 1px solid var(--pn-line); box-shadow: 0 1px 1px rgba(0, 0, 0, .03); min-width: 0;
}
.src-thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .06); }
.src-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--pn-muted); min-width: 0; }
.src-fav { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #F1F0EC; color: rgba(10, 10, 11, .6); }
.src-fav svg { width: 10px; height: 10px; }
.src-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.src-title { font-size: 12px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Photos: rounded frame with a fine inner border. Skeleton shimmer until the image has loaded
   (and, in the answer strip, until the stream reaches it), then the photo slides up into place. */
.ph { position: relative; display: block; overflow: hidden; background: #E9E7E2; }
.ph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: translateY(8px) scale(1.04);
  transition: opacity .5s var(--ease), transform .8s var(--ease);
}
.ph.is-loaded:not(.is-loading) img { opacity: 1; transform: scale(var(--zoom, 1)); }
.ph::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .08); }
.ph:not(.is-loaded)::before, .ph.is-loading::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%);
  background-size: 220% 100%; animation: shimmer 1.3s linear infinite;
}

/* Mini web pages drawn in code (source thumbnails, the website card): a tiny browser frame. */
.mp { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; overflow: hidden; }
.mp-bar { flex: none; display: flex; align-items: center; gap: 2.5px; height: 11px; padding: 0 5px; background: #F1F0EC; border-bottom: 1px solid rgba(10, 10, 11, .06); }
.mp-bar i { width: 3.5px; height: 3.5px; border-radius: 50%; background: rgba(10, 10, 11, .18); }
.mp-url { flex: 1; height: 5px; margin-left: 5px; border-radius: 3px; background: #fff; }
.mp-nav { flex: none; display: flex; align-items: center; gap: 4px; height: 10px; padding: 0 6px; }
.mp-nav b { width: 16px; height: 3px; border-radius: 2px; background: #17171A; margin-right: auto; }
.mp-nav i { width: 9px; height: 2px; border-radius: 2px; background: rgba(10, 10, 11, .25); }
.mp-hero { position: relative; flex: 1; min-height: 0; margin: 0 4px; border-radius: 4px; overflow: hidden; }
.mp-hero .ph { position: absolute; inset: 0; }
.mp-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .55)); }
.mp-title { position: absolute; left: 6px; right: 6px; bottom: 4px; z-index: 1; color: #fff; font-size: 7.5px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.mp-body { flex: none; padding: 4px 6px 5px; display: flex; flex-direction: column; gap: 3px; }
.mp-h { width: 55%; height: 4px; border-radius: 2px; background: #17171A; opacity: .7; }
.mp-lines { display: flex; flex-direction: column; gap: 2.5px; flex: 1; }
.mp-lines i { height: 2.5px; border-radius: 2px; background: rgba(10, 10, 11, .14); }
.mp-lines i:last-child { width: 70%; }
.mp-review, .mp-row { display: flex; gap: 4px; align-items: center; }
.mp-av { width: 8px; height: 8px; border-radius: 50%; background: #E2DFD8; flex: none; }
.mp-thumb { width: 14px; height: 10px; border-radius: 2px; background: #E2DFD8; flex: none; }
.mp--map .map { width: 100%; height: 100%; display: block; }
.mp-pin-card { position: absolute; left: 5px; bottom: 5px; display: flex; flex-direction: column; gap: 2px; width: 46%; padding: 4px 5px; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.mp-pin-card b { height: 3px; width: 80%; border-radius: 2px; background: #17171A; opacity: .75; }
.mp-pin-card i { height: 2.5px; width: 55%; border-radius: 2px; background: rgba(10, 10, 11, .2); }

.chat-answer { line-height: 1.6; }
.a-intro { margin: 0 0 12px; }
.a-intro strong { font-weight: 600; }
.a-place {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 8px; margin: 0 0 10px;
  border: 1px solid var(--pn-line); border-radius: 14px; background: #fff;
}
.a-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); }
.a-kicker i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--coral); }
.yb-link {
  display: inline-flex; align-self: flex-start; margin-top: 3px; padding: 0 0 1px; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--blue); border-bottom: 1px dashed rgba(31, 111, 255, .5);
}
.yb-link .sw-a, .yb-link .sw-b { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.yb-link svg { width: 11px; height: 11px; }
.yb-link:hover { border-bottom-style: solid; }
.yb-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
/* the note: a small tag beside the recommended business, joined to its name by a dotted line */
.yb-note {
  position: absolute; right: 16px; top: 12px; z-index: 1; padding: 8px 14px 9px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--apricot); color: #0B1B3F; font: italic 500 15px/1.2 var(--font); letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgb(169 47 29 / .22), 0 1px 2px rgba(11, 30, 91, .08), 0 10px 22px -10px rgba(11, 30, 91, .35);
  transform: translate(6px, 4px) rotate(-2deg); opacity: 0; visibility: hidden;
  transition: transform .55s var(--ease), opacity .4s var(--ease), visibility 0s .55s;
}
.yb-note::before { content: ''; position: absolute; inset: 3px; border-radius: 6px; border: 1px dashed rgb(169 47 29 / .4); pointer-events: none; }
.a-place.is-noted .yb-note { transform: rotate(-2deg); opacity: 1; visibility: visible; transition: transform .55s var(--ease), opacity .4s var(--ease), visibility 0s; }
.yb-note .sw-a, .yb-note .sw-b { white-space: nowrap; }
.yb-curve { position: absolute; overflow: visible; pointer-events: none; clip-path: inset(-20px -20px -20px 100%); transition: clip-path .7s var(--ease) .25s; }
/* the line draws out of the note towards the name once the note has arrived */
.a-place.is-noted .yb-curve { clip-path: inset(-20px -20px -20px -20px); }
.yb-curve path { fill: none; stroke: var(--coral); stroke-width: 1.4; stroke-dasharray: 2 3; stroke-linecap: round; opacity: .85; }
.yb-curve circle { fill: var(--coral); }
.yb-note:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 3px; }
.a-map { position: relative; flex: none; width: 98px; height: 96px; border-radius: 9px; overflow: hidden; }
.a-map .map { width: 100%; height: 100%; display: block; }
.a-map-label {
  display: none; position: absolute; left: 6px; bottom: 6px; align-items: center; gap: 4px;
  padding: 2px 7px 2px 5px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 10.5px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); color: #17171A; white-space: nowrap;
}
.a-map-label svg { width: 10px; height: 10px; color: var(--coral); }
.a-place-id { display: flex; flex-direction: column; min-width: 0; }
.a-place-name { font-weight: 600; font-size: 15px; }
/* four photos of the business beside the map, a neat 2 x 2 that stays in view (Josh, 11 Nov 2026);
   as each reason is written a copy lifts out as that plaque's face and the photo answers with a pulse */
.a-photos { position: relative; flex: none; display: grid; grid-template-columns: repeat(2, 64px); grid-auto-rows: 46px; gap: 4px; }
.a-photo {
  position: relative; border-radius: 7px; overflow: hidden; background: #E9EDF4;
  box-shadow: 0 0 0 1px rgb(11 30 91 / .08);
  animation: photo-in .45s var(--ease) both; animation-delay: calc(.2s + var(--k, 0) * .09s);
  transition: box-shadow .35s var(--ease), scale .35s var(--ease), filter .5s var(--ease);
}
.a-photo[data-k="1"] { --k: 1; } .a-photo[data-k="2"] { --k: 2; } .a-photo[data-k="3"] { --k: 3; }
.a-photo .ph { width: 100%; height: 100%; border-radius: 0; }
@keyframes photo-in { from { opacity: 0; scale: .9; } }
/* in the visitor's own answer the four photos wait for theirs */
.a-photos-yours {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px dashed rgb(31 111 255 / .55); border-radius: 8px; background: rgb(255 255 255 / .82); pointer-events: none;
  color: #1550C7; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .45s var(--ease);
}
.a-photos-yours svg { width: 18px; height: 18px; }
.is-yours .a-photos-yours { opacity: 1; }
.is-yours .a-photo { filter: grayscale(1) contrast(.8); }
/* The business name's highlight (Josh, 10 Nov 2026): a marker that sweeps in as the name arrives
   and stays, in the chat and on the card, so the eye goes name, note, photo. It is apricot, one of
   the few touches of the coral accent (audit D18, 11 Nov 2026): "this is the one AI named". Solid
   apricot under ink, so the name reads as marked, not tinted. */
.hl {
  padding: 0 .14em; margin: 0 -.14em; border-radius: 3px;
  background: linear-gradient(var(--apricot), var(--apricot)) no-repeat 0 92% / 100% 46%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.a-place .hl { animation: hl-sweep 1.1s var(--ease) .35s both; }
@keyframes hl-sweep { from { background-size: 0% 46%; } }
.a-place-kind { font-size: 13px; color: var(--pn-muted); }
.a-reasons { position: relative; z-index: 0; list-style: none; margin: 0 0 6px; padding: 0; }
.a-reason { position: relative; display: grid; grid-template-columns: 16px 112px 1fr; align-items: baseline; gap: 0 8px; padding: 4px 0; font-size: 14.5px; }
.a-reason .rdot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue); background: #fff; transform: translateY(1px) scale(0); transition: transform .4s var(--ease); }
.a-reason.is-marked .rdot { transform: translateY(1px) scale(1); }
.a-reason b { font-weight: 600; }
.a-txt { color: rgba(10, 10, 11, .75); }
.a-reason::before {
  content: ''; position: absolute; inset: 0 -10px; border-radius: 8px; background: rgba(31, 111, 255, .08);
  transform: scaleX(0); transform-origin: left; opacity: 0; z-index: -1; transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.a-reason.is-launching::before { transform: scaleX(1); opacity: 1; }
.cite {
  position: relative; display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; padding: 0 4px;
  border: 0; border-radius: 6px; background: #ECEBE7; color: rgba(10, 10, 11, .65); cursor: pointer;
  font-size: 10.5px; font-weight: 600; vertical-align: 1px; line-height: 1;
}
.cite.pop { animation: pop .35s var(--ease) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.cite:hover, .cite:focus-visible { background: #17171A; color: #fff; }
.cite-pop {
  position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); width: 230px; translate: -50% 4px;
  display: flex; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #fff; text-align: left;
  border: 1px solid var(--pn-line); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden; transition: opacity .2s, translate .25s var(--ease), visibility .2s; pointer-events: none;
}
.cite:hover .cite-pop, .cite:focus-visible .cite-pop { opacity: 1; visibility: visible; translate: -50% 0; }
.cp-type { display: block; font-size: 11px; font-weight: 500; color: var(--pn-muted); }
.cp-title { display: block; font-size: 12.5px; font-weight: 500; color: #17171A; line-height: 1.35; }
.a-also { margin: 6px 0 10px; font-size: 14px; color: rgba(10, 10, 11, .62); }
.a-site { margin: 0 0 10px; }
/* Quiet path from the answer to this business's chapter in section 5 (js/levels.js handles #levels). */
.a-site a {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13.5px; font-weight: 500;
  color: #17171A; text-decoration: underline; text-decoration-color: rgba(10, 10, 11, .25); text-underline-offset: 3px;
  transition: text-decoration-color .2s, gap .25s var(--ease);
}
.a-site a svg { width: 12px; height: 12px; color: var(--blue); }
.a-site a:hover, .a-site a:focus-visible { text-decoration-color: var(--blue); gap: 9px; }
.a-site a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.a-actions { display: flex; gap: 2px; margin: 0 0 8px -6px; color: rgba(10, 10, 11, .45); }
.a-act { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; }
.a-act svg { width: 16px; height: 16px; }
.a-follow { display: flex; flex-direction: column; align-items: flex-start; gap: 0; border-top: 1px solid var(--pn-line); padding-top: 6px; margin-bottom: 8px; }
.follow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; color: rgba(10, 10, 11, .7); }
.follow svg { width: 13px; height: 13px; color: rgba(10, 10, 11, .35); transform: rotate(45deg); }
.chat-answer .rise, .pn-thread .rise { animation: rise .45s var(--ease) both; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } }

/* slide swap: the first text slides up and out, the second slides in from below */
/* both texts share one grid cell, so the swap keeps the height of the taller one */
.sw { position: relative; display: grid; overflow: hidden; }
.sw-a, .sw-b { grid-area: 1 / 1; min-width: 0; display: block; transition: transform .55s var(--ease), visibility 0s; }
.sw-b { transform: translateY(105%); visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s; }
.is-yours .sw-a { transform: translateY(-105%); visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s; }
.is-yours .sw-b { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
/* the reason text keeps its citation pop ups, so it moves without a clip */
.sw--txt { overflow: visible; }
.sw--txt .sw-a, .sw--txt .sw-b { transition: transform .45s var(--ease), opacity .35s var(--ease), visibility 0s .45s; }
.sw--txt .sw-a { transition-delay: 0s; }
.sw--txt .sw-b { transform: translateY(10px); opacity: 0; }
.is-yours .sw--txt .sw-a { transform: translateY(-10px); opacity: 0; }
.is-yours .sw--txt .sw-b { transform: none; opacity: 1; transition: transform .45s var(--ease) .1s, opacity .35s var(--ease) .1s, visibility 0s; }
.sw--tile { position: absolute; inset: 0; }
.sw--tile .sw-a, .sw--tile .sw-b { position: absolute; inset: 0; }
.sw--tile .ph { width: 100%; height: 100%; }
.a-you img { object-position: 50% 30%; }

/* ---------- The Recommended card, which becomes "Your business" ---------- */
.answer-card {
  position: absolute; left: 0; top: 0; z-index: 20; width: var(--ac-w, 600px);
  color: var(--ink); background: linear-gradient(180deg, #FFFFFF, #F7F6F2); border-radius: 22px; padding: 22px 24px 16px;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3), 0 40px 90px -30px rgba(0, 0, 0, .9);
  visibility: hidden;
}
:root[data-scheme="light"] .answer-card { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 30, 91, .12), 0 2px 4px rgba(11, 30, 91, .08), 0 40px 90px -36px rgba(11, 30, 91, .45); }
.ac-head { display: flex; gap: 18px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(10, 10, 11, .08); }
.ac-map { position: relative; width: 92px; height: 92px; border-radius: 14px; overflow: hidden; flex: none; }
.ac-map-a, .ac-map-b { position: absolute; inset: 0; display: block; }
.ac-map-a .ph { width: 100%; height: 100%; border-radius: 14px; }
.ac-map-a { transform: translateY(calc(var(--m-photo, 0) * -100%)); }
.ac-map-b { transform: translateY(calc((1 - var(--m-photo, 0)) * 100%)); }
.ac-map-b .ph { width: 100%; height: 100%; border-radius: 14px; }
.ac-map-b img { object-position: 50% 28%; }
/* Your business: a small badge on the pointing photo, the opening's one touch of coral */
.ac-head { position: relative; }
.ac-badge {
  /* on the photo's bottom edge: the photo is centred in the head, above its 16px bottom padding */
  position: absolute; left: 46px; top: calc((100% - 16px) / 2 + 34px); z-index: 2; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px;
  background: var(--coral-ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgb(169 47 29 / .16), 0 6px 14px -6px rgb(11 30 91 / .35);
  /* it goes at once (no fade out): a badge still fading never outlives its card (the pin is longer now) */
  opacity: 0; scale: .8; visibility: hidden; transition: none;
}
.ac-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--apricot); }
/* inherit, never visible: a hidden card (the clone that carries it on, or the original it hands
   over from) must hide its badge too, so one badge shows at a time (Josh, 11 Nov 2026) */
.answer-card.is-yours .ac-badge { opacity: 1; scale: 1; visibility: inherit; transition: opacity .35s var(--ease), scale .45s var(--ease), visibility 0s; }
.ac-kicker { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.ac-dot-slot { width: 12px; height: 12px; border-radius: 50%; border: 1px dashed rgba(31, 111, 255, .5); }
.ac-name { margin: 4px 0 2px; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; min-height: 1.1em; }
.ac-kind { margin: 0; font-size: .875rem; color: rgba(10, 10, 11, .55); }
/* slide swap: the original line slides up and out, the "yours" line slides in from below */
.sl { position: relative; display: block; overflow: hidden; }
.sl-a, .sl-b { display: block; transform: translateY(calc(var(--m, 0) * -100%)); }
.sl-b { position: absolute; inset: 0; transform: translateY(calc((1 - var(--m, 0)) * 100%)); }
.reason .sl-b { display: flex; align-items: center; }
.ac-reasons { list-style: none; margin: 0; padding: 6px 0 0; }
.reason { display: grid; grid-template-columns: 18px 1fr; gap: 0 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(10, 10, 11, .06); font-size: .875rem; }
.reason:last-child { border-bottom: 0; }
.reason .reason-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--blue); background: #fff; transition: background-color .3s; }
.reason .sl-a { display: grid; grid-template-columns: 130px 1fr; gap: 0 10px; transform: translateY(calc(var(--m, 0) * -100%)); }
.reason b { font-weight: 600; }
.reason .sl-a span { color: rgba(10, 10, 11, .7); }
.answer-card.is-yours .reason-dot { background: var(--blue); }
.answer-card.is-yours .ac-name .sl-a { visibility: hidden; }
.ac-foot { margin: 10px 0 0; font-size: .6875rem; color: rgba(10, 10, 11, .45); }
.ac-line {
  position: absolute; left: 0; right: 0; z-index: 20; margin: 0; padding: 0 var(--gutter); text-align: center; overflow: hidden; visibility: hidden; text-wrap: balance;
  font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; letter-spacing: -0.02em; color: var(--fg);
}
/* the card leaves for What GEO means on its own: its line has faded by then (hero.js morph) and is
   never shown while the card is carried, so it never slides across it (Josh, 11 Nov 2026) */
.answer-card[data-carried="true"] + .ac-line { visibility: hidden !important; }
.ac-line span { display: inline-block; transform: translateY(calc((1 - var(--m, 0)) * 110%)); }

/* Scroll hint */
.scroll-hint {
  position: absolute; left: var(--gutter); bottom: 26px; z-index: 13;
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--fg-rgb) / .55);
}
.mouse { position: relative; width: 20px; height: 30px; border-radius: 10px; border: 1.5px solid currentColor; }
.mouse i { position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: currentColor; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }

/* Narrow desktop: no sidebar */
@media (max-width: 1100px) { .pn-side { display: none; } }

/* Phone and small tablet */
@media (max-width: 819.98px) {
  .hero-pin { height: 100svh; min-height: 700px; }
  .hero-copy { padding-top: calc(var(--header-h) + 18px); text-align: left; }
  .hero-copy h1 { font-size: 2.25rem; line-height: 1.02; }
  .hero-sub { margin: 10px 0 0; font-size: .9375rem; }
  .hero-actions { justify-content: flex-start; margin-top: 16px; }
  .hero-actions .btn--primary { width: 100%; min-height: 46px; }
  .hero-actions .btn--ghost { display: none; }
  .hero-stage { margin-top: 20px; }
  .panel { border-radius: 18px; }
  .pn-top { height: 44px; }
  .pn-thread { padding: 6px 14px 4px; }
  .pn-empty { justify-content: flex-start; padding: 6px 12px; }
  .pn-hello { margin: 4px 0 12px; font-size: 20px; }
  .suggestions { grid-template-columns: 1fr; gap: 8px; }
  .suggestion { flex-direction: row; align-items: center; min-height: 0; padding: 11px 36px 11px 11px; gap: 11px; }
  .sg-arrow { top: 50%; margin-top: -7px; }
  /* phone: the input bar is one row, like a phone assistant (field, then send), and the suggestions
     drop their small tag line, so all three fit the answer sized panel (audit D17) */
  .pn-composer { display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); padding: 5px 5px 5px 14px; border-radius: 999px; }
  .cmp-field { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
  .cmp-tools { margin-top: 0; }
  .cmp-tools .cmp-btn, .cmp-spacer { display: none; }
  .sg-tag { display: none; }
  .cmp-pill { display: none; }
  .src-cards { grid-template-columns: repeat(4, 150px); overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
  /* phone: a compact recommendation and one line reasons, so the chat shows both */
  .a-map { width: 44px; height: 59px; }
  .a-map-label { display: none; }
  .a-place-kind { display: none; }
  .a-place-name { font-size: 15px; }
  .a-photos { grid-template-columns: repeat(2, 38px); grid-auto-rows: 28px; gap: 3px; grid-row: span 2; align-self: center; }
  .a-photo { border-radius: 5px; }
  .a-photos-yours span { display: none; }
  .a-reason { grid-template-columns: 14px 106px 1fr; font-size: 13.5px; padding: 3px 0; }
  .a-reason .sw-a, .a-reason .sw-b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* phone: the note sits under the name and is the way in to "Your business" */
  .a-place { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 2px 8px; }
  .a-place-id, .yb-note { grid-column: 3; }
  .a-map { grid-row: span 2; align-self: center; }
  .yb-link { display: none; }
  .yb-note { position: relative; right: auto; top: auto; justify-self: start; margin: 4px 0 2px; padding: 5px 7px 6px; font-size: 11.5px; letter-spacing: -0.01em; transform: translate(0, 4px) rotate(-1.5deg); }
  .a-place.is-noted .yb-note { transform: rotate(-1.5deg); }
  .answer-card { padding: 18px 18px 14px; }
  .ac-map { width: 68px; height: 68px; }
  .ac-badge { left: 34px; top: calc((100% - 16px) / 2 + 22px); font-size: 10.5px; padding: 3px 8px 3px 6px; }
  .ac-name { font-size: 1.375rem; }
  .reason .sl-a { grid-template-columns: 1fr; }
  .scroll-hint { display: none; }
}

/* Short phones (375x667, audit D17b): the copy sits a little tighter, so the headline, the written
   answer and the start of the ring of plaques all share the first screen. */
@media (max-width: 819.98px) and (max-height: 720px) {
  /* the phone tab row takes 44px of the header (Josh, 11 Nov 2026), so a little tighter still */
  .hero-copy { padding-top: var(--header-h); }
  .hero-copy h1 { font-size: 1.75rem; }
  .hero-sub { margin-top: 2px; font-size: .875rem; }
  .hero-actions { margin-top: 6px; }
  .hero-actions .btn--primary { min-height: 42px; }
  .hero-stage { margin-top: 12px; }
}
/* Reduced motion: nothing moves. The "Your business" card sits under the opening, already turned. */
#hero[data-reduced="true"] .hero-pin { height: auto; padding-bottom: 72px; }
#hero[data-reduced="true"] .answer-card { position: relative; left: auto; top: auto; margin: 210px auto 0; visibility: visible; }
#hero[data-reduced="true"] .ac-line { position: relative; margin-top: 18px; visibility: visible; }
@media (max-width: 819.98px) {
  #hero[data-reduced="true"] .hero-pin { padding-bottom: 48px; }
  #hero[data-reduced="true"] .answer-card { margin-top: 230px; }
}
@media (min-width: 820px) {
  #hero[data-reduced="true"] .hero-stage { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .a-place .hl, .a-photo { animation: none; }
  .caret, .mouse i, .shimmer, .ph.is-loading::before, .ph:not(.is-loaded)::before { animation: none; }
  .ph img { transition: none; }
  .shimmer { color: rgba(10, 10, 11, .55); background: none; }
  .pn-thread .rise, .chat-answer .rise, .cite.pop, .panel[data-phase="empty"] .pn-empty { animation: none; }
}