/* SEO section: landing pages, comparisons, blog. Laid out from the gpt-image-2 concepts dizayn\gpt\landing.png, blog.png, article.png
   (briefs dizayn\brief\12-14). Colours are the tokens of site.css only. */

/* breadcrumbs */
.bc ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:var(--muted)}
.bc li+li::before{content:"/";margin:0 8px;color:var(--line)}
.bc a{color:var(--muted);text-decoration:none}
.bc a:hover{color:var(--ink);text-decoration:underline}
.bc [aria-current]{color:var(--ink-2)}
.bc-dark ol,.bc-dark a{color:var(--on-dark-3)}
.bc-dark [aria-current]{color:var(--on-dark-2)}
.bc-dark li+li::before{color:var(--navy-line)}
.bc-dark a:hover{color:#fff}

/* tags, small bits */
.tag{display:inline-block;align-self:flex-start;background:var(--lime-soft);color:var(--r0);font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 9px;border-radius:7px;text-decoration:none}
.more{color:var(--blue);font-weight:800;font-size:15px}
.hl-g{color:var(--r0)}
.byline{font-size:13.5px;color:var(--muted)}
.byline i{font-style:normal;color:var(--line);margin:0 6px}

/* landing */
.seo-hero{padding-top:28px}
.seo-h1{font-size:clamp(38px,5.2vw,64px);margin-bottom:14px}
.seo-lead{margin:0 0 22px;max-width:560px}
.seo-alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 0 0}
.seo-get{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.seo-get-i{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.seo-get-i .sym{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:var(--navy);background:var(--lime-soft)}
.seo-get-i h3{font-size:17px;margin:2px 0 6px}
.seo-get-i p{margin:0;font-size:14.5px;color:var(--ink-2)}
.seo-ex{background:#fff;color:var(--ink);border-radius:var(--radius);padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.seo-ex-head{font-size:17px;margin-bottom:12px}
.seo-ex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.seo-ex-c{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.seo-ex-k{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.seo-ex-k .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12.5px;background:var(--blue-soft);color:var(--blue);flex:none}
.seo-ex-h{font-weight:700;font-size:15px;overflow-wrap:anywhere}
.seo-ex-r{display:flex;gap:10px;align-items:flex-start;margin-top:auto;padding-top:8px;border-top:1px solid var(--line-2);color:var(--ink-2)}
.dark .seo-ex .muted{color:var(--muted)}
.seo-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-right:10px;font-size:16px;vertical-align:middle;background:var(--r0-bg);color:var(--r0)}
.seo-num.n2{background:var(--blue-soft);color:var(--blue)}.seo-num.n3{background:var(--r1-bg);color:var(--r1)}
.seo-not{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.seo-not-i{background:#fff;border:1px solid var(--line);border-top:3px solid var(--r3);border-radius:var(--radius);padding:18px}
.seo-not-i b{display:block;font-size:16.5px;margin-bottom:6px}
.seo-not-i p{margin:0;font-size:14.5px;color:var(--ink-2)}
.seo-faq{display:grid;grid-template-columns:1fr 1.7fr;gap:32px;align-items:start}
.seo-faq .faq{grid-template-columns:1fr}
.seo-faq h2{margin-bottom:10px}
.seo-textsec{padding-top:24px}
.seo-srcsec{padding:0 0 24px}
.seo-relsec{padding-top:24px}
.seo-prose{max-width:820px}

/* long text */
.prose{font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:clamp(24px,2.6vw,30px);color:var(--ink);margin:40px 0 12px;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;color:var(--ink);margin:28px 0 8px;scroll-margin-top:90px}
.prose p{margin:0 0 16px}
.prose a{color:var(--blue);text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:6px 0}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 20px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.prose thead th{color:var(--ink);font-size:14px}
.prose tr:last-child td{border-bottom:0}
.prose ol.steps{list-style:none;padding:0;counter-reset:st;display:grid;gap:10px}
.prose ol.steps>li{counter-increment:st;position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 62px;margin:0}
.prose ol.steps>li::before{content:counter(st);position:absolute;left:16px;top:13px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;background:var(--blue-soft);color:var(--blue)}
.prose ol.steps>li:nth-child(5n+2)::before{background:var(--r0-bg);color:var(--r0)}
.prose ol.steps>li:nth-child(5n+3)::before{background:var(--r1-bg);color:var(--r1)}
.prose ol.steps>li:nth-child(5n+4)::before{background:var(--r2-bg);color:var(--r2)}
.prose ol.steps>li:nth-child(5n+5)::before{background:var(--r3-bg);color:var(--r3)}
.prose ol.steps b{display:block;color:var(--ink)}
.prose .nbox,.prose .means,.prose .quote{border-radius:var(--radius);padding:16px 20px;margin:20px 0}
.prose .nbox{background:var(--blue-soft);color:var(--ink)}
.prose .means{background:var(--lime-soft);color:var(--ink)}
.prose .means>b:first-child,.prose .nbox>b:first-child{display:block;font-size:17px;margin-bottom:4px}
.prose .nbox p:last-child,.prose .means p:last-child{margin-bottom:0}
.prose blockquote.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);margin:20px 0;color:var(--ink)}
.prose blockquote.quote p{margin:0 0 6px;font-weight:600}
.prose blockquote.quote cite{font-style:normal;font-size:14px;color:var(--muted)}
.prose figure{margin:24px 0}
.prose figure img{border-radius:var(--radius);display:block;width:100%;height:auto}
.prose figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}

/* sources, related */
.srcs h2{font-size:24px;margin:36px 0 12px;color:var(--ink)}
.srcs ol{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14.5px}
.srcs li{display:grid;grid-template-columns:1fr auto auto;gap:4px 18px;padding:10px 14px;border-top:1px solid var(--line-2);margin:0}
.srcs li:first-child{border-top:0}
.srcs .dom,.srcs .chk{color:var(--muted);font-size:13px;white-space:nowrap}
.srcs a{font-weight:700}
.rel-head{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-bottom:18px}
.rel-head p{margin:0}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rel-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-decoration:none;color:var(--ink)}
.rel-card:hover{border-color:var(--blue)}
.rel-card img{border-radius:10px;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.rel-card b{font-size:16px;line-height:1.3}
.rel-card .more{margin-top:auto;font-size:14px}

/* blog index */
.blog-hero{padding:28px 0 20px}
.blog-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.blog-h1{font-size:clamp(44px,6vw,76px);margin-bottom:14px}
.blog-hero .lead{margin:0 0 20px;max-width:560px}
.blog-hero-img{width:100%;max-width:520px;height:auto;justify-self:end;border-radius:var(--radius)}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;font-weight:700;font-size:14.5px;color:var(--ink-2)}
.cats a[aria-current]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.cats a:hover{border-color:var(--ink-2)}
.blog-list{padding-top:20px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-decoration:none;color:var(--ink)}
.feat img{width:100%;height:auto;border-radius:12px;aspect-ratio:3/2;object-fit:cover}
.feat h2{font-size:clamp(24px,2.6vw,32px);margin:10px 0}
.feat p{margin:0 0 12px}
.feat:hover h2,.card:hover h3,.vs-item:hover h2{text-decoration:underline}
.blog-h2{font-size:clamp(26px,3vw,36px);margin:48px 0 20px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 16px;text-decoration:none;color:var(--ink)}
.card img{width:100%;height:auto;border-radius:10px;aspect-ratio:3/2;object-fit:cover}
.card .tag{margin-top:4px}
.card h3{font-size:18px;line-height:1.25}
.card p{margin:0}
.card .byline{margin-top:auto;font-size:12.5px}
.blog-cta .cta2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.blog-cta .lead{margin:12px 0 0}
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.topic{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--ink)}
.topic b{font-size:17px}
.topic .arrow{margin-top:auto;color:var(--blue);align-self:flex-end}
.vs-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs-item{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink)}
.vs-item h2{font-size:22px}
.vs-item p{margin:0}

