/* Shared Geist, brand tokens, containers, buttons, header and footer live in site.css. */
.seo-landing-page { --font-geist: "Geist"; background: #fff; }
.seo-landing { --seo-space: 76px; }
.seo-landing *, .seo-landing *::before, .seo-landing *::after { box-sizing: border-box; }
.seo-landing :where(h1, h2, h3) { color: var(--purple); text-wrap: balance; }
.seo-landing h2 { margin: 12px 0 20px; font-size: clamp(28px, 3vw, 39px); line-height: 1.2; letter-spacing: -1.4px; }
.seo-landing h3 { margin: 0 0 13px; font-size: 20px; line-height: 1.4; letter-spacing: -.5px; }
.seo-landing figure { min-width: 0; margin: 0; }
.seo-landing figure img { display: block; width: 100%; height: auto; }
.seo-landing figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.seo-landing .kicker { font-weight: 600; }
.seo-landing :where(a, summary):focus-visible { outline: 3px solid var(--purple-2); outline-offset: 5px; }
.seo-landing section, .seo-anchor { scroll-margin-top: 100px; }
.seo-anchor { display: block; }
.seo-icon { flex: none; width: 18px; height: 18px; }
.seo-copy { color: var(--muted); font-size: 16px; line-height: 1.8; }
.seo-copy p { margin: 0 0 18px; }
.seo-copy p:last-child { margin-bottom: 0; }
.seo-copy strong { color: var(--ink); font-weight: 600; }
.seo-copy a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.seo-copy ul { padding-left: 20px; }
.seo-text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--purple); font-size: 14px; font-weight: 600; }
.seo-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.seo-skip { position: fixed; top: 10px; left: 16px; z-index: 1100; padding: 14px 20px; border-radius: 12px; background: var(--purple); color: white; transform: translateY(-150%); }
.seo-skip:focus { transform: translateY(0); }
.seo-hero { padding-block: 26px 64px; background: #fff; }
.seo-hero .article-breadcrumbs { margin: 0 0 34px; color: var(--muted); font-size: 12px; }
.seo-hero .article-breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seo-hero .article-breadcrumbs li:not(:last-child)::after { content: "/"; padding-left: 8px; color: #b7afc4; }
.seo-hero .article-breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.seo-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; }
.seo-hero .hero-copy { min-width: 0; }
.seo-hero .eyebrow { padding: 8px 13px; background: var(--lav); font-size: 11px; font-weight: 600; border-radius: 999px; }
.seo-hero h1 { margin: 23px 0; font-size: clamp(36px, 3.8vw, 54px); line-height: 1.1; letter-spacing: -2.2px; }
.seo-hero .seo-lead { max-width: 560px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.seo-hero-actions { gap: 12px; margin-top: 26px; }
.seo-landing .button { min-height: 48px; box-shadow: none; font-size: 13px; }
.seo-hero-visual { min-width: 0; }
.seo-hero-photo img { aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 26px; }
.seo-hero-photo figcaption { text-align: center; }
.seo-hero-preview { display: block; margin-top: 14px; text-align: center; }
.seo-hero-preview small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 6px; }
.seo-hero-preview strong { display: block; color: var(--purple); font-size: 15px; line-height: 1.4; }
.seo-hero-preview .seo-text-link { min-height: 30px; font-size: 12px; }
.seo-hero-visual--plan .seo-hero-photo img { aspect-ratio: 16 / 11; }
.seo-hero-visual--plan .seo-hero-photo figcaption { margin-bottom: 12px; }
.seo-hero-visual--activity .seo-hero-photo img { aspect-ratio: 1.15; }
.seo-hero-visual--home .seo-hero-photo img { object-position: right center; }
.seo-switcher { padding-block: 18px; border-block: 1px solid var(--line); }
.seo-switcher-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.seo-switcher-inner > span { color: var(--muted); font-size: 12px; }
.seo-switcher-inner > div { display: flex; flex-wrap: wrap; gap: 10px; }
.seo-switcher a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--purple); font-size: 13px; font-weight: 600; }
.seo-switcher a small { color: var(--muted); font-size: 11px; font-weight: 400; }
.seo-switcher a > span { display: flex; align-items: center; gap: 14px; }
.seo-switcher a:has(img) { padding: 8px 18px 8px 8px; border-radius: 14px; }
.seo-switcher a:has(img) > span { display: block; }
.seo-switcher a:has(img) small { display: block; margin-top: 4px; }
.seo-switcher a img { display: block; width: 64px; height: 42px; object-fit: cover; border-radius: 7px; }
.seo-switcher a[aria-current="page"] { background: var(--purple); border-color: var(--purple); color: #fff; }
.seo-switcher a[aria-current="page"] small { color: #e4d9f6; }
.seo-section { position: relative; padding-block: var(--seo-space); }
.seo-section .section-heading { max-width: 780px; margin-bottom: 36px; }
.seo-section .section-heading.centered { margin-inline: auto; }
.seo-tone--lav { background: var(--lav); }
.seo-tone--cream { background: var(--cream); }
.seo-section--intro { padding-block: 44px; }
.seo-intro-grid, .seo-note-grid { display: grid; grid-template-columns: .85fr 1.5fr; gap: 70px; align-items: start; }
.seo-intro-grid h2, .seo-note-grid h2 { margin: 0; font-size: 28px; }
.seo-section--note { border-top: 1px solid var(--line); padding-block: 44px; }
.seo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.seo-split-copy, .seo-split-visual { min-width: 0; }
.seo-section--reverse .seo-split-copy { order: 2; }
.seo-split-visual img { border: 1px solid var(--line); border-radius: 24px; }
.seo-section--split .seo-split-visual img, .seo-section--story .seo-split-visual img { aspect-ratio: 4 / 3; object-fit: cover; }
.seo-landing .seo-section--product .seo-split-visual img { object-fit: contain; }
.seo-cards, .seo-steps, .seo-principles, .seo-concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.seo-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.seo-cards figure img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; border: 1px solid var(--line); }
.seo-cards .seo-discovery-copy { padding: 22px 4px 0; }
.seo-cards h3 a { display: flex; justify-content: space-between; gap: 10px; min-height: 44px; align-items: center; }
.seo-cards h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.seo-cards .seo-copy, .seo-steps .seo-copy, .seo-principles .seo-copy, .seo-concepts .seo-copy { font-size: 15px; }
.seo-steps figure img { aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--line); border-radius: 20px; }
.seo-steps .seo-discovery-copy { padding-top: 22px; }
.seo-step-number { display: block; color: var(--purple-2); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.seo-principles .seo-discovery-item { border-top: 1px solid #d9cde9; padding-top: 24px; }
.seo-concepts .seo-discovery-item { background: #fff; padding: 26px; border: 1px solid var(--line); border-radius: 20px; }
.seo-timeline-grid { display: grid; grid-template-columns: .8fr 1.4fr; align-items: start; gap: 64px; }
.seo-timeline-visual img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.seo-timeline-visual svg { display: block; width: 100%; height: auto; background: var(--cream); border-radius: 24px; }
.seo-timeline { margin: 0; padding: 0; list-style: none; }
.seo-timeline li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 24px; position: relative; }
.seo-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 3px; width: 1px; background: var(--line); }
.seo-timeline .seo-step-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.seo-timeline h3 { font-size: 18px; margin: 4px 0 8px; }
.seo-timeline .seo-copy { font-size: 15px; }
.seo-section-note { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.seo-games { display: grid; gap: 36px; }
.seo-games .seo-activity { display: grid; grid-template-columns: .8fr 1.4fr; gap: 42px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: #fff; align-items: start; }
.seo-games .seo-activity:nth-child(2) { grid-template-columns: 1.4fr .8fr; }
.seo-games .seo-activity:nth-child(2) .seo-activity-visual { order: 2; }
.seo-activity-visual svg { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--cream); }
.seo-activity-visual figcaption { text-align: center; }
.seo-activity-copy .seo-copy { font-size: 15px; }
.seo-activity-more { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.seo-activity-more summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 12px; color: var(--purple); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.seo-activity-more summary::-webkit-details-marker { display: none; }
.seo-activity-more[open] summary { margin-bottom: 12px; }
.seo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.seo-gallery .seo-activity-copy { padding: 24px 2px 0; }
.seo-final { padding-block: 64px; }
.seo-cta-card { min-height: 240px; padding: 44px 48px; grid-template-columns: 1.5fr auto; gap: 48px; background: var(--purple); }
.seo-cta-card h2 { color: #fff; font-size: 32px; }
.seo-cta-card .seo-copy { color: #e5dcf2; }
.seo-cta-card .button { background: #fff; border-color: #fff; color: var(--purple); max-width: 300px; text-align: center; }
.seo-faq { padding-top: 16px; }
.seo-faq-grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: 64px; }
.seo-faq details { border-bottom: 1px solid var(--line); }
.seo-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 74px; padding-block: 18px; cursor: pointer; list-style: none; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq h3 { font-size: 17px; margin: 0; }
.seo-faq summary > span { color: var(--purple-2); font-size: 24px; flex: none; }
.seo-faq details[open] summary > span, .seo-activity-more[open] summary > span { transform: rotate(45deg); }
.seo-faq details > .seo-copy { padding-bottom: 22px; font-size: 15px; }
.seo-related { padding-block: 38px 54px; border-top: 1px solid var(--line); }
.seo-related h2 { font-size: 22px; letter-spacing: -.6px; margin-top: 0; }
.seo-related-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
.seo-related-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--purple); font-size: 14px; }
.seo-disclaimer { margin-top: 24px; color: var(--muted); font-size: 12px; line-height: 1.7; }
@media (max-width: 1024px) {
  .seo-hero-grid { gap: 32px; }
  .seo-hero h1 { font-size: 40px; }
  .seo-split, .seo-timeline-grid, .seo-faq-grid { gap: 36px; }
  .seo-cards, .seo-steps, .seo-principles, .seo-concepts, .seo-gallery { gap: 20px; }
  .seo-switcher-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .seo-cta-card { grid-template-columns: 1fr; gap: 24px; }
  .seo-games .seo-activity, .seo-games .seo-activity:nth-child(2) { grid-template-columns: .8fr 1.4fr; gap: 24px; padding: 24px; }
  .seo-games .seo-activity:nth-child(2) .seo-activity-visual { order: 0; }
}
@media (max-width: 760px) {
  .seo-landing { --seo-space: 48px; }
  .seo-hero { padding-block: 16px 38px; }
  .seo-hero .article-breadcrumbs { margin-bottom: 22px; font-size: 11px; }
  .seo-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .seo-hero h1 { font-size: clamp(32px, 8vw, 42px); letter-spacing: -1.5px; }
  .seo-hero .seo-lead { font-size: 15px; }
  .seo-hero-actions { flex-direction: column; align-items: stretch; }
  .seo-hero-actions .button { text-align: center; padding: 14px 16px; }
  .seo-hero-photo img, .seo-hero-visual--activity .seo-hero-photo img { aspect-ratio: 4 / 3; border-radius: 20px; }
  .seo-hero-preview strong { font-size: 13px; }
  .seo-switcher a { padding: 8px 13px; gap: 8px; font-size: 12px; }
  .seo-switcher a small { font-size: 10px; }
  .seo-switcher-inner > div { width: 100%; }
  .seo-switcher a > span { gap: 8px; }
  .seo-switcher a:has(img) { flex: 1; flex-direction: column; padding: 8px; gap: 7px; text-align: center; }
  .seo-intro-grid, .seo-note-grid, .seo-split, .seo-timeline-grid, .seo-faq-grid { grid-template-columns: 1fr; gap: 26px; }
  .seo-landing h2 { font-size: 28px; letter-spacing: -.9px; }
  .seo-intro-grid h2, .seo-note-grid h2 { font-size: 25px; }
  .seo-copy { font-size: 15px; }
  .seo-section--reverse .seo-split-copy { order: 0; }
  .seo-section .section-heading { margin-bottom: 28px; }
  .seo-cards, .seo-steps, .seo-principles, .seo-concepts, .seo-gallery, .seo-grid--four { grid-template-columns: 1fr; gap: 28px; }
  .seo-cards .seo-discovery-item { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; }
  .seo-cards figure img { aspect-ratio: 1; border-radius: 14px; }
  .seo-cards .seo-discovery-copy { padding: 0; }
  .seo-cards h3 { font-size: 18px; margin-bottom: 8px; }
  .seo-cards h3 a { min-height: 38px; }
  .seo-cards .seo-copy { font-size: 14px; }
  .seo-grid--four .seo-discovery-item { display: block; }
  .seo-grid--four figure img { aspect-ratio: 16 / 9; }
  .seo-grid--four .seo-discovery-copy { padding-top: 18px; }
  .seo-steps .seo-discovery-item { display: grid; grid-template-columns: 110px 1fr; gap: 18px; }
  .seo-steps figure img { aspect-ratio: 1; border-radius: 14px; }
  .seo-steps .seo-discovery-copy { padding: 0; }
  .seo-steps h3 { font-size: 18px; }
  .seo-steps .seo-step-number { margin-bottom: 8px; }
  .seo-timeline-visual { max-width: 560px; }
  .seo-timeline-visual img { aspect-ratio: 16 / 9; }
  .seo-games .seo-activity, .seo-games .seo-activity:nth-child(2) { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
  .seo-activity-visual { max-width: 460px; }
  .seo-activity-visual svg { max-height: 260px; }
  .seo-final { padding-block: 40px; }
  .seo-cta-card { padding: 30px 24px; border-radius: 22px; }
  .seo-cta-card h2 { font-size: 28px; }
  .seo-cta-card .button { max-width: none; }
  .seo-related-links { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .seo-cards .seo-discovery-item, .seo-steps .seo-discovery-item { grid-template-columns: 88px 1fr; gap: 14px; }
}