/* /check, under the form (Evan picked it 2026-11-05 after 7 rounds): two plain ideas, each a big headline with its logo
   and the SEO page's own looping example (Google results: css/seo-serp.css + js/seo-serp.js; AI chat: css/seo-ai.css +
   js/seo-ai.js), then plain questions. Pure black and white, Mona Sans 500 at most. */
.cp { position: relative; overflow-x: clip; padding-block: clamp(80px, 10vw, 140px); background: #fff; color: #000; }
.cp-go { display: flex; justify-content: center; margin-top: 28px; }

.pk { display: grid; gap: clamp(72px, 9vw, 128px); }
.pk-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.pk-flip .pk-copy { order: 2; }
.pk-copy h2 { max-width: 11ch; margin: 0; color: #000; font-weight: 500; font-size: clamp(52px, 7vw, 108px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.pk-word { white-space: nowrap; }
.pk-logo { display: inline-block; width: .74em; height: .74em; margin-right: .14em; vertical-align: -.02em; }
.pk-logo svg { display: block; width: 100%; height: 100%; }
.pk-copy p { margin: 28px 0 0; color: #333; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; }
.pk-real { min-width: 0; }
.pk-more { max-width: 36ch; margin: 0 auto; color: #6e6e73; font-size: 18px; line-height: 1.5; text-align: center; }

/* Google in a frame like the chat window's (.sai: 1px #e5e5e5, 18px, 600px tall); it plays faster here (data-serp-speed) */
.pk-gbox { box-sizing: border-box; height: 600px; padding: 16px 16px 0; border: 1px solid #e5e5e5; border-radius: 18px; background: #fff; overflow: hidden; }
.pk-gbox .serp-stage .serp-shot { height: 516px; }
.pk-gbox .serp { transition-duration: .6s; }
/* the pieces of css/seo.css the Google example uses (the rest of that file is the SEO page's own) */
.pk-real .seo-sticky { display: grid; gap: 16px; }
.pk-real .seo-search-box { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px; border: 1px solid #000; background: #fff; color: #000; font-size: 18px; }
.pk-real .seo-search-icon { position: relative; flex: none; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; }
.pk-real .seo-search-icon::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.pk-real .seo-caret { width: 1px; height: 22px; background: currentColor; animation: pk-blink 1s steps(1) infinite; }
@keyframes pk-blink { 50% { opacity: 0; } }
.pk-real .seo-shot { position: relative; margin: 0; border: 1px solid #d9d9d9; background: #fff; }
.pk-real .seo-shot figcaption { position: absolute; }   /* where: css/seo-serp.css (.serp-stage .serp-shot figcaption) */

/* Questions: the SEO page's card grid */
.cq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cq-head { position: sticky; top: 120px; }
.cq-head h2 { margin: 0; color: #000; font-weight: 500; font-size: clamp(40px, 5.6vw, 72px); line-height: 1; letter-spacing: -.03em; }
.cq-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cq-q { padding: 26px; border-radius: 24px; background: #f2f2f4; }
.cq-q h3 { margin: 0 0 12px; color: #000; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.cq-q p { margin: 0; color: #333; font-size: 16px; line-height: 1.55; }
.cq-q a { color: inherit; text-decoration: underline; }

@media (max-width: 991px) { .cq { grid-template-columns: 1fr; } .cq-head { position: static; } }
@media (max-width: 767px) {
  .pk { gap: 72px; }
  .pk-row { grid-template-columns: 1fr; gap: 28px; }
  .pk-flip .pk-copy { order: 0; }
  .pk-copy { text-align: center; }
  .pk-copy h2 { max-width: 12ch; margin-inline: auto; font-size: clamp(44px, 12.5vw, 56px); }
  .pk-copy p { font-size: 20px; }
  .pk-gbox { height: auto; padding: 12px 10px 8px; overflow: visible; }
}
@media (max-width: 600px) { .cq-qs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pk-real .seo-caret { animation: none; } }
/* The Google example on phones: the SEO page's cuts (css/seo-serp.css, #included there) */
@media (max-width: 767px) {
  .cp-how .serp { --row: 88px; }
  .cp-how .biz { padding-top: 8px; padding-bottom: 8px; }
  .cp-how .biz-meta:nth-child(3) { display: none; }
  .cp-how .biz-list { height: calc(var(--row) * 4); clip-path: inset(-44px); }   /* the lifted card's shadow reaches ~40px below it */
  .cp-how .serp-res:has(.serp-bar) { display: none; }
  .cp-how .biz-wrap::after { content: ""; position: absolute; left: -16px; right: 0; top: calc(var(--row) * 4 + 1px); height: 45px; background: #fff; z-index: 2; }   /* under Your Business (z 3), so its ring is never covered */   /* the list draws 26px past its edge for the lifted card; hide the 5th row peeking there */
  .cp-how .serp-typed { white-space: nowrap; overflow: hidden; font-size: 15px; }   /* the search stays on one line */
  /* and (Evan picked "all four" from the phone options, 2026-10-14): no Google tabs, chips or location line, no More businesses
     or web result under the list, a shorter map, tighter spacing around it */
  .cp-how :is(.serp-tabs, .serp-chips, .serp-loc, .serp-morebiz, .serp-res) { display: none; }
  .cp-how .serp { padding-top: 6px; padding-left: 16px; }
  /* Map and businesses edge to edge, same 16px both sides (Evan, 2026-10-14: cut short on the right); the climb arrow, which
     sat in a 42px gap on the right, now rides on Your Business's top-right corner. */
  .cp-how .serp { padding-right: 16px; }
  .cp-how .rise-arrow { right: -8px; top: calc(var(--pos, 6) * var(--row) - 10px); z-index: 4; }
  .cp-how .serp-stage .serp-shot { overflow: visible; }   /* the frame ended right under the list and cut the lifted card's shadow */   /* room for the lifted card and its ring, which were cut at the left edge */
  .cp-how .biz-map { height: 100px; }
  .cp-how .serp-stage { gap: 12px; }
}