/* ==========================================================================
   AFTER HOURS: SEO Blogs (prefix seo-)
   The scenes of this page only. Shared pieces come from css/theme.css.
   The signature: the AI answer that cites your blog (a cream answer naming
   "Your Pawn Shop" with a source chip pointing to yourshop.com/blog). It is in
   the hero phone, at the end of the feed belt, pinned on the counter story in
   the duel, on the booking notepad's questions, and in neon at the close.
   hero: the phone over the lit jewelry case answers the question, live
   how: the old meter box, unplugged, beside the blog page the beam reads
   feed: a plain AI app window reading your posts off the belt, then citing one
   slop: the term as the intro, the photocopier, the autocomplete sign
   human: the slop gets skipped; the AI answer cites the counter story
   system: one counter story's trip (pad, red-pen draft, published post, shelf)
   plans: two pawn tickets, each with a year of posts on its strip
   proof: three stories pinned on the back-office board
   book: the notepad of questions your town is asking AI
   final: the neon AI answer, lit with your shop's name
   ========================================================================== */

/* shared bits of this page ------------------------------------------------ */
/* Jeff asked for tighter vertical spacing between the sections of this page (seo.css note): a shorter band rhythm */
#how, #feed, #slop, #human, #system, #plans, #proof { --pad-y: clamp(64px, 7.5vw, 104px); }
/* the shop's name inside an AI answer: a Pawn-blue marker swipe under ink text */
.seo-hl {
  padding: 0 0.12em; border-radius: 2px; color: var(--ah-ink); font-weight: 800;
  background: linear-gradient(180deg, transparent 40%, rgba(27, 141, 246, 0.5) 40% 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* the AI's sparkle avatar (the page's mark) */
.seo-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ah-950); border-radius: 50%; background: #11151d; }
.seo-av svg { width: 74%; height: 74%; overflow: visible; filter: drop-shadow(0 0 2px rgba(255, 63, 134, 0.9)); }
.seo-av .ah-neon__tube { stroke-width: 3.2; }
.seo-av .ah-neon__core { stroke-width: 1.2; }
/* the source chip under an AI answer: which post on yourshop.com/blog it came from */
.seo-src {
  display: inline-grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.55em; align-items: center; justify-self: start;
  max-width: 100%; margin: 0; padding: 0.42em 0.8em 0.42em 0.42em; border: 2px solid var(--ah-950); border-radius: 0.7em;
  background-color: var(--ah-cream); color: var(--ah-ink); box-shadow: 2px 2px 0 var(--ah-blue); text-align: left;
}
.seo-src__n { grid-row: span 2; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--ah-ink); color: var(--ah-cream); font: 800 0.78em/1 var(--ah-mono); }
.seo-src__t { font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.seo-src__u { color: var(--ah-blue-ink); font: 700 0.8em/1.25 var(--ah-mono); }
@keyframes seo-blink { 50% { opacity: 0; } }
@keyframes seo-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes seo-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* --------------------------------------------------------------------------
   HERO: a phone stands on the lit jewelry case at closing time. The AI chat on
   its screen types the question and streams the answer, and the answer cites a
   post on yourshop.com/blog; the item the question is about lights up in the
   case. A small neon sparkle hangs on the bricks behind.
   -------------------------------------------------------------------------- */
.seo-hero .ah-phero__copy { position: relative; z-index: 2; }
.seo-hero__what { color: var(--ah-paper); }
.seo-stage { position: relative; width: min(100%, 520px); margin: 0 auto; padding-top: 12px; container-type: inline-size; }
/* the sparkle's light printed on the bricks (halftone, no blur) */
.seo-stage::before {
  content: ""; position: absolute; z-index: 0; right: -8%; top: -6%; width: 60%; height: 48%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 63, 134, 0.34) 1.4px, transparent 1.9px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
}
.seo-spark { position: absolute; z-index: 1; top: 2cqi; right: 2cqi; width: 25cqi; height: auto; overflow: visible; rotate: 8deg; filter: drop-shadow(0 0 5px rgba(255, 63, 134, 0.9)); }
.seo-spark .ah-neon__tube { stroke-width: 6; }
.seo-spark .ah-neon__core { stroke-width: 2.2; }
.seo-spark .seo-spark__sm { stroke-width: 4.5; }
.seo-spark .ah-neon__core.seo-spark__sm { stroke-width: 1.6; }
.seo-spark__clip { fill: none; stroke: #2a3142; stroke-width: 6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .seo-spark { animation: ah-ignite 1.2s 0.6s both; }
}

/* the phone: the kit frame, a dark AI app on its screen */
.seo-stage .seo-phone { --tilt: -1deg; z-index: 2; width: 54cqi; margin: 0 0 0 5cqi; }
.seo-phone .ah-phone__island { top: 14px; height: 20px; }
.seo-phone .ah-phone__screen {
  display: flex; flex-direction: column; aspect-ratio: 9 / 16.6; container-type: inline-size;
  background: radial-gradient(120% 60% at 50% 0, rgba(47, 155, 255, 0.18), transparent 60%), #0c1730; color: var(--ah-paper);
}
.seo-app__bar {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 1.8cqi; margin: 0; padding: 17cqi 4cqi 3.2cqi;
  border-bottom: 2px solid rgba(173, 229, 255, 0.14); color: var(--ah-paper); font: 800 5.2cqi/1 var(--ah-body); letter-spacing: 0.02em;
}
.seo-app__spark { flex: none; width: 5.6cqi; height: 5.6cqi; fill: var(--ah-neon-pink); filter: drop-shadow(0 0 3px rgba(255, 63, 134, 0.8)); }
/* the thread scrolls like a real chat: the last answer stays above while the next question types (the script scrolls it) */
.seo-app__thread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 3.6cqi; padding: 4.6cqi 4.2cqi 4cqi; overflow: hidden; }
.seo-msg { flex: none; display: flex; }
.seo-msg--user { justify-content: flex-end; }
.seo-msg--bot { justify-content: flex-start; align-items: flex-start; gap: 2.2cqi; }
.seo-msg__col { display: grid; gap: 2.4cqi; min-width: 0; max-width: calc(100% - 11.6cqi); }
.seo-bubble {
  max-width: 86%; margin: 0; padding: 3cqi 4cqi 2.8cqi; border: 2px solid var(--ah-950); border-radius: 6cqi;
  font: 700 5.9cqi/1.4 var(--ah-body); text-align: left; overflow-wrap: break-word;
}
.seo-msg--user .seo-bubble {
  min-height: calc(1.4em + 5.8cqi + 4px); border-bottom-right-radius: 1.6cqi;
  background-color: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  color: var(--ah-ink); box-shadow: 2px 2px 0 var(--ah-paper);
}
.seo-msg--bot .seo-bubble { max-width: 100%; border-bottom-left-radius: 1.6cqi; background-color: var(--ah-cream); color: var(--ah-ink); font-weight: 600; box-shadow: 2px 2px 0 var(--ah-blue); }
.seo-app .seo-av { width: 9.4cqi; height: 9.4cqi; }
.seo-app .seo-src { font-size: 4.5cqi; }
.seo-app .seo-src__u { font-size: 0.9em; }
.seo-app__input {
  flex: none; display: flex; align-items: center; justify-content: space-between; height: 10.6cqi; margin: 0 4.4cqi 5.6cqi; padding: 0 1.4cqi 0 4.4cqi;
  border: 2px solid rgba(173, 229, 255, 0.28); border-radius: 999px; background: rgba(4, 6, 11, 0.5);
}
.seo-app__input span { width: 46%; height: 2cqi; border-radius: 2cqi; background: rgba(173, 229, 255, 0.2); }
.seo-app__input i { position: relative; width: 7.4cqi; height: 7.4cqi; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.seo-app__input i::after {
  content: ""; position: absolute; inset: 18%; background: var(--ah-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V6M6 11.5l6-6 6 6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V6M6 11.5l6-6 6 6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the typing caret and the thinking dots (built by js/pages/seo-blogs.js; they only exist while the chat runs) */
.seo-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; }
.seo-typing { display: inline-flex; align-items: center; gap: 5px; padding: 0.3em 0; }
.seo-typing i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ah-ink-2); }
@media (prefers-reduced-motion: no-preference) {
  html.js .seo-caret { animation: seo-blink 1s steps(1) infinite; }
  html.js .seo-typing i { animation: seo-dot 1.2s ease-in-out infinite; }
  .seo-typing i:nth-child(2) { animation-delay: 0.18s; }
  .seo-typing i:nth-child(3) { animation-delay: 0.36s; }
  .seo-app .is-new { animation: seo-in 0.35s var(--ease-out) both; }
}

