/* Site-owned reading surface. Editor styles and synced guide content stay separate. */
.seo-guide {
  --navy:#14243a; --ink:#24364a; --muted:#566577; --line:#dce3e7; --paper:#f4f6f6; --orange:#ee6230; --radius:14px;
  --guide-sidebar:184px; --guide-gutter:clamp(28px,4vw,64px); --guide-text:64ch;
  --guide-chapter-space:clamp(48px,5vw,72px);
  box-sizing:border-box; width:100%; max-width:1464px; margin:0 auto;
  padding:clamp(48px,6vw,88px) clamp(22px,4.6vw,72px);
  background:#fff; color:#24364a; font-family:Manrope,'Segoe UI',sans-serif; font-size:16px; line-height:1.75;
  border-top:1px solid #dce3e7; scroll-margin-top:110px;
}
.seo-guide * { box-sizing:border-box; }
.seo-guide :is(h1,h2,h3,h4) { color:#14243a; font-family:inherit; font-weight:700; text-wrap:balance; }
.seo-guide .seo-crumbs { margin-bottom:36px; font-size:13px; line-height:1.6; color:#566577; gap:8px 12px; }
.seo-guide .seo-crumbs a { display:inline-flex; align-items:center; min-height:36px; text-decoration:none; }
.seo-guide .guide-story-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); max-width:none; gap:var(--guide-gutter); align-items:center; margin-bottom:64px; }
.seo-guide .guide-story-heading :is(h1,h2) { max-width:22ch; margin:14px 0 24px; font-size:clamp(30px,3.4vw,48px); line-height:1.12; letter-spacing:-.045em; }
.seo-guide .guide-eyebrow { color:#526879; font-size:11px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; }
.seo-guide .seo-lead { max-width:58ch; color:#566577; font-size:17px; font-weight:400; line-height:1.75; }
.seo-guide a { text-underline-offset:4px; }
.seo-guide a.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; width:fit-content; min-height:48px; padding:12px 20px; border:1px solid #cbd5dc; border-radius:8px; background:#fff; color:#14243a; font:650 14px/1.45 Manrope,'Segoe UI',sans-serif; text-decoration:none; transition:background .2s,border-color .2s; }
.seo-guide a.button:hover { border-color:#71869a; background:#f1f4f4; }
.seo-guide a.button.primary { background:#cf4a21; border-color:#cf4a21; color:#fff; }
.seo-guide a.button.primary:hover { background:#b9431e; border-color:#b9431e; }
.seo-guide .guide-start-link { margin-top:26px; }
.seo-guide .guide-picture { margin:0; min-width:0; }
.seo-guide .guide-picture>a { display:block; border:1px solid #dce3e7; border-radius:14px; overflow:hidden; background:#f4f6f6; cursor:zoom-in; }
.seo-guide .guide-picture img { display:block; width:100%; height:auto; max-height:460px; object-fit:contain; }
.seo-guide .guide-editorial-result img { max-height:380px; }
.seo-guide .guide-picture figcaption,.seo-guide .guide-screenshot figcaption { margin:12px 0 0; color:#526879; font-size:12px; line-height:1.65; }
.seo-guide .guide-story-layout { display:grid; grid-template-columns:var(--guide-sidebar) minmax(0,1fr); gap:var(--guide-gutter); align-items:start; }
.seo-guide .guide-story-nav { position:sticky; top:112px; margin:0; padding:4px 20px 4px 0; border:0; border-right:1px solid #dce3e7; }
.seo-guide .guide-story-nav>span { margin:0 0 16px; color:#526879; font-size:12px; }
.seo-guide .guide-story-nav ol { display:grid; gap:3px; margin:0; padding:0; list-style:none; }
.seo-guide .guide-story-nav li { margin:0; }
.seo-guide .guide-story-nav a { display:flex; align-items:center; min-height:42px; padding:7px 0; color:#566577; font-size:13px; line-height:1.5; text-decoration:none; }
.seo-guide .guide-story-nav a:is(:hover,[aria-current]) { color:#14243a; font-weight:700; }
.seo-guide .guide-story-nav a { position:relative; }
.seo-guide .guide-story-nav a[aria-current]::after { content:''; position:absolute; right:-21px; top:10px; bottom:10px; width:2px; background:#ee6230; }
.seo-guide .guide-story-body { min-width:0; }
.seo-guide .guide-chapter { margin:0 0 var(--guide-chapter-space); scroll-margin-top:112px; }
.seo-guide .guide-chapter>h2 { margin:0 0 24px; font-size:clamp(24px,2.3vw,32px); line-height:1.25; letter-spacing:-.035em; }
.seo-guide .guide-chapter p { max-width:var(--guide-text); font-size:15px; line-height:1.8; }
.seo-guide .guide-quickstart { display:grid; gap:14px; padding-left:23px; margin:22px 0 28px; }
.seo-guide .guide-quickstart li { margin:0; padding-left:8px; font-size:15px; }
.seo-guide .guide-preparation { padding-left:23px; }
.seo-guide .guide-preparation li { padding-left:8px; }
.seo-guide .guide-walkthrough { list-style:none; padding:0; }
.seo-guide .guide-story-step { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:32px; padding-top:28px; }
.seo-guide .guide-story-step--text { grid-template-columns:1fr; }
.seo-guide .guide-story-step+.guide-story-step { margin-top:32px; }
.seo-guide .guide-story-step :is(h3,h4) { margin:10px 0 18px; font-size:21px; line-height:1.35; }
.seo-guide .guide-story-step .guide-picture { margin-top:0; }
.seo-guide .guide-check { margin-top:20px; padding:16px 18px; border:0; border-radius:10px; background:#f1f4f4; color:#42566a; }
.seo-guide .guide-check strong { font-weight:700; color:#14243a; }
.seo-guide details { border-radius:0; box-shadow:none; background:transparent; }
.seo-guide :is(.guide-disclosure,.guide-product-reference,.seo-faq details) { margin-block:20px 0; padding:0; border:0; border-top:1px solid #dce3e7; border-bottom:1px solid #dce3e7; }
.seo-guide summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:18px 2px; list-style:none; color:#14243a; font-size:15px; font-weight:650; line-height:1.55; cursor:pointer; }
.seo-guide summary::-webkit-details-marker { display:none; }
.seo-guide summary::marker { content:''; }
.seo-guide summary::after { content:'+'; display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border:1px solid #d4dee4; border-radius:50%; color:#4a5f73; font-size:22px; font-weight:400; line-height:1; transition:background .2s; }
.seo-guide details[open]>summary::after { content:'−'; background:#f1f4f4; }
.seo-guide summary:hover { color:#b9431e; }
.seo-guide :is(.guide-disclosure,.seo-faq details)>p { margin:0 48px 22px 2px; color:#566577; font-size:15px; line-height:1.8; }
.seo-guide .guide-settings { padding:0 0 20px; }
.seo-guide .guide-settings>div { padding:20px 2px; }
.seo-guide .guide-settings dt { font-size:15px; font-weight:700; }
.seo-guide .guide-editorial-picture--settings { max-width:560px; margin-top:28px; }
.seo-guide .guide-problems>div { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:28px; padding:24px 0; }
.seo-guide .guide-problems dt { font-size:15px; line-height:1.65; }
.seo-guide .guide-problems dd { font-size:15px; line-height:1.8; }
.seo-guide .guide-story-order { padding-top:32px; border-top:1px solid #dce3e7; }
.seo-guide .guide-order-choices { gap:32px; margin:24px 0 28px; }
.seo-guide .guide-order-choices :is(h3,h4) { font-size:19px; }
.seo-guide .guide-story-credit { margin-top:32px; padding-top:20px; }
.seo-guide .guide-story-credit p { font-size:12px; line-height:1.7; color:#526879; }
.seo-guide .guide-product-reference { margin-top:48px; }
.seo-guide .guide-product-reference>summary { font-size:18px; }
.seo-guide .guide-product-reference>section { margin-block:28px; }
.seo-guide .seo-faq { max-width:none; }
.seo-guide .seo-faq details { margin:0; border-bottom:0; }
.seo-guide .seo-faq details:last-child { border-bottom:1px solid #dce3e7; }
.seo-guide .seo-faq-section>h2,.seo-guide .seo-related-section>h2 { margin:0 0 28px; font-size:clamp(24px,2.3vw,32px); }
.seo-guide .seo-notice { border:1px solid #dce3e7; border-radius:12px; padding:18px 22px; background:#f4f6f6; color:#566577; font-size:14px; }
.seo-guide :is(a,summary):focus-visible { outline:2px solid #17335a; outline-offset:4px; }
.generator-image-dialog { box-sizing:border-box; position:fixed; inset:0; width:min(1200px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; margin:auto; border:1px solid #dce3e7; border-radius:16px; background:#fff; color:#14243a; font:14px/1.6 Manrope,'Segoe UI',sans-serif; box-shadow:0 24px 80px #10182740; }
.generator-image-dialog::backdrop { background:#101827bd; backdrop-filter:blur(4px); }
.generator-image-dialog .generator-image-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 20px; border-bottom:1px solid #dce3e7; }
.generator-image-dialog .generator-image-bar p { margin:0; color:#566577; }
.generator-image-dialog button { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border:1px solid #cbd5dc; border-radius:50%; background:#fff; color:#14243a; font:28px/1 Manrope,'Segoe UI',sans-serif; cursor:pointer; }
.generator-image-dialog button:hover { background:#f1f4f4; }
.generator-image-dialog button:focus-visible { outline:3px solid #17335a; outline-offset:3px; }
.generator-image-dialog img { display:block; max-width:100%; width:auto; height:auto; max-height:calc(100dvh - 144px); margin:auto; object-fit:contain; }
body:has(.generator-image-dialog[open]) { overflow:hidden; }
@media(max-width:1100px) {
  .seo-guide { --guide-sidebar:152px; --guide-gutter:28px; }
  .seo-guide .guide-story-step { grid-template-columns:1fr; }
  .seo-guide .guide-story-step .guide-picture { max-width:600px; }
}
@media(max-width:760px) {
  .seo-guide { padding-block:40px 48px; --guide-chapter-space:44px; }
  .seo-guide .guide-story-intro { grid-template-columns:1fr; gap:28px; margin-bottom:36px; }
  .seo-guide .guide-story-heading :is(h1,h2) { margin-top:12px; font-size:32px; }
  .seo-guide .seo-lead { font-size:16px; }
  .seo-guide .guide-story-layout { grid-template-columns:1fr; gap:36px; }
  .seo-guide .guide-story-nav { position:static; border:1px solid #dce3e7; border-radius:12px; background:#f7f9fa; padding:18px; }
  .seo-guide .guide-story-nav ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 18px; }
  .seo-guide .guide-story-nav a { min-height:44px; }
  .seo-guide .guide-story-nav a[aria-current]::after { display:none; }
  .seo-guide :is(.guide-product-reference,.seo-faq-section,.seo-related-section) { margin-left:0; }
  .seo-guide .guide-problems>div { grid-template-columns:1fr; gap:10px; }
  .seo-guide .guide-order-choices { grid-template-columns:1fr; gap:24px; }
  .seo-guide .guide-chapter { scroll-margin-top:96px; }
  .seo-guide :is(.guide-disclosure,.seo-faq details)>p { margin-right:12px; }
  .seo-guide .seo-facts,.seo-guide .seo-steps { grid-template-columns:1fr; }
  .generator-image-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:12px; }
  .generator-image-dialog .generator-image-bar { padding:12px; gap:12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .seo-guide * { scroll-behavior:auto!important; transition:none!important; } }
@media print { .seo-guide .guide-story-nav,.generator-image-dialog { display:none; } .seo-guide .guide-story-layout { display:block; } }