.seo-page { background: var(--paper); color: var(--text); }
.seo-page .nav { position: relative; }
.seo-page .nav-shell { width: min(calc(100% - 48px), var(--max)); }
.seo-page .nav-links { gap: 19px; }
.seo-page .nav-links a[aria-current="page"] { color: var(--gold); }
.seo-breadcrumbs { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.seo-breadcrumbs a { color: inherit; text-decoration: none; }
.seo-breadcrumbs a:hover { color: var(--gold-deep); }
.seo-breadcrumbs .seo-lang-links { margin-left: auto; }
.seo-breadcrumbs .seo-lang-links a { text-decoration: underline; text-underline-offset: 2px; }
.seo-breadcrumbs span::before { content: "/"; margin-right: 8px; color: #a8b1ac; }
.seo-hero { padding-top: 52px; }
.seo-hero .hero-copy { max-width: 760px; }
.seo-hero .hero-sub { max-width: 690px; }
.seo-hero .hero-visual { align-self: stretch; }
.seo-proof-card { height: 100%; padding: clamp(24px, 4vw, 42px); display: grid; align-content: center; gap: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.seo-proof-card > span { color: var(--gold); font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.seo-proof-card h2 { margin: 0; color: var(--white); font-size: clamp(27px, 3vw, 39px); line-height: 1.08; letter-spacing: -.035em; }
.seo-proof-card p { margin: 0; color: rgba(255,255,255,.66); }
.seo-checks { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.seo-checks li { position: relative; padding-left: 28px; color: rgba(255,255,255,.8); font-size: 13px; }
.seo-checks li::before { content: "✓"; position: absolute; left: 0; top: -1px; display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #08140f; background: var(--gold); font-size: 11px; font-weight: 900; }
.seo-page .section > .seo-checks li { color: var(--text); font-size: 15px; }
.seo-page .section > ol.seo-checks { margin-block: 24px; counter-reset: seo-step; }
.seo-page .section > ol.seo-checks li { counter-increment: seo-step; }
.seo-page .section > ol.seo-checks li::before { content: counter(seo-step); top: 3px; }
.seo-facts { width: 100%; margin-block: 24px; border-collapse: collapse; background: var(--white); }
.seo-facts th, .seo-facts td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14px; overflow-wrap: anywhere; }
.seo-facts th { background: #f2f5f1; }
.seo-section-heading { max-width: 870px; margin-bottom: 34px; }
.seo-section-heading > p { max-width: 720px; margin-top: 18px; color: var(--muted); }
.seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.seo-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-card { min-width: 0; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 12px 35px rgba(17,35,29,.045); }
.seo-card .card-number { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 22px; border-radius: 12px; color: var(--white); background: var(--ink); font-size: 12px; font-weight: 850; }
.seo-card h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.16; letter-spacing: -.025em; }
.seo-card p { margin: 0; color: var(--muted); font-size: 14px; }
.seo-card p + p { margin-top: 12px; }
.seo-card ul { margin: 16px 0 0; padding-left: 19px; color: var(--muted); }
.seo-card li + li { margin-top: 8px; }
.seo-callout { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 42px; padding: clamp(28px, 5vw, 56px); color: var(--white); background: var(--ink); border-radius: 26px; }
.seo-callout h2 { margin: 10px 0 14px; color: var(--white); font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; line-height: 1.04; }
.seo-callout p { margin: 0; color: rgba(255,255,255,.63); }
.seo-callout .hero-cta { justify-content: flex-start; }
.seo-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.seo-table { width: 100%; min-width: 660px; border-collapse: collapse; }
.seo-table th, .seo-table td { padding: 17px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; }
.seo-table th { color: var(--text); background: #f2f5f1; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.seo-table td { color: var(--muted); }
.seo-table tr:last-child td { border-bottom: 0; }
.seo-table strong { color: var(--text); }
.seo-evidence { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.seo-evidence blockquote { margin: 0; padding: clamp(26px, 4vw, 44px); border-radius: 24px; color: var(--white); background: var(--ink); }
.seo-evidence blockquote p { margin: 0; font-size: clamp(20px, 2.5vw, 30px); line-height: 1.35; letter-spacing: -.025em; }
.seo-evidence blockquote footer { margin-top: 20px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.seo-note { margin-top: 22px; padding: 18px 20px; border: 1px solid rgba(169, 119, 43, .45); color: var(--muted); background: #f5f3e9; border-radius: 12px; font-size: 13px; }
.seo-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.seo-related a { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--white); font-size: 12px; font-weight: 750; text-decoration: none; }
.seo-related a:hover { border-color: var(--gold-deep); }
.seo-page .faq details p { font-size: 13px; }

@media (max-width: 920px) {
  .seo-grid, .seo-grid.two, .seo-evidence, .seo-callout { grid-template-columns: 1fr; }
  .seo-page .nav-links { display: none; }
}

@media (max-width: 640px) {
  .seo-page .nav-shell, .seo-breadcrumbs { width: min(calc(100% - 28px), var(--max)); }
  .seo-hero { padding-top: 34px; }
  .seo-grid { gap: 12px; }
  .seo-card { border-radius: 16px; }
  .seo-callout { padding: 28px 22px; border-radius: 20px; }
}
.seo-breadcrumbs .seo-lang-links::before { content: none; }
/* 019: product screenshots keep their aspect ratio at every width. Tall phone
   captures are capped so one screenshot never fills several screens. */
.seo-page figure { margin: 28px 0 0; }
.seo-page figure picture { display: block; }
.seo-page figure img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 14px; }
.seo-page figure img[width="390"] { width: min(100%, 332px); }
.seo-page figure figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