/* the caption, beside the answer: a cream note with a hand arrow to the source chip */
.seo-cap {
  position: absolute; z-index: 3; top: 43cqi; right: 0; width: 33cqi; margin: 0; padding: 12px 14px 11px;
  border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); font-size: 0.94rem; font-weight: 800; line-height: 1.35; box-shadow: 4px 4px 0 var(--ah-blue); rotate: 1deg; text-wrap: balance;
}
.seo-cap__arrow { position: absolute; left: -46px; bottom: -6px; width: 50px; height: 38px; overflow: visible; fill: none; stroke: var(--ah-sky); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the jewelry case the phone stands on: a glass top, a lit box, velvet, three items */
.seo-case { position: relative; z-index: 1; margin-top: -4.6cqi; }
.seo-case__top {
  position: relative; height: 5cqi; min-height: 14px; margin: 0 2.4cqi;
  border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #c9dcec, #7f98b2 55%, #5f7895); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55);
}
.seo-case__box {
  position: relative; height: 24cqi; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 3px;
  background: radial-gradient(80% 110% at 50% 0, rgba(255, 226, 170, 0.2), transparent 70%), linear-gradient(180deg, #142443, #0b1528 70%);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 4px #5d6a7d, inset 0 0 0 6px var(--ah-950);
}
/* the velvet floor */
.seo-case__box::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 8cqi; border-top: 2px solid var(--ah-950); background-color: #1d2c5c; background-image: var(--ah-grain); }
/* reflections on the front glass */
.seo-case__box::after { content: ""; position: absolute; z-index: 3; inset: 6px; pointer-events: none; background: linear-gradient(118deg, transparent 0 14%, rgba(200, 230, 255, 0.1) 14% 22%, transparent 22% 25%, rgba(200, 230, 255, 0.07) 25% 27%, transparent 27%); }
.seo-case__led { position: absolute; z-index: 2; left: 6px; right: 6px; top: 6px; height: 1.6cqi; min-height: 5px; background: repeating-linear-gradient(90deg, #fff1c8 0 4px, #f2c46a 4px 8px); box-shadow: 0 1px 0 var(--ah-950); }
.seo-case__items { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 3cqi; display: flex; align-items: flex-end; justify-content: space-between; }
.seo-slot { position: relative; display: grid; place-items: end center; width: 19cqi; }
.seo-item { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; filter: brightness(0.55) saturate(0.6); transition: filter 0.45s ease, translate 0.45s var(--ease-back); }
/* the spotlight from the case light, and its pool on the velvet (halftone, no blur) */
.seo-slot::before {
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: 40%; width: 150%; height: 14cqi; translate: -50% 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 231, 176, 0.55) 1.1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(180deg, rgba(255, 236, 190, 0.3), rgba(255, 236, 190, 0.06));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity 0.45s ease;
}
.seo-slot::after {
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: -1.6cqi; width: 120%; height: 4.4cqi; translate: -50% 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 231, 176, 0.55) 1px, transparent 1.4px) 0 0 / 5px 5px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
  opacity: 0; transition: opacity 0.45s ease;
}
.seo-stage[data-item="bag"] .seo-slot--bag .seo-item,
.seo-stage[data-item="gold"] .seo-slot--gold .seo-item,
.seo-stage[data-item="watch"] .seo-slot--watch .seo-item { filter: none; translate: 0 -0.6cqi; }
.seo-stage[data-item="bag"] .seo-slot--bag::before, .seo-stage[data-item="bag"] .seo-slot--bag::after,
.seo-stage[data-item="gold"] .seo-slot--gold::before, .seo-stage[data-item="gold"] .seo-slot--gold::after,
.seo-stage[data-item="watch"] .seo-slot--watch::before, .seo-stage[data-item="watch"] .seo-slot--watch::after { opacity: 1; }
/* the items: ink outlines, flat fills, real object colors (gold only on the small chain and clasp) */
.seo-item :where(path, rect, circle) { stroke: var(--ah-950); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.seo-bag__strap { fill: none; stroke-width: 7; }
.seo-bag__strap-hi { fill: none; stroke: #c98a4f; stroke-width: 3; }
.seo-bag__body { fill: #b8743c; }
.seo-bag__flap { fill: #8f5527; }
.seo-bag__clasp { fill: var(--ah-gold); }
.seo-bag__stitch { fill: none; stroke: #e2b07a; stroke-width: 1.4; stroke-dasharray: 3 3; }
.seo-chain__ink { fill: none; stroke-width: 9; }
.seo-chain__link { fill: none; stroke: var(--ah-brass); stroke-width: 5.5; stroke-dasharray: 5 2.4; stroke-linecap: butt; }
.seo-chain__hi { fill: none; stroke: var(--ah-brass-hi); stroke-width: 1.6; stroke-dasharray: 2 5.4; }
.seo-chain__pend { fill: var(--ah-gold); }
.seo-chain__pend-hi { fill: #fff4cf; stroke: none; }
.seo-watch__band { fill: #9aa7b8; }
.seo-watch__links { fill: none; stroke: #5d6a7d; stroke-width: 1.6; }
.seo-watch__crown { fill: #cfd7e1; }
.seo-watch__case { fill: #e3e9f0; stroke-width: 3; }
.seo-watch__dial { fill: #13213d; }
.seo-watch__hands { fill: none; stroke: #e3e9f0; stroke-width: 2.4; }
.seo-watch__pin { fill: var(--ah-gold); stroke: none; }
.seo-case__base { height: 4cqi; min-height: 12px; margin: 0 1.2cqi; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.18), transparent 3px), linear-gradient(180deg, #6a4428, #3a2414); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.5); }

/* the pause button under the case */
.seo-stage__foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; margin-top: 16px; min-height: 0; }
/* a narrow stage (phones): a compact phone over the case, so the answer and its source fit the first screen;
   the caption drops under the case (it follows the case in the HTML: a container query cannot restyle .seo-stage
   itself, so the stage stays a plain block and the source order does the work) */
@container (max-width: 470px) {
  .seo-stage .seo-phone { width: 80cqi; margin-left: 2cqi; }
  .seo-phone .ah-phone__screen { aspect-ratio: 9 / 13.6; }
  .seo-phone .ah-phone__island { top: 10px; height: 17px; }
  .seo-app__bar { padding-top: 12cqi; padding-bottom: 2.6cqi; font-size: 4.8cqi; }
  .seo-app__thread { gap: 2.6cqi; padding: 3cqi 3.8cqi 3cqi; }
  .seo-bubble { padding: 2.6cqi 3.6cqi 2.4cqi; font-size: 5.5cqi; line-height: 1.36; }
  .seo-app .seo-src { font-size: 4.3cqi; }
  .seo-app__input { height: 9.6cqi; margin-bottom: 4.4cqi; }
  .seo-spark { top: 1cqi; right: 0; width: 21cqi; rotate: 12deg; }
  .seo-case { margin-top: -4cqi; }
  .seo-cap { position: relative; top: auto; right: auto; width: auto; max-width: 400px; margin: 22px auto 0; text-align: center; rotate: -1deg; }
  .seo-cap__arrow { display: none; }
  .seo-stage__foot { justify-content: center; }
  .seo-case__items { left: 6%; right: 6%; }
  .seo-slot { width: 21cqi; }
}
/* phones: the first screen shows the headline, the one line that says what we do, the Apply button and the top
   of the phone with its answer (a page-scoped stand-in for the kit's planned phone hero order: the rest of the
   lead, the second button and the note move under the phone) */
@media (max-width: 767px) {
  .seo-hero .ah-phero__grid { gap: 0; }
  .seo-hero .ah-phero__copy, .seo-hero .seo-hero__actions { display: contents; }
  .seo-hero .ah-crumbs { order: 1; }
  .seo-hero .seo-hero__kicker { order: 2; }
  .seo-hero .seo-hero__h { order: 3; }
  .seo-hero .seo-hero__what { order: 4; margin-bottom: 14px; }
  .seo-hero .seo-hero__apply { order: 5; justify-self: start; }
  .seo-hero .seo-hero__object { order: 6; margin-top: 10px; }
  .seo-hero .seo-hero__lead { order: 7; }
  .seo-hero .seo-hero__what + .seo-hero__lead { margin-top: 30px; }
  .seo-hero .seo-hero__ghost { order: 8; justify-self: start; margin-top: -8px; }
  .seo-hero .seo-hero__note { order: 9; }
}

/* --------------------------------------------------------------------------
   HOW: on the shelf, the old meter box Google read is dusty and unplugged
   (its needles drop to zero); beside it, the beam reads a real blog page and
   lights the parts AI keeps: the shop's name and the counter details.
   -------------------------------------------------------------------------- */
.seo-shift { --deco-at: 100% 0; --deco-size: 42% 50%; }
.seo-shelf { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 1000px; margin: 0 auto; }
.seo-shelf__board { display: none; }
@media (min-width: 800px) {
  .seo-shelf { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 60px); align-items: end; padding-bottom: 24px; }
  .seo-shelf__board {
    display: block; position: absolute; z-index: 0; left: -3%; right: -3%; bottom: 0; height: 24px;
    border: 2px solid var(--ah-950); border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 13px), linear-gradient(180deg, #6a4428, #3a2414);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5);
  }
}
.seo-meter, .seo-read { position: relative; z-index: 1; }

/* the meter box: brushed steel gone dull, three analog dials, a dead pilot lamp, the plug pulled */
.seo-meter {
  padding: 18px 18px 20px; border: 2px solid var(--ah-950); border-radius: 12px; color: var(--ah-fog);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px), linear-gradient(180deg, #566275, #3c4658 55%, #313a4a);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* dust */
.seo-meter::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .76 0 0 0 0 .66 0 0 0 9 -6.4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23t)'/%3E%3C/svg%3E");
}
.seo-meter__screw { position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(35deg, transparent 43%, var(--ah-950) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, #c9d1dc, #6f7c90); box-shadow: 0 0 0 1.5px var(--ah-950); }
.seo-meter__screw--a { left: 8px; } .seo-meter__screw--b { right: 8px; }
.seo-meter__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.seo-meter__head { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 11px 5px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: var(--ah-fog); font: 700 0.76rem/1.25 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.seo-meter__head svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ah-mute); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.seo-meter__lamp { flex: none; width: 16px; height: 16px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6a2a2a, #3a1212); }
.seo-meter__dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 10px 10px; border: 2px solid var(--ah-950); border-radius: 8px; background: #1c2230; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5); }
.seo-dial { display: grid; justify-items: center; gap: 6px; text-align: center; }
.seo-dial__svg { display: block; width: 100%; height: auto; overflow: visible; filter: saturate(0.5); }
.seo-dial__face { fill: #cfc7b1; stroke: var(--ah-950); stroke-width: 2.5; stroke-linejoin: round; }
.seo-dial__red { fill: none; stroke: #b4523f; stroke-width: 5; }
.seo-dial__ticks { fill: none; stroke: #3a4150; stroke-width: 2; stroke-linecap: round; }
.seo-dial__needle { transform-box: view-box; transform-origin: 50px 56px; rotate: -84deg; }
.seo-dial__needle path { fill: none; stroke: #23293a; stroke-width: 3; stroke-linecap: round; }
.seo-dial__pin { fill: #3a4150; stroke: var(--ah-950); stroke-width: 2; }
.seo-dial__name { color: var(--ah-fog); font: 700 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.05em; text-transform: uppercase; }
/* the verdict, handwritten on masking tape */
.seo-meter__foot {
  display: inline-block; margin-top: 16px; padding: 7px 16px 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.95);
  color: var(--ah-ink); font: 400 1.05rem/1.3 var(--ah-hand);
  clip-path: polygon(2% 0, 98% 5%, 100% 50%, 97% 100%, 1% 95%, 0 50%); rotate: -1.5deg;
}
/* the pulled plug: the cord leaves the box and the plug lies on the shelf */
.seo-meter__cord { position: absolute; z-index: -1; right: -52px; bottom: -2px; width: 84px; height: auto; overflow: visible; }
@media (max-width: 799px) { .seo-meter__cord { display: none; } }
.seo-cord__ink { fill: none; stroke: var(--ah-950); stroke-width: 6; stroke-linecap: round; }
.seo-cord__hi { fill: none; stroke: #2a3142; stroke-width: 2.4; stroke-linecap: round; }
.seo-plug { fill: #2a3142; stroke: var(--ah-950); stroke-width: 2.4; stroke-linejoin: round; }
.seo-plug__pins { fill: none; stroke: #c9d1dc; stroke-width: 3; stroke-linecap: round; }

/* the page and the flashlight that reads it */
.seo-read { padding-left: 19%; }
.seo-torch { position: absolute; z-index: 3; left: 0; top: 50%; width: 24%; height: auto; overflow: visible; translate: 0 -50%; transform-origin: 6% 50%; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5)); }
.seo-torch__beam { fill: rgba(255, 236, 190, 0.5); }
.seo-torch__tail { fill: #5d6a7d; stroke: var(--ah-950); stroke-width: 2.4; }
.seo-torch__body { fill: #2a3142; stroke: var(--ah-950); stroke-width: 2.6; }
.seo-torch__grip { fill: none; stroke: #46526e; stroke-width: 2; }
.seo-torch__btn { fill: var(--ah-neon-pink); stroke: var(--ah-950); stroke-width: 2; }
.seo-torch__head { fill: #9aa7b8; stroke: var(--ah-950); stroke-width: 2.6; stroke-linejoin: round; }
.seo-torch__lens { fill: #fff5d8; stroke: var(--ah-950); stroke-width: 2.4; }
.seo-page {
  position: relative; padding: 18px clamp(16px, 2.4vw, 24px) 16px; border: 2px solid var(--ah-950); border-radius: 6px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: 0.6deg;
}
.seo-page__head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ah-blue-ink); font: 800 0.78rem/1.25 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.seo-page__head svg { flex: none; width: 16px; height: 16px; fill: var(--ah-blue-ink); }
/* the blog post itself, printed from yourshop.com/blog */
.seo-post { position: relative; overflow: hidden; margin: 0 -6px; padding: 12px 14px 14px; border: 1.5px solid rgba(11, 20, 36, 0.22); border-radius: 4px; background: #fffdf6; }
.seo-post__url { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(11, 20, 36, 0.14); color: var(--ah-ink-2); font: 700 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.02em; }
.seo-post__h { color: var(--ah-ink); font: 900 clamp(1.3rem, 1.05rem + 0.8vw, 1.6rem)/1.02 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.seo-post__by { margin-top: 6px; color: var(--ah-ink-2); font-size: 0.86rem; font-weight: 700; }
.seo-post__txt { margin-top: 10px; color: var(--ah-ink); font-size: 1rem; font-weight: 600; line-height: 1.55; }
/* what AI keeps: the same Pawn-blue marker the shop's name wears in every AI answer on this page */
.seo-lit {
  padding: 0 0.08em; color: inherit; font-weight: 800;
  background: linear-gradient(180deg, transparent 50%, rgba(27, 141, 246, 0.42) 50% 94%, transparent 94%) 0 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* the beam: a warm band that sweeps the page (on play), then fades out */
.seo-post__shade { position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(255, 222, 150, 0.42) 30% 70%, transparent); }
.seo-page__foot { margin-top: 10px; padding-top: 10px; border-top: 2px dashed rgba(11, 20, 36, 0.25); color: var(--ah-blue-ink); font-weight: 800; font-size: 1.02rem; }
@media (prefers-reduced-motion: no-preference) {
  /* armed: the needles still read high and the pilot lamp is lit; on play they drop and it dies (finite) */
  html.motion .seo-shelf:not(.is-play) .seo-dial__needle { rotate: 52deg; }
  html.motion .seo-shelf:not(.is-play) .seo-meter__lamp { background: radial-gradient(circle at 35% 35%, #ff9a8a, #e0322a); box-shadow: 0 0 8px 2px rgba(255, 80, 80, 0.7); }
  .seo-dial__needle { transition: rotate 1.5s var(--ease-back) 0.5s; }
  .seo-dial--2 .seo-dial__needle { transition-delay: 0.8s; }
  .seo-dial--3 .seo-dial__needle { transition-delay: 1.1s; }
  .seo-meter__lamp { transition: background 0.15s 2s, box-shadow 0.15s 2s; }
  /* the beam sweeps the post twice and the marker lights each detail as it passes (under 5s) */
  html.motion .seo-shelf:not(.is-play) .seo-lit { background-size: 0 100%; }
  .seo-lit { transition: background-size 0.5s var(--ease-out); }
  .seo-lit--1 { transition-delay: 1.1s; } .seo-lit--2 { transition-delay: 1.6s; } .seo-lit--3 { transition-delay: 1.9s; } .seo-lit--4 { transition-delay: 2.2s; }
  .seo-shelf.is-play .seo-post__shade { animation: seo-scan 1.6s ease-in-out 0.8s 2; }
  .seo-shelf.is-play .seo-torch { animation: seo-aim 1.6s ease-in-out 0.8s 2; }
}
@keyframes seo-scan { 0% { opacity: 0; transform: translateY(-40%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(260%); } }
@keyframes seo-aim { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }
@media (max-width: 799px) {
  .seo-meter { max-width: 460px; width: 100%; margin: 0 auto; }
  .seo-read { max-width: 500px; width: 100%; margin: 0 auto; }
}
@media (max-width: 420px) {
  .seo-meter { padding: 16px 12px 18px; }
  .seo-meter__dials { gap: 6px; padding: 10px 6px 8px; }
  .seo-dial__name { font-size: 0.66rem; letter-spacing: 0.02em; }
  .seo-read { padding-left: 15%; }
  .seo-post { padding: 10px 11px 12px; }
}

/* --------------------------------------------------------------------------
   FEED: a plain AI app window. The AI reads your blog posts as they ride the
   belt (Jeff's loved sliding belt, cream pages on a rubber belt), then answers
   and cites the post it used, with the same source chip as the hero.
   -------------------------------------------------------------------------- */
.seo-feed__h { font-size: clamp(2.2rem, 1.3rem + 2vw, 3.1rem); }
.seo-feed__split { align-items: center; }
.seo-win { position: relative; width: min(100%, 600px); margin: 0 auto; border: 2px solid var(--ah-950); border-radius: 14px; background: #0b1528; box-shadow: 8px 8px 0 var(--ah-blue); }
.seo-win > .ah-sample { top: -14px; right: 18px; }
.seo-win__bar {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-bottom: 2px solid var(--ah-950); border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #2d3647, #1a202c); color: var(--ah-fog); font: 700 0.86rem/1.2 var(--ah-body);
}
.seo-win__dots { display: flex; gap: 6px; margin-right: 6px; }
.seo-win__dots i { width: 11px; height: 11px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.seo-win__dots i:nth-child(2) { background: var(--ah-gold); } .seo-win__dots i:nth-child(3) { background: var(--ah-sky); }
.seo-win__spark { flex: none; width: 15px; height: 15px; fill: var(--ah-neon-pink); filter: drop-shadow(0 0 3px rgba(255, 63, 134, 0.8)); }
.seo-win__screen { display: flex; flex-direction: column; gap: 14px; padding: 18px clamp(12px, 2vw, 18px) 14px; background: radial-gradient(120% 80% at 50% 0, rgba(47, 155, 255, 0.14), transparent 60%); }
.seo-win__msg { max-width: 86%; margin: 0; padding: 11px 15px 10px; border: 2px solid var(--ah-950); border-radius: 18px; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.seo-win__msg--user { align-self: flex-end; border-bottom-right-radius: 6px; background-color: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-paper); }
.seo-win__answer { align-self: flex-start; display: grid; gap: 9px; max-width: 88%; }
.seo-win__answer .seo-win__msg { max-width: 100%; }
.seo-win__msg--bot { border-bottom-left-radius: 6px; background: var(--ah-cream); color: var(--ah-ink); font-weight: 600; box-shadow: 3px 3px 0 var(--ah-blue); }
.seo-win__answer .seo-src { font-size: 0.86rem; }
.seo-tool { align-self: stretch; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 12px; background: #0e1a30; box-shadow: inset 0 0 0 1px rgba(173, 229, 255, 0.12); }
.seo-tool__head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-bottom: 2px dashed rgba(173, 229, 255, 0.16); color: var(--ah-sky); font: 700 0.78rem/1.3 var(--ah-mono); overflow-wrap: anywhere; }
.seo-tool__head svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--ah-neon-pink); stroke-width: 2.6; stroke-linecap: round; }
.seo-belt { position: relative; height: 128px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.seo-belt__track { position: absolute; left: 0; top: 14px; display: flex; align-items: flex-end; width: max-content; height: 86px; }
.seo-doc {
  position: relative; flex: none; width: 150px; min-height: 84px; margin-right: 14px; padding: 10px 11px 9px;
  border: 2px solid var(--ah-950); border-radius: 3px 12px 3px 3px;
  background-color: var(--ah-cream); background-image: linear-gradient(var(--ah-blue), var(--ah-blue)), var(--ah-fiber); background-size: 100% 4px, auto; background-repeat: no-repeat, repeat;
  color: var(--ah-ink); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.seo-doc:nth-child(odd) { rotate: -0.8deg; }
.seo-doc:nth-child(even) { rotate: 0.7deg; }
.seo-doc b { display: block; font-size: 0.8rem; font-weight: 800; line-height: 1.25; }
.seo-doc span { display: block; margin-top: 5px; color: var(--ah-blue-ink); font: 700 0.64rem/1.2 var(--ah-mono); }
/* the rubber belt the pages ride */
.seo-belt__band { position: absolute; left: 0; right: 0; bottom: 12px; height: 18px; overflow: hidden; border-block: 2px solid var(--ah-950); background: #161b26; }
.seo-belt__band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -14px; background: repeating-linear-gradient(90deg, #2c3446 0 6px, #161b26 6px 14px); }
@media (prefers-reduced-motion: no-preference) {
  html.js .seo-belt__track { animation: seo-belt 16s linear infinite; }
  html.js .seo-belt__band::before { animation: seo-ridges 0.34s linear infinite; }
  html.js .seo-tool__head svg { animation: seo-pulse 1.6s ease-in-out infinite; }
}
@keyframes seo-belt { to { transform: translateX(-50%); } }
@keyframes seo-ridges { to { transform: translateX(-14px); } }
@keyframes seo-pulse { 50% { opacity: 0.35; } }
.seo-win__foot { display: flex; align-items: center; gap: 12px; padding: 4px clamp(12px, 2vw, 18px) 16px; }
.seo-win__input { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 5px 0 16px; border: 2px solid rgba(173, 229, 255, 0.28); border-radius: 999px; background: rgba(4, 6, 11, 0.5); }
.seo-win__input span { width: 42%; height: 7px; border-radius: 7px; background: rgba(173, 229, 255, 0.2); }
.seo-win__input i { width: 28px; height: 28px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
/* the hand note sits in the empty right end of the "Reading yourshop.com/blog" row and points down at the posts on
   the belt (above the window it pointed at the title bar, which read as "AI Assistant = your blog posts") */
.seo-feed__hand { position: absolute; right: 26px; top: 122px; z-index: 4; font-size: 1.12rem; rotate: -3deg; }
.seo-feed__hand .ah-hand__arrow { order: 0; width: 38px; height: 32px; scale: -1 1; translate: 2px 12px; }
@media (max-width: 1099px) { .seo-feed__hand { display: none; } }
@media (max-width: 420px) {
  .seo-win__msg { max-width: 92%; font-size: 0.98rem; }
  .seo-win__answer { max-width: 96%; }
  .seo-doc { width: 136px; }
}

/* --------------------------------------------------------------------------
   SLOP: the term is the intro (no card), then the photocopier: each pass comes
   out blurrier and more speckled (Jeff's photocopier: no crooked rotation).
   Then the autocomplete sign: black glass, lit letters, the last word only
   half typed, the rest a gray suggestion.
   -------------------------------------------------------------------------- */
.seo-slop__head { max-width: 760px; }
.seo-slop__term { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; margin: -2px 0 12px; }
.seo-slop__term b { color: var(--ah-paper); font: 900 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.1 var(--ah-display); letter-spacing: 0.03em; text-decoration: underline wavy var(--ah-hot) 2px; text-underline-offset: 7px; }
.seo-slop__term span { color: var(--ah-mute); font-size: 1.02rem; font-style: italic; font-weight: 600; }
.seo-copier { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.seo-copier__lid {
  position: relative; z-index: 2; height: 64px; border: 2px solid var(--ah-950); border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, #edf1f6, #b9c3d0 55%, #8996a8); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* the output slot the copies come out of */
.seo-copier__lid::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 8px; border-radius: 4px; background: var(--ah-950); }
.seo-copier__glass { position: absolute; left: 16px; right: 112px; top: 12px; height: 20px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, #0b1528, #1a2d52); }
/* the scan light inside the glass */
.seo-copier__glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 4%, rgba(143, 214, 255, 0.35) 5%, #c9ecff 6% 8%, rgba(143, 214, 255, 0.35) 9%, transparent 10%); }
.seo-copier__keys { position: absolute; right: 14px; top: 12px; display: flex; gap: 8px; }
.seo-copier__keys i { width: 22px; height: 20px; border: 2px solid var(--ah-950); border-radius: 4px; background: #d6dde6; box-shadow: 0 2px 0 var(--ah-950); }
.seo-copier__keys i:last-child { background: var(--ah-blue); }
.seo-copier__tray { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: -11px; padding: 0 14px; }
.seo-sheet { position: relative; padding: 16px 20px; border: 2px solid var(--ah-950); border-radius: 0 0 4px 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); }
.seo-sheet--1 { padding-top: 24px; }
.seo-sheet__gen { margin-bottom: 8px; color: var(--ah-blue-ink); font: 800 0.7rem/1.4 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.seo-sheet__txt { position: relative; z-index: 1; color: var(--ah-ink); font-size: 1.08rem; font-weight: 600; line-height: 1.55; }
.seo-sheet--2 { margin-left: 3%; background-color: #e2dccd; }
.seo-sheet--3 { margin-left: 6%; background-color: #d3cec2; }
.seo-sheet--2 .seo-sheet__gen, .seo-sheet--3 .seo-sheet__gen { color: #4b5873; }
.seo-sheet--2 .seo-sheet__txt { color: #26304a; filter: blur(0.35px) contrast(0.92); }
.seo-sheet--3 .seo-sheet__txt { color: #2e3a52; filter: blur(0.8px) grayscale(0.6); }
/* toner speckle, heavier each pass, and a streak on the last one */
.seo-sheet--2::after, .seo-sheet--3::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .08 0 0 0 0 .14 0 0 0 9 -6.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23t)'/%3E%3C/svg%3E");
}
.seo-sheet--3::after { opacity: 1; background-size: 84px 84px; }
.seo-sheet--3::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 64%; width: 3px; background: rgba(11, 20, 36, 0.16); pointer-events: none; }
.seo-copier__cap { margin-top: 22px; padding: 0 14px; text-align: center; color: var(--ah-fog); font-size: 1rem; font-weight: 700; }
.seo-copier__cap p + p { margin-top: 2px; color: var(--ah-sky); }
@media (prefers-reduced-motion: no-preference) {
  /* the copies slide out of the slot one after another; the scan light passes three times */
  html.motion .seo-sheet { clip-path: inset(-4px -14px -14px -4px); transition: clip-path 0.7s var(--ease-out) 0.3s; }
  html.motion .seo-copier:not(.is-play) .seo-sheet { clip-path: inset(-4px -14px 100% -4px); }
  html.motion .seo-sheet--2 { transition-delay: 0.9s; }
  html.motion .seo-sheet--3 { transition-delay: 1.5s; }
  .seo-copier.is-play .seo-copier__glass::after { animation: seo-copyscan 1s ease-in-out 3; }
}
@keyframes seo-copyscan { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(86%); } }

.seo-auto { max-width: 920px; margin: clamp(60px, 7vw, 100px) auto 0; text-align: center; }
.seo-auto__sign {
  position: relative; display: inline-block; max-width: 100%; padding: 12px 16px; border: 2px solid var(--ah-950); border-radius: 14px;
  background: linear-gradient(180deg, #3a4456 0, #252d3c 18%, #1a202c 82%, #2c3546 100%);
  box-shadow: 0 7px 0 var(--ah-blue), 0 9px 0 var(--ah-950); rotate: -1deg;
}
.seo-auto__sign::before, .seo-auto__sign::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9d1dc, #5d6a7d); box-shadow: 0 0 0 1.5px var(--ah-950); }
.seo-auto__sign::before { left: 3px; } .seo-auto__sign::after { right: 3px; }
.seo-auto__glass { position: relative; padding: clamp(14px, 2.4vw, 22px) clamp(14px, 3vw, 32px); border-radius: 6px; background: #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.seo-auto__glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, #141d30 1px, transparent 1.4px) 0 0 / 3px 3px; }
.seo-auto__h {
  position: relative; margin: 0; color: #c9ecff; font: 800 clamp(1.55rem, 1rem + 2.4vw, 3rem)/1.08 var(--ah-display);
  letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff; text-wrap: balance;
}
.seo-auto__caret { display: inline-block; width: 0.09em; height: 0.92em; margin: 0 0.02em 0 0.04em; vertical-align: -0.08em; background: #c9ecff; box-shadow: 0 0 6px rgba(47, 155, 255, 0.9); }
.seo-auto__word { white-space: nowrap; }
.seo-auto__ghost { color: #5f7f9e; text-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .seo-auto.is-play .seo-auto__caret { animation: seo-blink 1s steps(1) 4; } }
.seo-auto__body { max-width: 38em; margin: 36px auto 0; }
.seo-auto__body p { color: var(--ah-fog); font-size: 1.12rem; }
.seo-auto__body p + p { margin-top: 10px; }
.seo-auto__body strong { color: var(--ah-paper); }
@media (max-width: 420px) { .seo-auto__sign { padding: 10px 12px; } .seo-sheet { padding-inline: 16px; } }

/* --------------------------------------------------------------------------
   HUMAN: the AI slop is a cold gray printout, skipped; the counter story is a
   ruled page from the counter notebook, and the AI answer above it quotes it,
   with a numbered source tab pinned to the page. Then the honesty line.
   -------------------------------------------------------------------------- */
.seo-human__head { max-width: 840px; }
.seo-duel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 980px) { .seo-duel { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: end; } }
.seo-spec { position: relative; border: 2px solid var(--ah-950); border-radius: 4px; color: var(--ah-ink); }
.seo-spec__head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 16px 10px; border-bottom: 2px dashed rgba(11, 20, 36, 0.28); font: 800 0.78rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.seo-spec__head svg, .seo-spec__tag svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.seo-spec__q { margin: 0; padding: 16px 18px; font-size: 1.04rem; font-style: italic; font-weight: 600; line-height: 1.6; }
/* each quote is split at its sentence break, so neither reads as a brick wall on a phone */
.seo-spec__q p + p { margin-top: 6px; }
@media (max-width: 420px) { .seo-spec__q { padding: 14px 12px; } }
.seo-spec__tag { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 11px 16px 13px; border-top: 2px dashed rgba(11, 20, 36, 0.28); font-size: 0.95rem; font-weight: 800; line-height: 1.35; }
.seo-spec__tag svg { margin-top: 1px; }
/* the slop: gray tractor-feed paper with sprocket holes, a little crooked, greyed out */
.seo-spec--slop {
  width: 100%; max-width: 470px; margin: 0 auto; padding: 0 24px; color: #2b3346;
  background-color: #bec1c8;
  background-image:
    radial-gradient(circle at 10px 50%, #0b1020 0 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 10px) 50%, #0b1020 0 3.5px, transparent 4px),
    linear-gradient(90deg, transparent 21px, rgba(11, 20, 36, 0.28) 21px 22px, transparent 22px calc(100% - 22px), rgba(11, 20, 36, 0.28) calc(100% - 22px) calc(100% - 21px), transparent calc(100% - 21px)),
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.06) 23px 24px);
  background-size: 100% 22px, 100% 22px, auto, auto; background-repeat: repeat-y, repeat-y, no-repeat, repeat;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); rotate: -0.8deg;
}
.seo-spec--slop .seo-spec__head { color: #3e4a63; }
.seo-spec--slop .seo-spec__tag { color: #8a1c12; }
/* the faint "skipped" strike across the slop */
.seo-skip { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(162deg, transparent calc(50% - 1.5px), rgba(180, 35, 24, 0.32) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.seo-skip__stamp { position: absolute; right: 30px; top: 4px; background: #bec1c8; }
/* the counter story with the AI answer above it */
.seo-cite { position: relative; display: grid; justify-items: end; width: 100%; max-width: 580px; margin: 0 auto; }
.seo-ans {
  position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 10px; max-width: 440px; margin-right: 6%; padding: 12px 16px 12px 12px;
  border: 2px solid var(--ah-950); border-radius: 18px 18px 18px 6px; background-color: var(--ah-cream); color: var(--ah-ink); box-shadow: 4px 4px 0 var(--ah-blue);
}
.seo-ans > .ah-sample { top: -14px; }
.seo-ans__txt { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.45; }
.seo-ans__ref { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-left: 5px; border-radius: 50%; background: var(--ah-ink); color: var(--ah-cream); font: 800 0.72rem/1 var(--ah-mono); vertical-align: 0.12em; }
.seo-cite__link { justify-self: end; width: 40px; height: 46px; margin: -2px 15% -4px 0; overflow: visible; fill: none; stroke: var(--ah-sky); stroke-width: 2.6; stroke-dasharray: 5 6; stroke-linecap: round; }
/* the counter story: a ruled page from the counter notebook, red margin, a numbered source tab */
.seo-spec--human {
  width: 100%; padding-left: 22px; background-color: #fbf7ec; color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: 0.6deg;
  background-image: linear-gradient(90deg, transparent 0 16px, rgba(180, 35, 24, 0.45) 16px 18px, transparent 18px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(21, 101, 192, 0.13) 25px 26px);
}
.seo-spec--human .seo-spec__head, .seo-spec--human .seo-spec__tag { color: var(--ah-blue-ink); }
.seo-spec__ref { position: absolute; top: -26px; right: 14%; display: grid; place-items: center; width: 36px; height: 26px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--ah-blue); color: var(--ah-ink); font: 900 1.05rem/1 var(--ah-display); }
@media (prefers-reduced-motion: no-preference) {
  /* armed: the answer and its link wait; on play the answer pops in, the link draws, the slop gets its stamp */
  html.motion .seo-duel:not(.is-play) .seo-ans { opacity: 0; transform: translateY(12px) scale(0.94); }
  html.motion .seo-duel:not(.is-play) .seo-cite__link { stroke-dashoffset: 60; opacity: 0; }
  html.motion .seo-duel:not(.is-play) .seo-skip__stamp { opacity: 0; transform: scale(1.8); }
  .seo-ans { transition: opacity 0.3s 0.5s, transform 0.5s var(--ease-back) 0.5s; }
  .seo-cite__link { transition: stroke-dashoffset 0.6s 0.9s, opacity 0.2s 0.9s; }
  .seo-skip__stamp { transition: opacity 0.2s 1.3s, transform 0.4s var(--ease-back) 1.3s; }
}
.seo-honest { display: grid; justify-items: center; gap: 26px; max-width: 780px; margin: clamp(56px, 6vw, 84px) auto 0; text-align: center; }
.seo-honest__line { color: var(--ah-paper); font: 900 clamp(1.45rem, 1rem + 1.5vw, 2.15rem)/1.1 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.04em 0.04em 0 var(--ah-950); text-wrap: balance; }
.seo-honest__note { --tilt: 1deg; max-width: 520px; }
.seo-honest__note p { font-size: 1.15rem; text-align: center; }

/* --------------------------------------------------------------------------
   SYSTEM: one counter story's trip. The owner's note on the counter pad, the
   writer's typed draft with red-pen marks, the published post under the
   crawler's beam, then the shelf of monthly binders. Stops sit on a winding
   route on desktop, stack on phones.
   -------------------------------------------------------------------------- */
.seo-trip { position: relative; max-width: 1160px; margin: 0 auto; }
.seo-trip__route { display: none; }
.seo-trip__list { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 54px; margin: 0; padding: 0; list-style: none; }
.seo-stop { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.seo-stop__art { grid-column: 1 / -1; position: relative; display: grid; place-items: center; height: 168px; margin-bottom: 18px; }
.seo-stop__n {
  grid-column: 1; grid-row: 2; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -4px;
  border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-ink); color: var(--ah-sky); font: 900 1.15rem/1 var(--ah-display); letter-spacing: 0.04em; box-shadow: 3px 3px 0 var(--ah-blue);
}
.seo-stop__h { grid-column: 2; grid-row: 2; align-self: center; color: var(--ah-paper); font: 900 clamp(1.3rem, 1.12rem + 0.6vw, 1.55rem)/1.04 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
/* the text runs the full width under the number and heading (a narrow column under the number made 4 and 5 line paragraphs) */
.seo-stop__p { grid-column: 1 / -1; margin-top: 10px; color: var(--ah-fog); font-size: 1.02rem; }
.seo-stop__p + .seo-stop__p { margin-top: 6px; }
/* phones: a dashed thread runs down between the stops */
.seo-stop:not(:last-child)::after { content: ""; position: absolute; left: 21px; bottom: -46px; height: 38px; border-left: 2.5px dashed rgba(173, 229, 255, 0.4); }
@media (min-width: 700px) {
  .seo-trip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 60px; }
  .seo-stop:nth-child(even) { margin-top: 50px; }
  .seo-stop::after { display: none; }
}
@media (min-width: 1100px) {
  .seo-trip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; }
  .seo-stop:nth-child(even) { margin-top: 64px; }
  .seo-trip__route { display: block; position: absolute; z-index: 0; left: 0; right: 0; top: 30px; width: 100%; height: 150px; overflow: visible; fill: none; stroke: rgba(173, 229, 255, 0.38); stroke-width: 2.6; stroke-dasharray: 8 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .seo-trip__route path { vector-effect: non-scaling-stroke; }
}
/* 01 the counter pad: the owner's note, in his hand, with the pen on it */
.seo-note1 { rotate: -3deg; }
.seo-note1__sheet {
  position: relative; display: grid; gap: 2px; width: min(100%, 210px); padding: 24px 16px 14px 22px; border: 2px solid var(--ah-950); border-radius: 2px 2px 4px 4px;
  background-color: #fff3c4; background-image: linear-gradient(180deg, transparent 0 22px, transparent 22px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(21, 101, 192, 0.22) 25px 26px);
  background-position: 0 0, 0 10px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.seo-note1__sheet::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 12px; border: 2px solid var(--ah-950); border-radius: 2px; background: var(--ah-red-ink); }
.seo-note1__ln { color: #1d3f8f; font: 400 1rem/26px var(--ah-hand); white-space: nowrap; }
.seo-note1__pen { position: absolute; right: 0; bottom: 4px; width: 118px; height: auto; rotate: -24deg; overflow: visible; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5)); }
.seo-pen__body { fill: #1b3a7a; stroke: var(--ah-950); stroke-width: 2; stroke-linejoin: round; }
.seo-pen__cap { fill: #22385f; stroke: var(--ah-950); stroke-width: 2; }
.seo-pen__clip { fill: none; stroke: #c9d1dc; stroke-width: 2.4; stroke-linecap: round; }
.seo-pen__tip { fill: #c9d1dc; stroke: var(--ah-950); stroke-width: 1.5; }
/* 02 the typed draft with the writer's red pen: the slop line struck, the real detail written in */
.seo-draft {
  align-content: start; justify-items: start; gap: 6px; width: min(100%, 226px); height: auto; min-height: 150px; margin-inline: auto; padding: 14px 16px 12px;
  border: 2px solid var(--ah-950); border-radius: 2px; background-color: #fffdf6; background-image: var(--ah-fiber); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); rotate: 2deg;
}
.seo-stop__art.seo-draft { display: grid; place-items: start; }
.seo-draft__t { color: var(--ah-ink); font: 800 0.8rem/1.25 var(--ah-mono); text-transform: uppercase; letter-spacing: 0.02em; }
.seo-draft__ln { color: var(--ah-ink-2); font: 600 0.7rem/1.45 var(--ah-mono); }
.seo-draft__ln--cut { text-decoration: line-through 2px var(--ah-red-ink); }
.seo-draft__red { position: relative; margin: -2px 0 0 14px; color: var(--ah-red-ink); font: 400 0.92rem/1.1 var(--ah-hand); rotate: -2deg; }
.seo-draft__red::before { content: "^"; position: absolute; left: -12px; top: 6px; font-weight: 700; }
.seo-draft__ring { padding: 0 3px; border: 2px solid var(--ah-red-ink); border-radius: 50%; }
.seo-draft__bars { display: grid; gap: 6px; width: 100%; margin-top: 2px; }
.seo-draft__bars i { display: block; height: 6px; border-radius: 3px; background: rgba(11, 20, 36, 0.16); }
.seo-draft__bars i + i { width: 72%; }
/* 03 the published post in the browser, under the crawler's beam */
.seo-pub { position: relative; display: block; width: min(100%, 236px); height: auto; margin-inline: auto; border: 2px solid var(--ah-950); border-radius: 10px; background: #0b1528; box-shadow: 5px 5px 0 var(--ah-blue); }
/* the strip's one Sample sticker sits on the published post (our sample work), not loose in the air */
.seo-pub > .ah-sample { top: -15px; right: -12px; }
.seo-stop__art.seo-pub { display: block; }
.seo-pub__bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-bottom: 2px solid var(--ah-950); border-radius: 8px 8px 0 0; background: #1a202c; }
.seo-pub__bar i { flex: none; width: 9px; height: 9px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.seo-pub__bar i:nth-child(2) { background: var(--ah-gold); } .seo-pub__bar i:nth-child(3) { background: var(--ah-sky); }
.seo-pub__url { flex: 1 1 auto; min-width: 0; margin-left: 4px; padding: 3px 8px; border-radius: 999px; background: #0b1528; color: var(--ah-fog); font: 700 0.62rem/1.2 var(--ah-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-pub__page { position: relative; display: grid; gap: 6px; padding: 12px 12px 14px; border-radius: 0 0 8px 8px; background-color: var(--ah-cream); background-image: var(--ah-fiber); overflow: hidden; }
.seo-pub__h { color: var(--ah-ink); font: 900 1.05rem/1 var(--ah-display); text-transform: uppercase; letter-spacing: 0.02em; }
.seo-pub__by { justify-self: start; padding: 0 4px; color: var(--ah-ink); font-size: 0.7rem; font-weight: 800; background: linear-gradient(180deg, transparent 45%, rgba(27, 141, 246, 0.42) 45% 92%, transparent 92%); }
.seo-pub__lines { display: grid; gap: 5px; margin-top: 2px; }
.seo-pub__lines i { display: block; height: 5px; border-radius: 3px; background: rgba(11, 20, 36, 0.18); }
.seo-pub__lines i:nth-child(2) { width: 88%; } .seo-pub__lines i:nth-child(4) { width: 62%; }
.seo-pub__beam { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ah-neon-sky); box-shadow: 0 0 10px 2px rgba(143, 214, 255, 0.85); opacity: 0; }
/* 04 the shelf: twelve monthly binders */
.seo-books { display: grid; place-items: end center; align-content: end; }
.seo-books__row { display: flex; align-items: flex-end; gap: 3px; height: 116px; padding: 0 10px; }
.seo-books__row i {
  display: grid; place-items: start center; width: 15px; height: 100%; padding-top: 8px; border: 2px solid var(--ah-950); border-radius: 2px 2px 0 0;
  background: var(--ah-blue-deep); color: #fff; font: 800 0.56rem/1 var(--ah-mono); /* white on the blue spines: 4.9:1 */ font-style: normal; letter-spacing: 0.08em; text-transform: uppercase;
  writing-mode: vertical-rl; box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.18);
}
.seo-books__row i:nth-child(3n+2) { height: 92%; background: #22385f; }
.seo-books__row i:nth-child(3n) { height: 96%; background: var(--ah-cream); color: var(--ah-ink); box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.5); }
.seo-books__board { display: block; width: min(100%, 244px); height: 16px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 3px), linear-gradient(180deg, #6a4428, #3a2414); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: no-preference) {
  /* the binders fill the shelf one month at a time; the crawler's beam reads the post twice (finite) */
  html.motion .seo-trip:not(.is-play) .seo-books__row i { opacity: 0; transform: translateY(-14px); }
  .seo-books__row i { transition: opacity 0.25s, transform 0.4s var(--ease-back); }
  .seo-books__row i:nth-child(1) { transition-delay: 0.6s; } .seo-books__row i:nth-child(2) { transition-delay: 0.7s; } .seo-books__row i:nth-child(3) { transition-delay: 0.8s; }
  .seo-books__row i:nth-child(4) { transition-delay: 0.9s; } .seo-books__row i:nth-child(5) { transition-delay: 1s; } .seo-books__row i:nth-child(6) { transition-delay: 1.1s; }
  .seo-books__row i:nth-child(7) { transition-delay: 1.2s; } .seo-books__row i:nth-child(8) { transition-delay: 1.3s; } .seo-books__row i:nth-child(9) { transition-delay: 1.4s; }
  .seo-books__row i:nth-child(10) { transition-delay: 1.5s; } .seo-books__row i:nth-child(11) { transition-delay: 1.6s; } .seo-books__row i:nth-child(12) { transition-delay: 1.7s; }
  .seo-trip.is-play .seo-pub__beam { animation: seo-crawl 1.5s ease-in-out 0.5s 2; }
}
@keyframes seo-crawl { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(120px); } }

/* --------------------------------------------------------------------------
   PLANS: two pawn tickets stamped Good and Great. Each ticket carries a year
   strip: twelve post spines, or twenty-four plus four press clippings.
   -------------------------------------------------------------------------- */
.seo-pkgs { margin-top: 20px; }
@media (min-width: 760px) { #plans .ah-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; gap: 44px; } }
.seo-pkg__top { display: flex; align-items: center; gap: 12px; }
.seo-pkg__top .ah-pkg__name { flex: 1 1 auto; min-width: 0; }
.seo-pkg__stamp { flex: none; font-size: 1.15rem; }
#plans .seo-pkg__more { margin-top: 4px; }
.seo-year { margin-top: 14px; padding: 9px 10px 6px; border: 1.5px dashed rgba(11, 20, 36, 0.3); border-radius: 6px; background: rgba(255, 253, 246, 0.6); }
.seo-year__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; height: 36px; }
.seo-year__row i { display: block; height: 100%; border: 1.5px solid var(--ah-950); border-radius: 2px 2px 1px 1px; background: var(--ah-blue-ink); transform-origin: 50% 100%; }
.seo-year__row i:nth-child(3n+2) { height: 86%; background: #22385f; }
/* every month is a filled spine (a cream spine on the cream ticket read as a missing month) */
.seo-year__row i:nth-child(3n) { height: 93%; background: var(--ah-sky); }
.seo-year--2 .seo-year__row { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.seo-year--2 .seo-year__row i { border-width: 1.2px; }
.seo-year__news { display: flex; gap: 6px; margin-top: 7px; }
.seo-year__news b {
  display: block; width: 26px; height: 18px; border: 1.5px solid var(--ah-950); background-color: #e9e4d6; rotate: -4deg;
  background-image: linear-gradient(#3a4150, #3a4150), repeating-linear-gradient(180deg, transparent 0 3px, rgba(11, 20, 36, 0.35) 3px 4px);
  background-size: 80% 3px, 80% 9px; background-position: 50% 3px, 50% 8px; background-repeat: no-repeat;
}
.seo-year__news b:nth-child(even) { rotate: 3deg; }
.seo-year__ends { display: flex; justify-content: space-between; margin-top: 5px; color: var(--ah-ink-2); font: 700 0.62rem/1 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .seo-pkgs:not(.is-play) .seo-pkg__stamp { opacity: 0; transform: scale(1.8); }
  .seo-pkg__stamp { transition: opacity 0.2s 0.6s, transform 0.4s var(--ease-back) 0.6s; }
  .ah-pkg--flag .seo-pkg__stamp { transition-delay: 1s, 1s; }
  /* the year fills in, one spine at a time */
  html.motion .seo-pkgs:not(.is-play) .seo-year__row i { transform: scaleY(0); }
  .seo-year__row i { transition: transform 0.3s var(--ease-out); }
  .seo-year__row i:nth-child(n) { transition-delay: calc(var(--d, 0) * 1ms + 300ms); }
}
.seo-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 920px; margin: clamp(46px, 5vw, 66px) auto 0; }
@media (min-width: 760px) { .seo-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; } }
.seo-note { position: relative; padding-left: 50px; }
.seo-note__icon { position: absolute; left: 0; top: -2px; width: 36px; height: 36px; padding: 6px; border: 2px solid var(--ah-950); border-radius: 50%; background: #11151d; fill: none; stroke: var(--ah-sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 2px 2px 0 var(--ah-blue); }
.seo-note p { color: var(--ah-fog); font-size: 1.04rem; }
.seo-note p + p { margin-top: 6px; }
.seo-note p:first-of-type { color: var(--ah-paper); font-weight: 700; }

/* --------------------------------------------------------------------------
   PROOF: the back-office cork board. Utah: the AI answer on a phone and the
   25-mile route; California: the AI answer pointing a new customer to the
   shop; Atlanta: the news clippings (blank mastheads: we never invent outlet
   names). Each story is on a cream index card pinned under its piece.
   -------------------------------------------------------------------------- */
.seo-board {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; max-width: 1120px; margin: 0 auto; padding: clamp(26px, 3.4vw, 44px) clamp(18px, 3vw, 40px);
  border: 2px solid var(--ah-950); border-radius: 8px;
  background-color: #8b6a47;
  background-image:
    radial-gradient(circle, rgba(52, 30, 14, 0.45) 1px, transparent 1.6px), radial-gradient(circle, rgba(255, 228, 186, 0.22) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(52, 30, 14, 0.3) 1.4px, transparent 2px);
  background-size: 7px 7px, 9px 9px, 13px 13px; background-position: 0 0, 3px 4px, 6px 2px;
  box-shadow: inset 0 0 0 9px #5a3a22, inset 0 0 0 11px var(--ah-950), 8px 8px 0 rgba(0, 0, 0, 0.5);
}
@media (min-width: 980px) {
  .seo-board { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "utah ca" "utah atl"; column-gap: clamp(32px, 4vw, 60px); row-gap: 44px; align-items: start; }
  .seo-file--utah { grid-area: utah; align-self: center; }
  .seo-file--ca { grid-area: ca; }
  .seo-file--atl { grid-area: atl; }
}
.seo-file { position: relative; display: grid; justify-items: center; gap: 18px; min-width: 0; }
.seo-file__art { position: relative; width: 100%; }
.seo-file__card {
  position: relative; width: min(100%, 460px); padding: 22px 20px 16px; border: 2px solid var(--ah-950); border-radius: 3px;
  background-color: #fffdf6; background-image: linear-gradient(180deg, transparent 0 46px, rgba(180, 35, 24, 0.4) 46px 48px, transparent 48px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(21, 101, 192, 0.12) 25px 26px);
  color: var(--ah-ink); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45); rotate: -0.6deg;
}
.seo-file--ca .seo-file__card { rotate: 0.8deg; }
.seo-file--atl .seo-file__card { rotate: -0.4deg; }
.seo-file__card p { color: var(--ah-ink); font-size: 1.02rem; line-height: 1.5; }
.seo-file__card p + p { margin-top: 4px; }
.seo-file__pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45); }
.seo-where { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--ah-ink); font: 900 clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem)/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.seo-where__pin { flex: none; width: 1em; height: 1em; fill: none; stroke: var(--ah-red-ink); stroke-width: 2.4; stroke-linejoin: round; }
/* Utah: the map scrap with the 25-mile route, the phone with the AI answer */
.seo-utah { display: grid; justify-items: end; padding-left: 0; max-width: 520px; }
.seo-utah__map { position: relative; width: 88%; border: 2px solid var(--ah-950); border-radius: 3px; background: #efe6cc; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45); rotate: 1.5deg; }
.seo-utah__svg { display: block; width: 100%; height: auto; }
.seo-utah__road { fill: none; stroke: rgba(11, 20, 36, 0.18); stroke-width: 7; stroke-linecap: round; }
.seo-utah__route { fill: none; stroke: var(--ah-red-ink); stroke-width: 3.4; stroke-dasharray: 9 7; stroke-linecap: round; }
.seo-utah__home path { fill: #fffdf6; stroke: var(--ah-950); stroke-width: 2.4; stroke-linejoin: round; }
.seo-utah__pin path { fill: var(--ah-blue); stroke: var(--ah-950); stroke-width: 2.4; stroke-linejoin: round; }
.seo-utah__pin circle { fill: var(--ah-cream); stroke: var(--ah-950); stroke-width: 2; }
.seo-utah__stamp { position: absolute; right: 26%; top: 14%; font-size: 1.6rem; rotate: -9deg; }
.seo-mini {
  position: absolute; left: 0; bottom: -18px; display: flex; flex-direction: column; gap: 6px; width: 30%; max-width: 132px; aspect-ratio: 9 / 16; padding: 30px 12px 12px;
  border: 2.5px solid var(--ah-950); border-radius: 18px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 5px 5px 0 var(--ah-blue); rotate: -5deg;
}
.seo-mini > .ah-sample { top: -14px; right: -18px; }
.seo-mini::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid var(--ah-950); border-radius: 12px; background: #0c1730; }
.seo-mini__island { position: absolute; z-index: 1; left: 50%; top: 12px; width: 30%; height: 7px; margin-left: -15%; border-radius: 9px; background: #05070c; }
/* the screen runs top down like the hero: the question, the answer naming the shop, its source chip */
.seo-mini__q, .seo-mini__a, .seo-mini__src { position: relative; z-index: 1; flex: none; }
.seo-mini__q { align-self: flex-end; width: 56%; height: 16px; margin-right: 2px; border: 1.5px solid var(--ah-950); border-radius: 7px 7px 2px 7px; background: var(--ah-blue); }
.seo-mini__a { display: grid; gap: 4px; padding: 6px 6px 7px; border: 1.5px solid var(--ah-950); border-radius: 7px 7px 7px 2px; background: var(--ah-cream); }
.seo-mini__name { display: block; font-size: clamp(0.56rem, 0.5rem + 0.3vw, 0.7rem); line-height: 1.3; }
.seo-mini__a i { display: block; height: 4px; border-radius: 2px; background: rgba(11, 20, 36, 0.22); }
.seo-mini__a i + i { width: 70%; }
/* the source chip under the answer, as on every AI answer on this page (a drawing: a numbered tab and the post's line) */
.seo-mini__src { align-self: flex-start; display: flex; align-items: center; gap: 4px; width: 66%; padding: 3px 5px 3px 3px; border: 1.5px solid var(--ah-950); border-radius: 6px; background: var(--ah-cream); box-shadow: 2px 2px 0 var(--ah-blue); }
.seo-mini__src b { flex: none; display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: var(--ah-ink); color: var(--ah-cream); font: 800 7px/1 var(--ah-mono); }
.seo-mini__src i { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--ah-blue-ink); opacity: 0.75; }
/* California: the AI answer, and the arrow it gives a new customer to the shop */
.seo-ca { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: end; max-width: 460px; }
.seo-ca__ans {
  position: relative; grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin-right: 18%; padding: 12px 15px 12px 11px;
  border: 2px solid var(--ah-950); border-radius: 18px 18px 18px 6px; background-color: var(--ah-cream); color: var(--ah-ink); box-shadow: 4px 4px 0 var(--ah-blue); rotate: -0.6deg;
}
.seo-ca__ans > .ah-sample { top: -14px; right: 14px; }
.seo-ca__txt { font-size: 0.98rem; font-weight: 700; line-height: 1.4; }
.seo-ca__go { grid-column: 1; justify-self: end; width: 150px; height: auto; margin: 4px -8px 0 0; overflow: visible; }
.seo-ca__trail { fill: none; stroke: var(--ah-paper); stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; }
.seo-ca__head { fill: none; stroke: var(--ah-paper); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.seo-ca__shop { grid-column: 2; width: 74px; height: auto; margin-bottom: -6px; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.45)); }
.seo-ca__awn { fill: var(--ah-blue); stroke: var(--ah-950); stroke-width: 2.4; stroke-linejoin: round; }
.seo-ca__awn-st { fill: none; stroke: var(--ah-950); stroke-width: 2; }
.seo-ca__wall { fill: #efe6cc; stroke: var(--ah-950); stroke-width: 2.4; }
.seo-ca__door { fill: #22385f; stroke: var(--ah-950); stroke-width: 2.2; }
.seo-ca__win { fill: #ffe6a8; stroke: var(--ah-950); stroke-width: 2; }
/* Atlanta: the clippings, fanned, blank mastheads, stamped */
.seo-atl { height: 176px; max-width: 440px; }
.seo-clip {
  position: absolute; top: 8px; display: grid; align-content: start; gap: 6px; width: 34%; height: 150px; padding: 9px 9px 0;
  border: 2px solid var(--ah-950); background-color: #ece6d6; background-image: var(--ah-fiber); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 80% 95%, 66% 100%, 52% 96%, 38% 100%, 24% 95%, 10% 100%, 0 96%);
}
.seo-clip--1 { left: 0; rotate: -9deg; }
.seo-clip--2 { left: 20%; rotate: -3deg; top: 2px; }
.seo-clip--3 { left: 42%; rotate: 4deg; top: 10px; }
.seo-clip--4 { left: 64%; rotate: 10deg; top: 4px; }
.seo-clip__mast { display: block; height: 10px; background: #3a4150; }
.seo-clip__head { display: block; height: 22px; background: repeating-linear-gradient(180deg, rgba(11, 20, 36, 0.62) 0 7px, transparent 7px 11px); }
.seo-clip__pic { display: block; height: 34px; border: 1.5px solid rgba(11, 20, 36, 0.5); background: radial-gradient(circle, rgba(11, 20, 36, 0.5) 1px, transparent 1.5px) 0 0 / 4px 4px, #d9d2bf; }
.seo-clip__cols { display: block; height: 52px; background: repeating-linear-gradient(180deg, rgba(11, 20, 36, 0.3) 0 2px, transparent 2px 6px); -webkit-mask: linear-gradient(90deg, #000 47%, transparent 47% 53%, #000 53%); mask: linear-gradient(90deg, #000 47%, transparent 47% 53%, #000 53%); }
.seo-atl__stamp { position: absolute; z-index: 2; left: 50%; top: 52%; translate: -50% -50%; font-size: 1.7rem; background: rgba(236, 230, 214, 0.86); rotate: -8deg; }
@media (prefers-reduced-motion: no-preference) {
  /* the route draws itself, then the stamps thump (finite) */
  html.motion .seo-board:not(.is-play) .seo-utah__route { stroke-dashoffset: 360; opacity: 0; }
  .seo-utah__route { transition: stroke-dashoffset 1.4s var(--ease-out) 0.4s, opacity 0.2s 0.4s; }
  html.motion .seo-board:not(.is-play) :is(.seo-utah__stamp, .seo-atl__stamp) { opacity: 0; scale: 1.7; }
  .seo-utah__stamp, .seo-atl__stamp { transition: opacity 0.2s 1.5s, scale 0.4s var(--ease-back) 1.5s; }
  .seo-atl__stamp { transition-delay: 1.8s; }
}
@media (max-width: 520px) {
  .seo-board { padding-inline: 12px; }
  .seo-file__card { padding: 20px 14px 14px; }
  .seo-utah__map { width: 92%; }
  .seo-utah__stamp { font-size: 1.25rem; right: 20%; }
  .seo-mini { width: 34%; }
  .seo-atl { height: 150px; }
  .seo-clip { height: 128px; }
  .seo-atl__stamp { font-size: 1.3rem; }
  .seo-ca__ans { margin-right: 6%; }
}

/* --------------------------------------------------------------------------
   BOOK: the yellow pad from the counter, "Questions your town is asking AI":
   the hero's three questions in the owner's hand, a blank line for his, and
   the booking card at the foot of the page.
   -------------------------------------------------------------------------- */
.seo-book__actions { margin-top: 26px; }
.seo-pad { position: relative; width: min(100%, 450px); margin: 0 auto; rotate: -1deg; }
.seo-pad__clip { position: relative; z-index: 2; height: 28px; margin: 0 -4px; border: 2px solid var(--ah-950); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #34425b, #1a2438); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.seo-pad__clip span { position: absolute; left: 50%; top: -12px; width: 96px; height: 26px; margin-left: -48px; border: 2px solid var(--ah-950); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 60%, var(--ah-steel-c)); }
.seo-pad__sheet {
  position: relative; padding: 22px clamp(18px, 4vw, 28px) 24px 54px; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 6px 6px;
  background-color: #fbf1c6;
  background-image: linear-gradient(90deg, transparent 0 40px, rgba(180, 35, 24, 0.5) 40px 42px, transparent 42px);
  color: var(--ah-ink); box-shadow: 8px 8px 0 var(--ah-blue);
}
.seo-pad__title { margin-bottom: 10px; color: var(--ah-ink); font: 900 clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem)/1.05 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.seo-pad__qs { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.seo-pad__qs li { position: relative; min-height: 38px; padding: 6px 0 4px; border-bottom: 1.5px solid rgba(21, 101, 192, 0.32); color: #1d3f8f; font: 400 1.05rem/1.45 var(--ah-hand); counter-increment: q; }
.seo-pad__qs li::before { content: counter(q) "."; position: absolute; left: -30px; top: 6px; color: var(--ah-red-ink); font: 400 1rem/1.45 var(--ah-hand); }
.seo-pad__blank { height: 40px; }
.seo-pad__pencil { position: absolute; right: 4px; bottom: 6px; width: 132px; height: auto; rotate: -6deg; overflow: visible; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.35)); }
.seo-pencil__wood { fill: #f2c46a; stroke: var(--ah-950); stroke-width: 2; stroke-linejoin: round; }
.seo-pencil__lead { fill: var(--ah-ink); }
.seo-pencil__band { fill: none; stroke: #9aa7b8; stroke-width: 3; }
.seo-pencil__eraser { fill: #f08ca8; stroke: var(--ah-950); stroke-width: 2; }
.seo-pad__book { margin-top: 20px; padding-top: 18px; border-top: 2.5px dashed rgba(11, 20, 36, 0.35); }
.seo-pad__h { color: var(--ah-ink); font: 900 clamp(1.5rem, 1.3rem + 0.7vw, 1.85rem)/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.seo-pad__p { margin-top: 8px; color: var(--ah-ink-2); font-size: 1rem; font-weight: 600; }
.seo-pad__btn { margin-top: 16px; }
/* the pad is page-drawn paper: its focus ring goes ink, like the kit's paper objects */
.seo-pad :focus-visible { outline-color: var(--ah-ink); }
/* the blank line for his question: "yours?" in light pencil */
.seo-pad__yours { position: absolute; left: 4px; top: 8px; color: rgba(52, 66, 91, 0.6); font: 400 1rem/1.4 var(--ah-hand); rotate: -2deg; }
@media (prefers-reduced-motion: no-preference) {
  /* the questions write themselves in, one after another (finite) */
  html.motion .seo-pad:not(.is-play) .seo-pad__qs li:not(.seo-pad__blank) { clip-path: inset(0 100% 0 0); }
  .seo-pad__qs li { transition: clip-path 0.9s steps(18, end) 0.3s; }
  .seo-pad__qs li:nth-child(2) { transition-delay: 1.1s; }
  .seo-pad__qs li:nth-child(3) { transition-delay: 1.9s; }
}
@media (max-width: 420px) {
  .seo-pad__sheet { padding-left: 46px; padding-right: 16px; background-image: linear-gradient(90deg, transparent 0 34px, rgba(180, 35, 24, 0.5) 34px 36px, transparent 36px); }
  .seo-pad__qs li { font-size: 1rem; }
  .seo-pad__qs li::before { left: -26px; }
}

/* --------------------------------------------------------------------------
   FINAL: the neon AI answer bubble, the page's sparkle at its corner, lit with
   "Your Pawn Shop". A tap asks it again: the words go dark, the thinking dots
   pulse, then the shop's name lights back up (finite).
   -------------------------------------------------------------------------- */
.seo-neon { position: relative; display: block; width: min(100%, 470px); margin: 0 auto 44px; padding: 26px 0 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seo-neon:focus-visible { outline: none; }
.seo-neon:focus-visible .seo-neon__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 16px; }
.seo-neon__chain { position: absolute; top: 0; width: 2px; height: calc(52.6% + 13px); background: repeating-linear-gradient(180deg, #5d6a7d 0 5px, transparent 5px 8px); }
.seo-neon__chain--l { left: 22%; } .seo-neon__chain--r { right: 16%; }
.seo-neon__svg { display: block; width: 100%; height: auto; overflow: visible; }
.seo-neon__glass use { fill: none; stroke: rgba(220, 235, 255, 0.14); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.seo-neon__lit use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.seo-neon__halo { stroke-width: 20; opacity: 0.85; }
.seo-neon__tube { stroke-width: 8; }
.seo-neon__core { stroke-width: 2.8; }
/* the AI names your shop and cites you: a sparkle, the lit name on its raceway, and a blue source marker 1 */
.seo-neon__race { fill: #121a29; stroke: var(--ah-950); stroke-width: 3; }
.seo-neon__lit--cite .seo-neon__halo, .seo-neon__lit--cite .seo-neon__tube { stroke: var(--ah-neon-blue); }
.seo-neon__lit--cite .seo-neon__core { stroke: var(--ah-neon-blue-core); }
.seo-neon__lit--cite .seo-neon__halo { stroke-width: 14; }
.seo-neon__lit--cite .seo-neon__tube { stroke-width: 5.5; }
.seo-neon__lit--cite .seo-neon__core { stroke-width: 2; }
.seo-neon__glass use[href="#seoNeonCite"] { stroke-width: 6; }
.seo-neon__lit--spark .seo-neon__halo, .seo-neon__lit--spark .seo-neon__tube { stroke: var(--ah-neon-pink); }
.seo-neon__lit--spark .seo-neon__core { stroke: var(--ah-neon-pink-core); }
.seo-neon__text { fill: var(--ah-neon-pink-core); font: 900 50px/1 var(--ah-display); letter-spacing: 0.03em; text-anchor: middle; text-transform: uppercase; }
.seo-neon__text--halo { fill: var(--ah-neon-pink); stroke: var(--ah-neon-pink); stroke-width: 7; opacity: 0.9; }
.seo-neon__dots circle { fill: var(--ah-neon-sky); opacity: 0; }
.seo-neon__hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
/* .seo-final in front: these must beat the play-on-view ignite, whose fill would otherwise hold the words lit */
.seo-final .seo-neon.is-asking .seo-neon__lit--words, .seo-final .seo-neon.is-asking .seo-neon__lit--cite { opacity: 0.05; animation: none; }
.seo-neon.is-asking .seo-neon__dots circle { opacity: 1; animation: seo-ndot 0.9s ease-in-out 2; }
.seo-neon.is-asking .seo-neon__dots circle:nth-child(2) { animation-delay: 0.15s; }
.seo-neon.is-asking .seo-neon__dots circle:nth-child(3) { animation-delay: 0.3s; }
.seo-final .seo-neon.is-relit .seo-neon__lit--words { animation: ah-ignite2 0.8s 0.05s both; }
.seo-final .seo-neon.is-relit .seo-neon__lit--cite { animation: ah-ignite2 0.8s 0.4s both; }
@keyframes seo-ndot { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .seo-final:not(.is-play) .seo-neon__lit { opacity: 0.05; }
  .seo-final.is-play .seo-neon__lit--spark { animation: ah-ignite 1.1s 0.15s both; }
  .seo-final.is-play .seo-neon__lit--words { animation: ah-ignite 1.2s 0.7s both; }
  .seo-final.is-play .seo-neon__lit--cite { animation: ah-ignite 1.1s 1.4s both; }
}