@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500&display=swap");

:root {
  --paper: #f9f9f7;
  --ink: #121316;
  --muted: #5b5f68;
  --line: #dcdcd6;
  --blue: #0559fd;
  --good: #0c9d58;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Geist, system-ui, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--paper);
  min-height: 100vh;
}

.stage {
  max-width: 1180px; margin: 0 auto; padding: 48px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center;
}
@media (max-width: 900px) { .stage { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.kicker { font: 500 12px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0; }
h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.035em; margin: 10px 0 16px; }
h1 em { font-style: normal; color: var(--blue); }
.lede { color: var(--muted); line-height: 1.6; margin: 0 0 18px; max-width: 520px; }
.facts { padding: 0; margin: 0 0 22px; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.facts li::before { content: "→ "; color: var(--blue); font-weight: 700; }

.replay {
  font: 600 15px Geist, sans-serif; padding: 12px 18px; cursor: pointer;
  background: var(--blue); color: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.replay:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.replay:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Device frame */
.device { background: #fff; border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); overflow: hidden; }
.bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #f1f1ed; border-bottom: 1px solid var(--line); }
.bar i { width: 11px; height: 11px; border-radius: 50%; background: #d4d4ce; }
.bar span { margin-left: 10px; flex: 1; font: 500 12px "Geist Mono", monospace; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 5px 12px; }

.screen { position: relative; height: 420px; padding: 22px; overflow: hidden; }

.search { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ink); border-radius: 24px; padding: 10px 16px; font-size: 15px; }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; flex: none; }
.caret { width: 2px; height: 18px; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.results { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.results li { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.results .ln { display: block; height: 10px; background: #ececE6; border-radius: 3px; width: 70%; }
.results .ln.s { width: 92%; margin-top: 7px; height: 8px; }
.results .ad .ln { background: #f3eedd; }
.hit { padding: 10px 12px; margin: 0 -12px; border-radius: 6px; transition: background .3s, opacity .35s, transform .35s; }
.hit .u { margin: 0; font-size: 12px; color: #4d5156; }
.hit .h { margin: 2px 0; font: 18px Arial, sans-serif; color: #1a0dab; }
.hit .sn { margin: 0; font-size: 13px; color: #4d5156; line-height: 1.45; }

.stage.s-results .results li { opacity: 1; transform: none; }
.stage.s-results .results li:nth-child(2) { transition-delay: .08s; }
.stage.s-results .results li:nth-child(3) { transition-delay: .16s; }
.stage.s-results .results li:nth-child(4) { transition-delay: .24s; }
.stage.s-hover .hit { background: #eef3ff; }

/* The business's own site slides over the results */
.site {
  position: absolute; inset: 0; background: var(--paper); padding: 22px;
  transform: translateX(100%); transition: transform .5s cubic-bezier(.7,0,.2,1);
}
.stage.s-site .site { transform: none; }
.nav { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nav b { width: 28px; height: 28px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; }
.nav span { width: 46px; height: 8px; background: #dcdcd6; border-radius: 3px; }
.nav em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; background: var(--ink); color: #fff; padding: 7px 10px; }
.site h2 { font-size: 30px; letter-spacing: -.03em; margin: 22px 0 16px; }
.mini { display: grid; gap: 10px; max-width: 360px; }
.mini label { font-size: 12px; font-weight: 600; display: grid; gap: 5px; }
.f { display: block; height: 38px; border: 1.5px solid var(--ink); background: #fff; padding: 9px 10px; font-size: 14px; font-weight: 400; }
.send { justify-self: start; margin-top: 4px; background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 16px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.stage.s-press .send { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Pointer */
.cursor {
  position: absolute; left: 70%; top: 85%; width: 22px; height: 22px; opacity: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-7 1.5L8.5 20z' fill='%23121316' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
  transition: left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1), opacity .3s;
}
.stage.s-results .cursor { opacity: 1; }
.stage.s-hover .cursor { left: 30%; top: 37%; }
.stage.s-site .cursor { left: 70%; top: 85%; }
.stage.s-press .cursor { left: 16%; top: 83%; }

.toast {
  position: absolute; right: 18px; bottom: 18px; display: grid; gap: 2px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--good);
  padding: 12px 16px 12px 40px; font-size: 13px; color: var(--muted);
  transform: translateY(140%); transition: transform .45s cubic-bezier(.3,1.5,.5,1);
}
.toast::before { content: "✓"; position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.toast b { color: var(--ink); font-size: 14px; }
.stage.s-toast .toast { transform: none; }

.foot { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.foot a { color: var(--blue); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}