/* article */
.art-hero{padding:28px 0 8px}
.art-hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.art-hero .tag{margin-bottom:12px}
.art-h1{font-size:clamp(34px,4.4vw,54px);margin-bottom:14px}
.art-hero .lead{margin:0 0 14px}
.art-hero-img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:3/2;object-fit:cover}
.art-sec{padding-top:32px}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.art-body{max-width:760px;min-width:0}
.art-side{position:sticky;top:88px;display:grid;gap:16px}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.toc b,.side-rel b{display:block;margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0;font-size:14px}
.toc li{border-left:2px solid var(--line-2)}
.toc a{display:block;padding:6px 0 6px 12px;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--blue);border-color:var(--blue)}
.toc-m{display:none}
.side-cta{background:color-mix(in srgb,var(--r2-bg) 55%,#fff);border-radius:var(--radius);padding:18px}
.side-cta b{font-size:19px}
.side-cta p{margin:6px 0 12px}
.side-cta .btn{width:100%}
.side-cta .tiny{margin:8px 0 0;text-align:center}
.side-rel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;font-size:14.5px}
.side-rel a{display:block;padding:7px 0;border-top:1px solid var(--line-2);color:var(--blue);text-decoration:none;font-weight:600}
.side-rel a:first-of-type{border-top:0}
.art-cta{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:center;background:var(--blue-soft);border-radius:var(--radius);padding:18px;margin:28px 0}
.art-cta b{font-size:19px;color:var(--ink)}
.art-cta p{margin:6px 0 0}
.art-cta .checkform{box-shadow:none;max-width:none}
.art-faq{margin-top:36px}
.art-faq h2{font-size:24px;margin:0 0 12px;color:var(--ink)}
.srcs+.art-faq,.prose .srcs{margin-top:36px}
.faq-one{grid-template-columns:1fr}
.faq-one details p{font-size:15.5px}

/* footer: service links */
.foot .foot-seo{flex-basis:100%;display:flex;gap:8px 16px;flex-wrap:wrap;font-size:13.5px;padding-top:12px;border-top:1px solid var(--navy-line)}
.foot .foot-seo a{color:var(--on-dark-3)}

@media (max-width:1180px){
  .top .wrap{gap:18px}.nav{gap:16px}
}
@media (max-width:1080px){
  .seo-ex-grid,.rel-grid,.topics,.seo-not{grid-template-columns:1fr 1fr}
  .art-grid{grid-template-columns:minmax(0,1fr) 260px;gap:32px}
}
@media (max-width:900px){
  .seo-get,.cards{grid-template-columns:1fr 1fr}
  .seo-faq,.blog-hero-grid,.art-hero-grid,.feat,.blog-cta .cta2,.art-grid,.art-cta,.vs-list{grid-template-columns:1fr}
  .blog-hero-img{display:none}
  .art-side{position:static}
  .art-side .toc{display:none}
  .toc-m{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:22px;font-size:15px}
  .toc-m summary{font-weight:800;cursor:pointer;color:var(--ink)}
  .toc-m ol{margin:8px 0 0;padding-left:20px}
  .art-hero-img{max-height:none}
}
@media (max-width:600px){
  .seo-get,.cards,.seo-ex-grid,.rel-grid,.topics,.seo-not{grid-template-columns:1fr}
  .seo-alt .btn{width:100%}
  .srcs li{grid-template-columns:1fr;gap:2px}
  .prose{font-size:16.5px}
  .prose ol.steps>li{padding-left:56px}
  .feat{padding:12px}
  .blog-h1{font-size:44px}
}