/* Scoped to the refreshed, saved perspective pages. */
.seo-refreshed article.card[hidden] { display: none !important; }
.seo-refreshed .seo-asked { margin: 0 0 8px; font: 400 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.seo-refreshed .seo-intro { margin: 22px 0 30px; max-width: 76ch; font: 400 16px/1.65 var(--sans); }
.seo-refreshed .seo-intro p { margin: 0 0 14px; }
.seo-refreshed .seo-count { font: 400 12px/1.5 var(--mono); color: var(--ink-2); }
.seo-refreshed .seo-related { margin: 28px 0; font: 400 14px/1.6 var(--sans); }
.seo-refreshed .seo-related h2 { font: 500 16px/1.4 var(--sans); margin: 0 0 10px; }
.seo-refreshed .seo-related ul { margin: 0; padding-left: 20px; }
.seo-refreshed .seo-related a { text-decoration: underline; text-underline-offset: 3px; }
.seo-refreshed .seo-pagination { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 24px); padding: 14px 0; border-top: 1px solid var(--rule); font: 400 13px/1.5 var(--sans); white-space: nowrap; }
.seo-refreshed .seo-pagination button { background: transparent; color: var(--ink); border: 0; min-height: 0; padding: 0; font: inherit; cursor: pointer; }
.seo-refreshed .seo-pagination button:disabled { opacity: .45; cursor: default; }
.seo-refreshed .seo-pagination button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.seo-refreshed .seo-brew { margin: 26px 0 44px; text-align: center; font: 500 17px/1.5 var(--sans); }
.seo-refreshed .seo-brew a { text-decoration: underline; text-underline-offset: 4px; }
body.seo-compare-page .seo-related { margin: 28px 0; font: 400 14px/1.6 var(--sans); }
body.seo-compare-page .seo-related h2 { font: 500 16px/1.4 var(--sans); margin: 0 0 10px; }
body.seo-compare-page .seo-related ul { margin: 0; padding-left: 20px; }
body.seo-compare-page .seo-related a { text-decoration: underline; text-underline-offset: 3px; }
body.seo-compare-page .seo-brew { margin: 26px 0 44px; text-align: center; font: 500 17px/1.5 var(--sans); }
body.seo-compare-page .seo-brew a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .seo-refreshed .seo-intro { font-size: 15px; } .seo-refreshed .seo-pagination { gap: 8px; font-size: 12px; } .seo-refreshed .seo-pagination span { text-align: center; } }

body.seo-compare-page .compare.split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

body.seo-compare-page .compare.split::before { display: none; }
body.seo-compare-page .compare.split .gpt-side,
body.seo-compare-page .compare.split .moka-side { grid-column: auto; }

body.seo-compare-page .gpt-side,
body.seo-compare-page .moka-side {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: #fff;
}

body.seo-compare-page .gpt-side { background: #faf9f6; }

body.seo-compare-page .compare .gpt {
  font-size: 18px;
  line-height: 1.55;
}

body.seo-compare-page .compare .quotes blockquote {
  font: italic 34px/1.3 var(--display);
  letter-spacing: -.005em;
}

/* ChatGPT inherits its original comparison-page treatment from styles.css.
   Mokapot alone uses the live-brew quote treatment. */
body.seo-compare-page .moka-side mark.hl,
body.seo-compare-page .moka-side mark.hl.yellow,
body.seo-compare-page .moka-side mark.hl.grey,
body.seo-compare-page .moka-side mark.hl.orange,
body.seo-compare-page .moka-side mark.hl.green {
  color: inherit;
  text-decoration: none;
  padding: .04em .08em .26em;
  margin: 0 -.04em;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C14 6.2 25 9.1 40 7.4 C53 5.9 67 8.8 82 7.1 C98 5.5 110 9.2 127 7.5 C144 6.1 156 8.9 174 6.9 C189 5.8 204 8.7 220 7.3 C229 6.7 234 8 238 7.5' fill='none' stroke='%23F87D30' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% .44em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

body.seo-compare-page .compare .photo {
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

body.seo-compare-page .compare .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.seo-compare-page .compare .card {
  grid-template-columns: 120px minmax(0, 1fr);
}

body.seo-compare-page .compare .card.side-right {
  grid-template-columns: minmax(0, 1fr) 120px;
}

@media (max-width: 960px) {
  body.seo-compare-page .compare.split { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body.seo-compare-page .compare .quotes blockquote { font-size: 26px; }
  body.seo-compare-page .gpt-side,
  body.seo-compare-page .moka-side { padding: 20px; }
  body.seo-compare-page .compare .card,
  body.seo-compare-page .compare .card.side-right { grid-template-columns: 1fr; }
  body.seo-compare-page .compare .card.side-right > .figure { order: 0; }
  body.seo-compare-page .compare .card.side-right > .info { order: 1; }
  body.seo-compare-page .compare .card > .figure { width: 120px; }
}