/* Shared editorial sections; existing motion and document templates keep their styles. */
.seo-page { margin: 0; background: #f8f9ff; color: #202333; font: 16px/1.65 Manrope, sans-serif; }
.seo-page *, .seo-section * { box-sizing: border-box; }
.seo-page a, .seo-section a { color: #3a45c0; text-underline-offset: .2em; }
.seo-page a:focus-visible, .seo-section a:focus-visible, .seo-faq summary:focus-visible { outline: 3px solid #685be7; outline-offset: 5px; border-radius: 4px; }
.seo-header { max-width: 1160px; margin: auto; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.seo-header > a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 24px; font-weight: 800; }
.seo-header nav, .seo-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.seo-breadcrumbs { max-width: 1160px; margin: auto; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 10px; color: #62677b; font-size: 14px; }
.seo-breadcrumbs span::before { content: "/ "; }
.seo-hero { max-width: 1112px; margin: 8px auto 32px; padding: clamp(28px, 6vw, 72px); background: #4b57d9; border-radius: 28px; color: white; }
.seo-hero h1 { max-width: 900px; margin: 16px 0 24px; font-size: clamp(36px, 5vw, 66px); line-height: 1.1; letter-spacing: -.035em; }
.seo-hero p { max-width: 780px; }
.seo-hero > p:not(.seo-kicker) { font-size: 19px; }
.seo-hero a { color: white; }
.seo-kicker { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.seo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.seo-hero .seo-button { display: inline-block; background: white; color: #3a45c0; border-radius: 12px; padding: 14px 24px; text-decoration: none; font-weight: 700; }
.seo-section { width: 100%; max-width: 1160px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 24px; color: #202333; font-family: Manrope, sans-serif; line-height: 1.65; }
.seo-section h2 { margin: 0 0 24px; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -.025em; }
.seo-section p { max-width: 900px; }
.seo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.seo-cards article { padding: 28px; background: white; border: 1px solid #e1e4f3; border-radius: 20px; }
.seo-cards h3 { margin: 0 0 16px; font-size: 21px; line-height: 1.3; }
.seo-cards p { margin: 0; }
.seo-how { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.seo-how img { display: block; width: 100%; height: auto; border-radius: 12px; }
.seo-how ol { margin: 0; padding-left: 24px; }
.seo-how li { margin: 16px 0; padding-left: 8px; }
.seo-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.seo-links a { display: block; padding: 20px 24px; background: #eef0fe; border: 1px solid #daddf7; border-radius: 16px; font-size: 17px; font-weight: 600; text-decoration: none; }
.seo-links a:hover { background: #e0e4ff; }
.seo-faq { max-width: 920px; }
.seo-faq details { border-bottom: 1px solid #daddf0; padding: 20px 0; }
.seo-faq summary { cursor: pointer; font-size: 18px; font-weight: 700; }
.seo-faq p { margin: 16px 0 0; }
.seo-footer { max-width: 1160px; margin: auto; padding: 36px 24px 80px; border-top: 1px solid #daddf0; color: #62677b; font-size: 14px; }
@media (max-width: 767px) {
  .seo-header { align-items: flex-start; padding: 20px 16px; gap: 16px; }
  .seo-header nav { font-size: 13px; gap: 8px; flex-direction: column; }
  .seo-breadcrumbs { padding: 12px 16px; }
  .seo-hero { margin: 8px 12px 20px; padding: 32px 20px; border-radius: 20px; }
  .seo-hero > p:not(.seo-kicker) { font-size: 17px; }
  .seo-section { padding: 36px 20px; }
  .seo-cards, .seo-how, .seo-links { grid-template-columns: 1fr; }
  .seo-cards article { padding: 24px; }
  .seo-actions { gap: 16px; }
  .seo-links a { padding: 18px 20px; }
}

.seo-picture { display: contents; }