/* SEO / PYQ pages — uses landing.css tokens */
.seo-main {
  padding: calc(var(--header-h, 76px) + 20px) 0 80px;
  max-width: 100%;
  overflow-x: clip;
}
.seo-page { max-width: 920px; margin: 0 auto; }
.seo-bc ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 13px; color: var(--muted); }
.seo-bc li:not(:last-child)::after { content: '/'; margin-left: 8px; opacity: .5; }
.seo-bc a { color: var(--brand-mid, #243557); font-weight: 600; }
.seo-hero { margin-bottom: 24px; }
.seo-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #4f46e5); margin-bottom: 10px; }
.seo-hero h1 { margin: 0 0 12px; font-size: clamp(24px, 5vw, 40px); line-height: 1.15; font-weight: 900; letter-spacing: -.03em; color: var(--text, #0f172a); }
.seo-lead { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 760px; }
.seo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  max-width: 100%;
}
.seo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.35;
}
.seo-btn.primary { background: linear-gradient(135deg, var(--brand-mid, #243557), var(--brand-mid, #31457a)); color: #fff; border: 0; }
.seo-btn.light { background: #fff; color: var(--brand-mid, #243557); }
.seo-btn.ghost-muted { opacity: .65; cursor: default; }
.seo-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
@media (min-width: 640px) {
  .seo-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.seo-stat { padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0; }
.seo-stat small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.seo-stat strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 900; color: var(--text); overflow-wrap: anywhere; }
.seo-block { margin: 28px 0; }
.seo-block h2 { margin: 0 0 14px; font-size: 20px; font-weight: 900; color: var(--text); }
.seo-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.seo-chip { display: inline-flex; padding: 10px 14px; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--border); font-weight: 700; font-size: 13px; color: var(--text); max-width: 100%; }
.seo-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.seo-card { padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s ease; min-width: 0; }
.seo-card:hover { transform: translateY(-2px); border-color: var(--accent-light); }
.seo-card h2, .seo-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 900; color: var(--text); }
.seo-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.seo-pyq-list { display: grid; gap: 12px; }
.seo-pyq-item { display: block; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); min-width: 0; }
.seo-pyq-item:hover { border-color: var(--accent-light); }
.seo-pyq-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.seo-pyq-meta span { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--brand-mid); background: var(--brand-soft); padding: 4px 8px; border-radius: 999px; }
.seo-pyq-item p { margin: 0; color: var(--text); line-height: 1.6; }
.seo-q-card { padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 24px; }
.seo-q-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.seo-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-mid); }
.seo-q-text { line-height: 1.7; margin-bottom: 16px; color: var(--text); }
.seo-options { display: grid; gap: 8px; }
.seo-option { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-soft); }
.seo-answer { margin-top: 16px; font-size: 14px; color: var(--muted); }
.seo-pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 28px 0; font-weight: 700; flex-wrap: wrap; }
.seo-faq details { border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; background: var(--card); }
.seo-faq summary { cursor: pointer; font-weight: 800; color: var(--text); }
.seo-faq p { margin: 10px 0 0; color: var(--muted); line-height: 1.65; }
.seo-cta-band {
  margin-top: 40px;
  padding: 28px 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, #243557, #6366f1);
  color: #fff;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.seo-cta-band h2 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 28px); font-weight: 900; line-height: 1.2; }
.seo-cta-band p { margin: 0 auto 18px; opacity: .92; max-width: 520px; line-height: 1.6; font-size: 15px; }
.seo-cta-band .seo-cta-row {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.seo-cta-band .seo-btn {
  width: 100%;
  white-space: normal;
}
.seo-cta-band .seo-btn.ghost-muted {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 640px) {
  .seo-cta-band { padding: 32px 24px; }
  .seo-cta-band .seo-cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: none;
  }
  .seo-cta-band .seo-btn { width: auto; }
}
@media (max-width: 639px) {
  .seo-hero .seo-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .seo-hero .seo-btn {
    width: 100%;
    white-space: normal;
  }
}
.seo-prose { line-height: 1.75; color: var(--muted); font-size: 16px; }
.seo-prose p { margin: 0 0 14px; }

.seo-login-gate { margin-top: 8px; }
.seo-login-gate-inner {
  text-align: center;
  padding: 32px 24px;
  border-radius: 22px;
  border: 1px dashed var(--border);
  background: linear-gradient(180deg, var(--bg-soft, #f8fafc) 0%, #fff 100%);
}
.seo-login-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--brand-soft, #eef2ff);
  color: var(--brand-mid, #243557);
  font-size: 22px;
  margin-bottom: 16px;
}
.seo-login-gate h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; color: var(--text); }
.seo-login-gate p { margin: 0 auto 18px; max-width: 520px; color: var(--muted); line-height: 1.65; }
.seo-login-gate .seo-cta-row { justify-content: center; margin-top: 0; }