/* Hendler Article System · service-page master · 2026-10-12
   Source design: production Google Ads Management.
   Informational content keeps its own semantics, but uses the same width,
   palette, typography rhythm and section language as the service page. */

.article-page{
  --article-bg:#07100d;
  --article-panel:#08130f;
  --article-line:rgba(255,255,255,.085);
  --article-text:#f7faf8;
  --article-muted:#aeb8b3;
  --article-accent:#7ee7ad;
  --article-accent-2:#42c786;
  margin:0;
  background:var(--article-bg);
  color:var(--article-text);
}
body.article-page.light-theme{
  --article-bg:#f5f6f3;
  --article-panel:#ffffff;
  --article-line:#dce2dd;
  --article-text:#18211d;
  --article-muted:#66726c;
  --article-accent:#2e9f68;
  --article-accent-2:#2e9f68;
  background:var(--article-bg);
  color:var(--article-text);
}

/* Exact inner-page width used by the production Google Ads service page. */
.article-page .guide-shell{
  width:min(1180px,calc(100% - 36px));
  margin-left:auto;
  margin-right:auto;
}

/* Header follows Google Ads Management, including the compact outlined CTA. */
body.article-page:not(.light-theme) .site-header{
  background:#07100d!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
}
body.article-page:not(.light-theme) .site-header .brand-name,
body.article-page:not(.light-theme) .site-header .main-nav a{color:#f4f6f5!important}
body.article-page:not(.light-theme) .site-header .brand-sub{color:#c1c8c5!important}
body.article-page:not(.light-theme) .site-header .brand-name i{color:#7ee7ad!important}
body.article-page:not(.light-theme) .site-header .main-nav a.active:after{background:#7ee7ad!important}
body.article-page:not(.light-theme) .site-header .top-cta{
  min-height:42px!important;
  padding:0 18px!important;
  border:1px solid #42c786!important;
  border-radius:999px!important;
  background:rgba(7,16,13,.28)!important;
  color:#7ee7ad!important;
  -webkit-text-fill-color:#7ee7ad!important;
  box-shadow:none!important;
  font-size:13px!important;
}
body.article-page:not(.light-theme) .site-header .top-cta:hover{
  background:rgba(66,199,134,.08)!important;
  box-shadow:0 0 0 4px rgba(66,199,134,.06)!important;
}
.article-page .theme-toggle{filter:none}

/* Signature row. Learn → understand → apply, using the same pulse idea as pricing. */
.article-learning-flow{display:none!important}
.article-learning-banner{
  background:var(--article-bg);
}
.article-learning-banner-inner{
  display:flex;
  align-items:center;
  gap:22px;
  padding:28px 0 18px;
}
.article-learning-banner-line{
  height:1px;
  flex:1;
  background:var(--article-line);
}
.article-learning-banner p{
  flex:none;
  margin:0;
  color:var(--article-text);
  font:700 clamp(24px,2.5vw,34px)/1 Manrope,Inter,sans-serif;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.article-learning-banner p em{
  color:var(--article-text);
  font-style:normal;
  font-weight:500;
}
.article-learning-banner p span{
  display:inline-block;
  color:var(--article-text);
  transform-origin:center;
  animation:articleBuyPulseLight 2s ease-in-out infinite;
}
body.article-page:not(.light-theme) .article-learning-banner p span{
  animation-name:articleBuyPulseDark;
}
@keyframes articleBuyPulseLight{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.58;transform:scale(1.035)}
}
@keyframes articleBuyPulseDark{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.68;transform:scale(1.035)}
}

/* First view: service-page hero translated into an article title. */
.article-page .guide-hero,
body.article-page:not(.light-theme) .guide-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:calc(100vh - 180px);
  padding:54px 0 72px;
  border-bottom:1px solid var(--article-line);
  background:
    radial-gradient(circle at 50% 42%,rgba(111,198,154,.12),transparent 34%),
    var(--article-bg);
  overflow:hidden;
}
body.article-page.light-theme .guide-hero{
  background:
    radial-gradient(circle at 50% 42%,rgba(46,159,104,.08),transparent 34%),
    var(--article-bg);
}
.article-page .guide-hero:before{display:none}
.article-page .article-scroll-cue{display:none!important}
.article-hero-grid{display:block}
.article-hero-copy{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  text-align:center;
}
.article-page .guide-back{
  display:none!important;
  margin:0 0 24px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#91a099;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
}
.article-page .guide-back:hover{color:var(--article-text)}
.article-page .guide-kicker{
  display:none!important;
  margin:0 0 18px;
  padding:0;
  background:transparent;
  color:var(--article-accent-2);
  font:800 11px/1 Inter,Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.article-page .guide-kicker:before{display:none}
.article-page .guide-hero h1{
  max-width:1040px;
  margin:0 auto;
  color:var(--article-text);
  font-family:Manrope,Inter,Arial,sans-serif;
  font-size:clamp(42px,4.7vw,68px);
  line-height:1.0;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.article-page .guide-hero h1 .article-title-accent{
  color:var(--article-accent-2);
}
.article-page .guide-lead{
  max-width:820px;
  margin:36px auto 0;
  color:var(--article-muted);
  font-size:16px;
  line-height:1.68;
  font-weight:500;
}
.article-page .guide-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:34px;
  max-width:820px;
  margin:28px auto 0;
  color:var(--article-muted);
}
.article-page .guide-meta span{
  position:relative;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:13px;
}
.article-page .guide-meta span+span:before{
  content:"•";
  position:absolute;
  left:-19px;
  color:var(--article-accent);
}
.article-hero-feature{display:none!important}

/* At-a-glance becomes a flat service-style capability strip, not cards. */
.article-overview{
  padding:58px 0 40px;
  background:var(--article-bg);
  border-bottom:1px solid var(--article-line);
}
.article-overview-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:24px;
}
.article-overview-head span{
  color:var(--article-accent-2);
  font:800 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.19em;
}
.article-overview-head strong{
  color:var(--article-muted);
  font-size:13px;
  font-weight:600;
}
.article-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--article-line);
  border-bottom:1px solid var(--article-line);
}
.article-overview-card,
body.article-page:not(.light-theme) .article-overview-card{
  min-height:136px;
  padding:24px 22px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.article-overview-card+.article-overview-card{
  border-left:1px solid var(--article-line);
}
.article-overview-no,
.article-overview-card:nth-child(2) .article-overview-no,
.article-overview-card:nth-child(3) .article-overview-no,
.article-overview-card:nth-child(4) .article-overview-no,
body.article-page:not(.light-theme) .article-overview-card:nth-child(2) .article-overview-no,
body.article-page:not(.light-theme) .article-overview-card:nth-child(3) .article-overview-no,
body.article-page:not(.light-theme) .article-overview-card:nth-child(4) .article-overview-no{
  display:block;
  width:auto;
  height:auto;
  margin:0 0 20px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--article-accent);
  font:900 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.12em;
}
.article-overview-card strong{
  display:block;
  margin:0 0 7px;
  color:var(--article-text);
  font:800 16px/1.3 Manrope,Inter,sans-serif;
}
.article-overview-card p{
  margin:0;
  color:var(--article-muted);
  font-size:12.5px;
  line-height:1.55;
}

/* Reading body: one clean article column + a narrow unframed sticky rail. */
.article-page .guide-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:58px;
  padding-top:56px;
  padding-bottom:82px;
}
.article-page .guide-content{
  display:block;
  min-width:0;
  padding:0;
}
.article-page .guide-content section+section{margin-top:0}
.article-section,
.article-section:nth-of-type(3n),
body.article-page:not(.light-theme) .article-section:nth-of-type(3n){
  position:relative;
  margin:0;
  padding:40px 0 42px;
  border:0;
  border-bottom:1px solid var(--article-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.article-section:first-child{padding-top:0}
.article-section:before,
.article-section:nth-of-type(3n):before{
  content:attr(data-step);
  position:static;
  display:block;
  width:auto;
  height:auto;
  margin:0 0 14px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--article-accent);
  font:900 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.14em;
}
.article-page .guide-content .article-section h2{
  max-width:760px;
  margin:0 0 15px;
  color:var(--article-text);
  font-size:clamp(30px,3.25vw,48px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.article-page .guide-content .article-section h3{
  color:var(--article-text);
}
.article-page .guide-content .article-section p,
.article-page .guide-content .article-section li{
  color:var(--article-muted);
  font-size:15px;
  line-height:1.72;
}
.article-page .guide-content .article-section ul,
.article-page .guide-content .article-section ol{padding-left:22px}
.article-page .article-section a:link,
.article-page .article-section a:visited,
.article-page .guide-faq a:link,
.article-page .guide-faq a:visited{
  color:var(--article-accent);
  text-decoration-color:rgba(126,231,173,.38);
  text-underline-offset:3px;
  font-weight:750;
}

/* Notes / steps: same restrained panel language as service page. */
.article-page .guide-note,
body.article-page:not(.light-theme) .guide-note{
  position:relative;
  margin:24px 0 0;
  padding:20px 22px;
  border:1px solid var(--article-line);
  border-radius:16px;
  background:var(--article-panel);
  color:var(--article-text);
}
.article-page .guide-note:before{display:none}
.article-page .guide-note strong{
  display:block;
  margin-bottom:6px;
  color:var(--article-text);
}
.article-page .guide-steps{
  display:grid;
  gap:0;
  margin-top:22px;
  border-top:1px solid var(--article-line);
  border-bottom:1px solid var(--article-line);
}
.article-page .guide-step,
body.article-page:not(.light-theme) .guide-step{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  padding:17px 0;
  border:0;
  border-bottom:1px solid var(--article-line);
  border-radius:0;
  background:transparent;
  color:var(--article-text);
}
.article-page .guide-step:last-child{border-bottom:0}
.article-page .guide-step b{
  display:block;
  width:auto;
  height:auto;
  padding-top:3px;
  background:transparent;
  color:var(--article-accent);
}
.article-page .guide-step h3{margin:0 0 6px}
.article-page .guide-step p{margin:0!important;font-size:13px!important}

/* Right rail: keep the three liked blocks, but remove every card/frame. */
.article-page .guide-aside{
  align-self:start;
  position:sticky;
  top:108px;
}
.article-page .guide-box,
body.article-page:not(.light-theme) .guide-box{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--article-text);
  box-shadow:none;
}
.article-page .guide-box+.guide-box{
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--article-line);
}
.article-page .guide-box small{
  display:block;
  margin-bottom:12px;
  color:var(--article-accent-2);
  font:800 9px/1 Inter,Arial,sans-serif;
  letter-spacing:.18em;
}
.article-page .guide-box h2{
  margin:0 0 10px;
  color:var(--article-text);
  font:800 19px/1.1 Manrope,Inter,sans-serif;
}
.article-page .guide-box p{
  margin:0;
  color:var(--article-muted);
  font-size:12.5px;
  line-height:1.6;
}
.article-toc{padding-bottom:0}
.article-toc-links{display:grid;gap:0;margin-top:6px}
.article-page .article-toc-links a,
.article-page .article-toc-links a:visited{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:8px;
  align-items:start;
  margin:0;
  padding:9px 0;
  border:0;
  border-bottom:1px solid var(--article-line);
  color:var(--article-muted);
  font-size:10.5px;
  font-weight:650;
  line-height:1.4;
  text-decoration:none;
}
.article-page .article-toc-links a span{
  color:var(--article-accent);
  font-size:8px;
  font-weight:900;
}
.article-page .article-toc-links a:hover{color:var(--article-text)}
.article-page .guide-nav{display:grid;gap:0;margin-top:4px}
.article-page .guide-nav a,
.article-page .guide-nav a:visited,
.article-page .guide-box>a,
.article-page .guide-box>a:visited{
  display:flex;
  justify-content:space-between;
  margin:0;
  padding:10px 0;
  border:0;
  border-bottom:1px solid var(--article-line);
  color:var(--article-muted);
  text-decoration:none;
  font-size:11px;
  font-weight:750;
}
.article-page .guide-nav a:hover,
.article-page .guide-box>a:hover{color:var(--article-accent)}

/* FAQ mirrors the service-page accordion: no card around the section. */
.article-page .guide-faq,
body.article-page:not(.light-theme) .guide-faq{
  margin-top:54px;
  padding:56px 0 0;
  border:0;
  border-top:1px solid var(--article-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.article-page .guide-faq h2{
  max-width:680px;
  margin:0 0 24px;
  color:var(--article-text);
  font-size:clamp(36px,3.25vw,48px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.article-page .guide-faq details{
  padding:0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
body.article-page.light-theme .guide-faq details{border-bottom-color:var(--article-line)}
.article-page .guide-faq summary{
  position:relative;
  padding:22px 46px 22px 0;
  color:var(--article-text);
  font-size:16px;
  line-height:1.45;
  font-weight:800;
}
.article-page .guide-faq p{
  max-width:820px;
  margin:-4px 0 22px;
  color:var(--article-muted);
  font-size:14px;
  line-height:1.72;
}

/* Final action panel uses the Google Ads contact-panel language. */
.article-page .guide-content .guide-faq + .guide-cta{margin-top:30px}
.article-page .guide-cta,
body.article-page:not(.light-theme) .guide-cta{
  position:relative;
  overflow:hidden;
  padding:32px 34px;
  border:1px solid var(--article-line);
  border-radius:20px;
  background:
    radial-gradient(circle at 8% 18%,rgba(126,231,173,.07),transparent 32%),
    var(--article-panel);
  color:var(--article-text);
  box-shadow:none;
}
.article-page .guide-cta:after{display:none}
.article-page .guide-cta h2{
  max-width:760px;
  margin:0;
  color:var(--article-text);
  font-size:clamp(30px,3vw,42px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.article-page .guide-cta p{
  max-width:760px;
  margin:12px 0 0;
  color:var(--article-muted);
  font-size:13px;
  line-height:1.6;
}
.article-page .guide-cta a,
.article-page .guide-cta a:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  margin-top:22px;
  padding:0 22px;
  border-radius:12px;
  background:var(--article-accent);
  color:#07100d;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}

/* Footer continues the same service-page palette. */
.article-page .unified-footer{
  border-top-color:var(--article-line);
  background:var(--article-bg);
  color:var(--article-text);
}
.article-page .footer-logo,
.article-page .footer-heading{color:var(--article-text)!important}
.article-page .footer-logo i,
.article-page .footer-logo-dot{color:var(--article-accent)!important}
.article-page .footer-subtitle,
.article-page .footer-brand>p,
.article-page .footer-column>a:not(.footer-cta),
.article-page .footer-contact>p,
.article-page .footer-bottom{color:var(--article-muted)!important}
.article-page .footer-column>a:not(.footer-cta):hover{color:var(--article-accent)!important}
.article-page .footer-cta{
  background:var(--article-accent);
  color:#07100d!important;
  box-shadow:none;
}
.article-page .footer-bottom{border-top-color:var(--article-line)}

/* Branded section scroll indicator — copied from Google Ads Management. */
.article-scroll-indicator{
  display:none;
}
@media (min-width:1025px){
  body.article-page:not(.light-theme) .article-scroll-indicator{
    position:fixed;
    right:10px;
    top:50%;
    z-index:45;
    display:flex;
    flex-direction:column;
    gap:11px;
    transform:translateY(-50%) translateX(8px);
    padding:10px 4px;
    opacity:0;
    pointer-events:none;
    transition:opacity .32s ease,transform .32s ease;
  }
  body.article-page:not(.light-theme) .article-scroll-indicator.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:translateY(-50%) translateX(0);
  }
  body.article-page:not(.light-theme) .article-scroll-dot{
    width:30px;
    height:4px;
    min-width:0;
    min-height:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.28);
    box-shadow:none;
    cursor:pointer;
    opacity:1;
    transition:background .28s ease,transform .28s ease,opacity .28s ease;
  }
  body.article-page:not(.light-theme) .article-scroll-dot:hover{
    background:rgba(255,255,255,.58);
    transform:scaleX(1.08);
  }
  body.article-page:not(.light-theme) .article-scroll-dot.is-active{
    background:#fff;
    transform:scaleX(1.12);
  }
}
@media (max-width:1280px) and (min-width:1025px){
  body.article-page:not(.light-theme) .article-scroll-indicator{right:4px}
}
body.article-page.light-theme .article-scroll-indicator{display:none!important}
@media (max-width:1024px){
  .article-scroll-indicator{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .article-learning-banner p span{animation:none!important}
}

@media(max-width:1024px){
  .article-page .guide-shell{width:min(100% - 38px,1180px)}
  .article-page .guide-hero{min-height:auto;padding:72px 0}
  .article-page .guide-hero h1{font-size:clamp(40px,5.8vw,58px)}
  .article-page .guide-layout{grid-template-columns:minmax(0,1fr) 240px;gap:36px}
  .article-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-overview-card:nth-child(3){border-left:0;border-top:1px solid var(--article-line)}
  .article-overview-card:nth-child(4){border-top:1px solid var(--article-line)}
}

@media(max-width:860px){
  .article-page .guide-shell{width:min(100% - 28px,1180px)}
  .article-learning-banner-inner{padding:22px 0 16px}
  .article-learning-banner p{font-size:clamp(22px,6vw,30px)}
  .article-page .guide-hero{padding:56px 0 62px}
  .article-page .guide-hero h1{font-size:clamp(36px,7vw,50px)}
  .article-page .guide-lead{font-size:15.5px}
  .article-page .guide-layout{grid-template-columns:1fr;gap:42px}
  .article-page .guide-aside{position:static}
  .article-toc{display:block}
  .article-page .guide-box+.guide-box{margin-top:28px;padding-top:26px}
}

@media(max-width:600px){
  .article-learning-banner-inner{gap:12px}
  .article-learning-banner-line{min-width:28px}
  .article-learning-banner p{font-size:21px;white-space:normal}
  .article-page .guide-hero{padding:46px 0 52px}
  .article-page .guide-hero h1{font-size:clamp(34px,9vw,44px)}
  .article-page .guide-lead{margin-top:26px;font-size:15px;line-height:1.65}
  .article-page .guide-meta{justify-content:flex-start;gap:20px;text-align:left}
  .article-page .guide-meta span+span:before{left:-12px}
  .article-overview{padding-top:44px}
  .article-overview-head{display:block}
  .article-overview-head strong{display:block;margin-top:7px}
  .article-overview-grid{grid-template-columns:1fr}
  .article-overview-card+.article-overview-card{border-left:0;border-top:1px solid var(--article-line)}
  .article-section,
  .article-section:nth-of-type(3n){padding:34px 0 36px}
  .article-page .guide-content .article-section h2{font-size:30px}
  .article-page .guide-content .article-section p,
  .article-page .guide-content .article-section li{font-size:15px}
  .article-page .guide-faq{padding-top:44px}
  .article-page .guide-faq h2{font-size:34px}
  .article-page .guide-cta{padding:26px 22px}
}


/* Website Audit Checklist · readability experiment v2
   Keep the current 1180px layout and left alignment.
   Improve only the dense reading zone: shorter measure, stronger lead,
   calmer paragraph/list rhythm, and compact practical notes. */
@media (min-width:861px){
  body.article-readable-example .guide-content .article-section{
    padding-top:46px;
    padding-bottom:48px;
  }
  body.article-readable-example .guide-content .article-section:first-child{
    padding-top:0;
  }

  /* Keep headings aligned to the existing left edge and visually broad. */
  body.article-readable-example .guide-content .article-section h2{
    max-width:780px;
    margin-bottom:18px;
  }

  /* Long reading text gets a comfortable measure without moving the column. */
  body.article-readable-example .guide-content .article-section>p,
  body.article-readable-example .guide-content .article-section>ul,
  body.article-readable-example .guide-content .article-section>ol{
    max-width:720px;
  }

  /* Opening paragraph carries the section's main idea. */
  body.article-readable-example .guide-content .article-section>p:first-of-type{
    max-width:740px;
    margin-top:0;
    margin-bottom:18px;
    color:#c8d0cc;
    font-size:16.5px;
    line-height:1.72;
    font-weight:500;
  }

  body.article-readable-example .guide-content .article-section>p:not(:first-of-type){
    margin-top:0;
    margin-bottom:18px;
    font-size:15.5px;
    line-height:1.78;
  }

  body.article-readable-example .guide-content .article-section>ul,
  body.article-readable-example .guide-content .article-section>ol{
    margin-top:18px;
    margin-bottom:20px;
    padding-left:22px;
  }
  body.article-readable-example .guide-content .article-section>ul li,
  body.article-readable-example .guide-content .article-section>ol li{
    margin:7px 0;
    line-height:1.72;
  }
  body.article-readable-example .guide-content .article-section>ul li::marker,
  body.article-readable-example .guide-content .article-section>ol li::marker{
    color:var(--article-accent);
  }

  /* Practical callouts remain slightly wider than body copy. */
  body.article-readable-example .guide-content .guide-note{
    max-width:760px;
    margin-top:22px;
    padding:18px 20px;
    border-color:rgba(126,231,173,.14);
    background:#08130f;
  }
  body.article-readable-example .guide-content .guide-note strong{
    margin-bottom:7px;
    color:#f7faf8;
    font-size:12.5px;
  }

  body.article-readable-example .guide-content .guide-steps{
    max-width:760px;
    margin-top:24px;
  }

  /* Slightly more air after every section improves long-form scanning. */
  body.article-readable-example .guide-content .article-section + .article-section{
    margin-top:4px;
  }
}

@media (max-width:860px){
  body.article-readable-example .guide-content .article-section>p:first-of-type{
    font-size:16px;
    line-height:1.7;
  }
}


/* Website Audit Checklist · flow-under-sidebar experiment.
   The sidebar occupies the upper reading area only. From section 03 onward,
   the article clears it and can use the wider 1180px service-page canvas. */
@media (min-width:1025px){
  body.article-flow-sidebar-example .guide-layout{
    display:block;
    padding-top:56px;
    padding-bottom:82px;
  }

  body.article-flow-sidebar-example .guide-aside{
    float:right;
    width:260px;
    margin:0 0 42px 58px;
    position:static;
  }

  body.article-flow-sidebar-example .guide-content{
    display:block;
    width:auto;
    max-width:none;
    min-width:0;
    padding:0;
  }

  /* Keep sections 01–02 in the readable left lane beside the sidebar. */
  body.article-flow-sidebar-example #define-the-audit-scope-and-baseline>p,
  body.article-flow-sidebar-example #define-the-audit-scope-and-baseline>ul,
  body.article-flow-sidebar-example #define-the-audit-scope-and-baseline>ol,
  body.article-flow-sidebar-example #check-crawlability-indexability-and-canonicals>p,
  body.article-flow-sidebar-example #check-crawlability-indexability-and-canonicals>ul,
  body.article-flow-sidebar-example #check-crawlability-indexability-and-canonicals>ol{
    max-width:720px;
  }

  /* Section 03 starts only after the CONTENT CLUSTER rail is finished. */
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking{
    clear:right;
    padding-top:52px;
  }

  /* Lower article area can breathe across the wider canvas,
     while paragraphs still stop before becoming excessively long. */
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking h2,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section h2{
    max-width:960px;
  }

  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking>p,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking>ul,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking>ol,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section>p,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section>ul,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section>ol{
    max-width:920px;
  }

  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking .guide-note,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section .guide-note,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section .guide-steps{
    max-width:980px;
  }

  body.article-flow-sidebar-example .guide-faq,
  body.article-flow-sidebar-example .guide-cta{
    clear:both;
    max-width:none;
  }
}


/* Website Audit Checklist · reading zone correction v3
   Keep one stable reading measure throughout the article.
   Remove full-width section rules; use freed space only for useful wide elements. */
@media (min-width:1025px){
  body.article-flow-sidebar-example .guide-content .article-section,
  body.article-flow-sidebar-example .guide-content .article-section:nth-of-type(3n){
    border-bottom:0;
    padding-top:46px;
    padding-bottom:50px;
  }

  body.article-flow-sidebar-example .guide-content .article-section:first-child{
    padding-top:0;
  }

  /* One consistent reading width from section 01 to section 10. */
  body.article-flow-sidebar-example .guide-content .article-section>p,
  body.article-flow-sidebar-example .guide-content .article-section>ul,
  body.article-flow-sidebar-example .guide-content .article-section>ol{
    max-width:780px!important;
  }

  body.article-flow-sidebar-example .guide-content .article-section>p:first-of-type{
    max-width:780px!important;
  }

  body.article-flow-sidebar-example .guide-content .article-section h2{
    max-width:860px!important;
  }

  /* Section 03 still clears the sidebar, but body copy does not suddenly widen. */
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking{
    clear:right;
    padding-top:58px;
  }

  /* Use the freed width only where extra horizontal space is genuinely useful. */
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking .guide-note,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section .guide-note{
    max-width:940px!important;
  }

  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section .guide-steps{
    max-width:980px!important;
  }

  body.article-flow-sidebar-example .guide-faq,
  body.article-flow-sidebar-example .guide-cta{
    max-width:none;
  }

  /* Replace hard rules with spacing: cleaner long-form rhythm. */
  body.article-flow-sidebar-example .guide-content .article-section + .article-section{
    margin-top:8px;
  }
}


/* Website Audit Checklist · full-width after sidebar v4
   Above the end of CONTENT CLUSTER, text stays in the left reading lane.
   Once section 03 clears the sidebar, subsequent article content uses the
   full available 1180px canvas as requested. */
@media (min-width:1025px){
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section{
    width:100%;
    max-width:none;
  }

  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking h2,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section h2,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking>p,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking>ul,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking>ol,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section>p,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section>ul,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section>ol{
    max-width:none!important;
    width:100%;
  }

  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking .guide-note,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section .guide-note,
  body.article-flow-sidebar-example #audit-site-architecture-and-internal-linking ~ .article-section .guide-steps{
    max-width:none!important;
    width:100%;
  }
}


/* Website Audit Checklist · true text flow around sidebar v5
   Important: do not cap paragraph width while the sidebar float is present.
   The float itself limits the available line width. As soon as CONTENT CLUSTER
   ends vertically, the same text flow automatically expands into the freed space. */
@media (min-width:1025px){
  body.article-flow-sidebar-example .guide-content .article-section>p,
  body.article-flow-sidebar-example .guide-content .article-section>ul,
  body.article-flow-sidebar-example .guide-content .article-section>ol{
    max-width:none!important;
    width:auto!important;
  }

  body.article-flow-sidebar-example .guide-content .article-section>p:first-of-type{
    max-width:none!important;
  }

  /* Keep only a sensible heading measure while the rail is beside it.
     Later headings are already allowed to use the full canvas. */
  body.article-flow-sidebar-example #define-the-audit-scope-and-baseline h2,
  body.article-flow-sidebar-example #check-crawlability-indexability-and-canonicals h2{
    max-width:820px!important;
  }
}


/* Website Audit Checklist · left active TOC prototype v6
   No right rail. The article owns the full 1180px service-page shell.
   The left TOC is fixed outside the reading canvas on wide screens and
   degrades to a compact number rail before disappearing on mobile. */
body.article-left-toc-example .guide-layout{
  display:block;
  padding-top:58px;
  padding-bottom:76px;
}
body.article-left-toc-example .guide-content{
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
  padding:0;
}
body.article-left-toc-example .guide-content .article-section,
body.article-left-toc-example .guide-content .article-section:nth-of-type(3n){
  width:100%;
  max-width:none;
  margin:0;
  padding:48px 0 52px;
  border:0;
  background:transparent;
  box-shadow:none;
}
body.article-left-toc-example .guide-content .article-section:first-child{
  padding-top:0;
}
body.article-left-toc-example .guide-content .article-section:before,
body.article-left-toc-example .guide-content .article-section:nth-of-type(3n):before{
  position:static;
  display:block;
  width:auto;
  height:auto;
  margin:0 0 14px;
  padding:0;
  background:transparent;
  color:var(--article-accent);
  font:900 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.14em;
}
body.article-left-toc-example .guide-content .article-section h2{
  max-width:1000px;
  margin:0 0 18px;
  font-size:clamp(32px,3.5vw,50px);
  line-height:1.02;
  letter-spacing:-.04em;
}
body.article-left-toc-example .guide-content .article-section>p{
  max-width:920px;
  margin:0 0 20px;
  font-size:16px;
  line-height:1.78;
}
body.article-left-toc-example .guide-content .article-section>p:first-of-type{
  max-width:940px;
  color:#c8d0cc;
  font-size:17px;
  line-height:1.74;
  font-weight:500;
}
body.article-left-toc-example .guide-content .article-section>ul,
body.article-left-toc-example .guide-content .article-section>ol{
  max-width:980px;
  margin:20px 0 22px;
  padding-left:24px;
}
body.article-left-toc-example .guide-content .article-section li{
  margin:7px 0;
  font-size:15.5px;
  line-height:1.72;
}
body.article-left-toc-example .guide-content .guide-note,
body.article-left-toc-example .guide-content .guide-steps{
  max-width:1040px;
}
body.article-left-toc-example .guide-faq,
body.article-left-toc-example .guide-cta{
  max-width:none;
}

/* Left active table of contents. */
.article-left-toc{
  position:fixed;
  top:50%;
  left:max(18px,calc((100vw - 1180px)/2 - 210px));
  z-index:44;
  width:175px;
  padding:0;
  transform:translateY(-50%) translateX(-8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.article-left-toc.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
}
.article-left-toc small{
  display:block;
  margin:0 0 12px 34px;
  color:var(--article-accent-2);
  font:800 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.17em;
}
.article-left-toc a,
.article-left-toc a:visited{
  position:relative;
  display:grid;
  grid-template-columns:26px 1fr;
  gap:8px;
  align-items:center;
  min-height:28px;
  padding:4px 0;
  color:#66736d;
  text-decoration:none;
  transition:color .22s ease,transform .22s ease;
}
.article-left-toc a:before{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.08);
}
.article-left-toc a span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--article-bg);
  color:#68756f;
  font:800 9px/1 Inter,Arial,sans-serif;
}
.article-left-toc a b{
  overflow:hidden;
  color:inherit;
  font:700 11px/1.2 Inter,Arial,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.article-left-toc a:hover{
  color:#c8d0cc;
  transform:translateX(2px);
}
.article-left-toc a.is-active{
  color:#fff;
}
.article-left-toc a.is-active span{
  background:#fff;
  color:#07100d;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}
.article-left-toc a.is-active b{
  color:#fff;
}

/* The old right-hand segmented indicator is intentionally replaced here. */
body.article-left-toc-example .article-scroll-indicator{
  display:none!important;
}

/* Related resources move after the article. */
.article-after-content{
  border-top:1px solid var(--article-line);
  background:var(--article-bg);
  padding:54px 0 72px;
}
.article-after-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:64px;
}
.article-after-tool,
.article-after-cluster{
  min-width:0;
}
.article-after-cluster{
  padding-left:56px;
  border-left:1px solid var(--article-line);
}
.article-after-content small{
  display:block;
  margin-bottom:16px;
  color:var(--article-accent-2);
  font:800 9px/1 Inter,Arial,sans-serif;
  letter-spacing:.18em;
}
.article-after-content h2{
  max-width:480px;
  margin:0 0 12px;
  color:var(--article-text);
  font:800 30px/1.05 Manrope,Inter,sans-serif;
  letter-spacing:-.035em;
}
.article-after-content p{
  max-width:500px;
  margin:0;
  color:var(--article-muted);
  font-size:14px;
  line-height:1.65;
}
.article-after-tool>a{
  display:inline-flex;
  gap:18px;
  margin-top:20px;
  padding:12px 0;
  border-bottom:1px solid var(--article-line);
  color:var(--article-text);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}
.article-after-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
}
.article-after-links a,
.article-after-links a:visited{
  padding:13px 0;
  border-bottom:1px solid var(--article-line);
  color:var(--article-muted);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}
.article-after-links a:hover,
.article-after-tool>a:hover{
  color:var(--article-accent);
}

/* Mid-size desktops: keep navigation useful without taking text width. */
@media (max-width:1599px) and (min-width:1281px){
  .article-left-toc{
    left:10px;
    width:42px;
  }
  .article-left-toc small,
  .article-left-toc a b{
    display:none;
  }
  .article-left-toc a{
    grid-template-columns:28px;
    min-height:28px;
  }
  .article-left-toc a:before{
    left:13px;
  }
}
@media (max-width:1280px){
  .article-left-toc{display:none!important}
}
@media (max-width:860px){
  body.article-left-toc-example .guide-layout{
    padding-top:38px;
  }
  body.article-left-toc-example .guide-content .article-section h2{
    font-size:30px;
  }
  body.article-left-toc-example .guide-content .article-section>p,
  body.article-left-toc-example .guide-content .article-section>p:first-of-type{
    max-width:none;
    font-size:15.5px;
  }
  .article-after-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .article-after-cluster{
    padding-left:0;
    padding-top:34px;
    border-left:0;
    border-top:1px solid var(--article-line);
  }
  .article-after-links{
    grid-template-columns:1fr;
  }
}


/* Website Audit Checklist · full right TOC correction v7
   Full ON THIS PAGE lives on the right, shows labels, and replaces the old
   numbers-only rail. The active section is highlighted while reading. */
body.article-right-toc-example .article-left-toc{
  display:none!important;
}
body.article-right-toc-example .article-scroll-indicator{
  display:none!important;
}

.article-right-toc{
  position:fixed;
  top:50%;
  right:18px;
  z-index:44;
  width:210px;
  padding:0;
  transform:translateY(-50%) translateX(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.article-right-toc.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
}
.article-right-toc small{
  display:block;
  margin:0 0 12px 38px;
  color:var(--article-accent-2);
  font:800 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.17em;
}
.article-right-toc a,
.article-right-toc a:visited{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:31px;
  padding:4px 0;
  color:#66736d;
  text-decoration:none;
  transition:color .22s ease,transform .22s ease;
}
.article-right-toc a:before{
  content:"";
  position:absolute;
  left:13px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.08);
}
.article-right-toc a span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:999px;
  background:var(--article-bg);
  color:#68756f;
  font:800 9px/1 Inter,Arial,sans-serif;
}
.article-right-toc a b{
  overflow:hidden;
  color:inherit;
  font:700 11px/1.2 Inter,Arial,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.article-right-toc a:hover{
  color:#c8d0cc;
  transform:translateX(-2px);
}
.article-right-toc a.is-active{
  color:#fff;
}
.article-right-toc a.is-active span{
  background:#fff;
  color:#07100d;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}
.article-right-toc a.is-active b{
  color:#fff;
  font-weight:800;
}

/* The article itself remains full service-page width.
   Reading text stops before the fixed TOC so they never collide. */
@media (min-width:1281px){
  body.article-right-toc-example .guide-content .article-section>p{
    max-width:900px;
  }
  body.article-right-toc-example .guide-content .article-section>p:first-of-type{
    max-width:920px;
  }
  body.article-right-toc-example .guide-content .article-section>ul,
  body.article-right-toc-example .guide-content .article-section>ol{
    max-width:940px;
  }
  body.article-right-toc-example .guide-content .article-section h2{
    max-width:940px;
  }
}
@media (max-width:1280px){
  .article-right-toc{
    right:8px;
    width:176px;
  }
  .article-right-toc small{
    margin-left:35px;
  }
  .article-right-toc a{
    grid-template-columns:26px minmax(0,1fr);
    gap:8px;
  }
  .article-right-toc a b{
    font-size:10px;
  }
  body.article-right-toc-example .guide-content .article-section>p,
  body.article-right-toc-example .guide-content .article-section>p:first-of-type{
    max-width:860px;
  }
  body.article-right-toc-example .guide-content .article-section h2{
    max-width:900px;
  }
}
@media (max-width:1080px){
  .article-right-toc{display:none!important}
}


/* Canonical info-page polish v8 · approved dark direction + readable light theme */
body.article-right-toc-example .guide-content{
  width:100%;
}
body.article-right-toc-example .guide-content .article-section{
  scroll-margin-top:120px;
}
@media (min-width:1081px){
  body.article-right-toc-example .guide-content .article-section h2{
    width:100%;
    max-width:980px!important;
  }
  body.article-right-toc-example .guide-content .article-section>p,
  body.article-right-toc-example .guide-content .article-section>p:first-of-type,
  body.article-right-toc-example .guide-content .article-section>ul,
  body.article-right-toc-example .guide-content .article-section>ol,
  body.article-right-toc-example .guide-content .guide-note,
  body.article-right-toc-example .guide-content .guide-steps{
    width:100%;
    max-width:920px!important;
  }
  body.article-right-toc-example .guide-faq{
    max-width:980px;
  }
}
body.article-right-toc-example .guide-content .article-section>p{
  margin-bottom:20px;
  text-wrap:pretty;
}
body.article-right-toc-example .guide-content .article-section>ul,
body.article-right-toc-example .guide-content .article-section>ol{
  margin-top:18px;
  margin-bottom:22px;
}
body.article-right-toc-example .guide-content .article-section li{
  margin:7px 0;
  text-wrap:pretty;
}

/* Light theme contrast: active state is dark, inactive labels stay clearly readable. */
body.article-page.light-theme{
  --article-bg:#f4f5f2;
  --article-panel:#ffffff;
  --article-line:#d5dcd7;
  --article-text:#17201c;
  --article-muted:#536159;
  --article-accent:#27885a;
  --article-accent-2:#27885a;
}
body.article-page.light-theme .article-right-toc small{
  color:#27885a;
}
body.article-page.light-theme .article-right-toc a,
body.article-page.light-theme .article-right-toc a:visited{
  color:#5b6961;
}
body.article-page.light-theme .article-right-toc a:before{
  background:#d3dad5;
}
body.article-page.light-theme .article-right-toc a span{
  background:#f4f5f2;
  color:#5b6961;
}
body.article-page.light-theme .article-right-toc a b{
  color:#5b6961;
}
body.article-page.light-theme .article-right-toc a:hover{
  color:#17201c;
}
body.article-page.light-theme .article-right-toc a.is-active{
  color:#17201c;
}
body.article-page.light-theme .article-right-toc a.is-active span{
  background:#17201c;
  color:#ffffff;
  box-shadow:0 0 0 4px rgba(23,32,28,.08);
}
body.article-page.light-theme .article-right-toc a.is-active b{
  color:#17201c;
}
body.article-page.light-theme .guide-content .article-section>p:first-of-type{
  color:#3f4c45;
}
body.article-page.light-theme .guide-content .article-section p,
body.article-page.light-theme .guide-content .article-section li{
  color:#536159;
}
body.article-page.light-theme .guide-content .article-section h2,
body.article-page.light-theme .guide-content .article-section h3{
  color:#17201c;
}
body.article-page.light-theme .guide-note,
body.article-page.light-theme .guide-step{
  background:#eef2ef;
  border-color:#d3dcd6;
}
body.article-page.light-theme .article-after-content{
  background:#eef1ee;
  border-top-color:#d5dcd7;
}
body.article-page.light-theme .article-after-content h2,
body.article-page.light-theme .article-after-tool>a{
  color:#17201c;
}
body.article-page.light-theme .article-after-content p,
body.article-page.light-theme .article-after-links a{
  color:#536159;
}


/* Canonical informational-page layout v9 · approved 12 Oct 2026 */
body.article-page.article-right-toc-example .guide-layout{
  display:block!important;
  padding-top:58px;
  padding-bottom:76px;
}
body.article-page.article-right-toc-example .guide-content{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0;
  padding:0!important;
}
body.article-page.article-right-toc-example .guide-aside{
  display:none!important;
}
body.article-page.article-right-toc-example .guide-content .article-section,
body.article-page.article-right-toc-example .guide-content .article-section:nth-of-type(3n){
  width:100%;
  max-width:none;
  margin:0;
  padding:46px 0 50px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.article-page.article-right-toc-example .guide-content .article-section:first-child{
  padding-top:0;
}
body.article-page.article-right-toc-example .guide-content .article-section:before,
body.article-page.article-right-toc-example .guide-content .article-section:nth-of-type(3n):before{
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0 0 14px!important;
  padding:0!important;
  background:transparent!important;
  color:var(--article-accent)!important;
  font:900 10px/1 Inter,Arial,sans-serif!important;
  letter-spacing:.14em!important;
}
body.article-page.article-right-toc-example .guide-content .article-section h2{
  max-width:980px!important;
  margin:0 0 18px!important;
  font-size:clamp(32px,3.5vw,50px)!important;
  line-height:1.03!important;
  letter-spacing:-.04em!important;
}
body.article-page.article-right-toc-example .guide-content .article-section>p{
  max-width:920px!important;
  margin:0 0 20px!important;
  font-size:16px!important;
  line-height:1.78!important;
}
body.article-page.article-right-toc-example .guide-content .article-section>p:first-of-type{
  max-width:920px!important;
  color:#c8d0cc;
  font-size:17px!important;
  line-height:1.74!important;
  font-weight:500!important;
}
body.article-page.article-right-toc-example .guide-content .article-section>ul,
body.article-page.article-right-toc-example .guide-content .article-section>ol{
  max-width:940px!important;
  margin:20px 0 22px!important;
  padding-left:24px!important;
}
body.article-page.article-right-toc-example .guide-content .article-section li{
  margin:7px 0!important;
  font-size:15.5px!important;
  line-height:1.72!important;
}
body.article-page.article-right-toc-example .guide-content .guide-note,
body.article-page.article-right-toc-example .guide-content .guide-steps{
  max-width:940px!important;
}
body.article-page.article-right-toc-example .guide-faq{
  max-width:980px;
  margin-top:54px;
}
body.article-page.article-right-toc-example .guide-cta{
  display:none!important;
}
body.article-page.article-right-toc-example .article-scroll-indicator{
  display:none!important;
}

/* Canonical bottom resources generated from former article sidebar. */
body.article-page.article-right-toc-example .article-after-content{
  border-top:1px solid var(--article-line);
  background:var(--article-bg);
  padding:54px 0 72px;
}
body.article-page.article-right-toc-example .article-after-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:64px;
}
body.article-page.article-right-toc-example .article-after-tool,
body.article-page.article-right-toc-example .article-after-cluster{
  min-width:0;
}
body.article-page.article-right-toc-example .article-after-cluster{
  padding-left:56px;
  border-left:1px solid var(--article-line);
}
body.article-page.article-right-toc-example .article-after-content small{
  display:block;
  margin-bottom:16px;
  color:var(--article-accent-2);
  font:800 9px/1 Inter,Arial,sans-serif;
  letter-spacing:.18em;
}
body.article-page.article-right-toc-example .article-after-content h2{
  max-width:480px;
  margin:0 0 12px;
  color:var(--article-text);
  font:800 30px/1.05 Manrope,Inter,sans-serif;
  letter-spacing:-.035em;
}
body.article-page.article-right-toc-example .article-after-content p{
  max-width:500px;
  margin:0;
  color:var(--article-muted);
  font-size:14px;
  line-height:1.65;
}
body.article-page.article-right-toc-example .article-after-content a{
  color:var(--article-muted);
}
body.article-page.article-right-toc-example .article-after-tool>a{
  display:inline-flex;
  gap:18px;
  margin-top:20px;
  padding:12px 0;
  border-bottom:1px solid var(--article-line);
  color:var(--article-text);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}
body.article-page.article-right-toc-example .article-after-links,
body.article-page.article-right-toc-example .article-after-cluster .guide-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
}
body.article-page.article-right-toc-example .article-after-links a,
body.article-page.article-right-toc-example .article-after-cluster .guide-nav a{
  padding:13px 0;
  border-bottom:1px solid var(--article-line);
  color:var(--article-muted);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}
body.article-page.article-right-toc-example .article-after-content a:hover{
  color:var(--article-accent);
}

/* Canonical right ON THIS PAGE navigator. */
body.article-page .article-right-toc{
  position:fixed;
  top:50%;
  right:18px;
  z-index:44;
  width:210px;
  padding:0;
  transform:translateY(-50%) translateX(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
body.article-page .article-right-toc.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
}
body.article-page .article-right-toc small{
  display:block;
  margin:0 0 12px 38px;
  color:var(--article-accent-2);
  font:800 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.17em;
}
body.article-page .article-right-toc a{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:31px;
  padding:4px 0;
  color:#66736d;
  text-decoration:none;
  transition:color .22s ease,transform .22s ease;
}
body.article-page .article-right-toc a:before{
  content:"";
  position:absolute;
  left:13px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.08);
}
body.article-page .article-right-toc a span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:999px;
  background:var(--article-bg);
  color:#68756f;
  font:800 9px/1 Inter,Arial,sans-serif;
}
body.article-page .article-right-toc a b{
  overflow:hidden;
  color:inherit;
  font:700 11px/1.2 Inter,Arial,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.article-page .article-right-toc a:hover{
  color:#c8d0cc;
  transform:translateX(-2px);
}
body.article-page .article-right-toc a.is-active,
body.article-page .article-right-toc a.is-active b{
  color:#fff;
}
body.article-page .article-right-toc a.is-active span{
  background:#fff;
  color:#07100d;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

/* Light theme — explicit readable contrast. */
body.article-page.light-theme .article-right-toc small{color:#27885a}
body.article-page.light-theme .article-right-toc a,
body.article-page.light-theme .article-right-toc a b{color:#56645c}
body.article-page.light-theme .article-right-toc a:before{background:#d0d8d2}
body.article-page.light-theme .article-right-toc a span{background:#f4f5f2;color:#56645c}
body.article-page.light-theme .article-right-toc a:hover,
body.article-page.light-theme .article-right-toc a:hover b{color:#17201c}
body.article-page.light-theme .article-right-toc a.is-active,
body.article-page.light-theme .article-right-toc a.is-active b{color:#17201c}
body.article-page.light-theme .article-right-toc a.is-active span{
  background:#17201c;
  color:#fff;
  box-shadow:0 0 0 4px rgba(23,32,28,.08);
}
body.article-page.light-theme .guide-content .article-section>p:first-of-type{color:#3f4c45}
body.article-page.light-theme .guide-content .article-section p,
body.article-page.light-theme .guide-content .article-section li{color:#536159}
body.article-page.light-theme .article-after-content{background:#eef1ee}

@media (max-width:1280px){
  body.article-page .article-right-toc{right:8px;width:176px}
  body.article-page .article-right-toc small{margin-left:35px}
  body.article-page .article-right-toc a{grid-template-columns:26px minmax(0,1fr);gap:8px}
  body.article-page .article-right-toc a b{font-size:10px}
}
@media (max-width:1080px){
  body.article-page .article-right-toc{display:none!important}
}
@media (max-width:860px){
  body.article-page.article-right-toc-example .guide-layout{padding-top:38px}
  body.article-page.article-right-toc-example .guide-content .article-section h2{font-size:30px!important}
  body.article-page.article-right-toc-example .guide-content .article-section>p,
  body.article-page.article-right-toc-example .guide-content .article-section>p:first-of-type{max-width:none!important;font-size:15.5px!important}
  body.article-page.article-right-toc-example .article-after-grid{grid-template-columns:1fr;gap:38px}
  body.article-page.article-right-toc-example .article-after-cluster{padding-left:0;padding-top:34px;border-left:0;border-top:1px solid var(--article-line)}
  body.article-page.article-right-toc-example .article-after-links,
  body.article-page.article-right-toc-example .article-after-cluster .guide-nav{grid-template-columns:1fr}
}


/* Canonical note labels · brand accent */
body.article-page .guide-note>strong:first-child,
body.article-page .guide-step strong:first-child{
  color:var(--article-accent)!important;
}
body.article-page.light-theme .guide-note>strong:first-child,
body.article-page.light-theme .guide-step strong:first-child{
  color:#27885a!important;
}


/* Mobile SEO Article Template · Dublin reference · 2026-10-16 */
@media (max-width:600px){
  /* Keep every Article System page visually aligned with the approved Google Ads Dublin mobile reference. */
  body.article-page .guide-hero{
    padding:36px 0 38px!important;
  }
  body.article-page .guide-hero h1{
    font-size:clamp(31px,8.2vw,38px)!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
  }
  body.article-page .guide-lead{
    margin-top:20px!important;
    font-size:14.5px!important;
    line-height:1.58!important;
  }

  /* Trust / context row: same restrained text treatment; adapts long labels safely. */
  body.article-page .guide-meta{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    max-width:100%!important;
    margin-top:18px!important;
    padding:0 2px!important;
    text-align:center!important;
  }
  body.article-page .guide-meta span{
    min-width:0!important;
    padding:0 7px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:var(--article-muted)!important;
    font-size:10px!important;
    line-height:1.25!important;
    font-weight:700!important;
    text-wrap:balance;
  }
  body.article-page .guide-meta span+span{
    border-left:1px solid var(--article-line)!important;
  }
  body.article-page .guide-meta span+span:before{
    display:none!important;
  }

  body.article-page .article-overview{
    padding:30px 0 24px!important;
  }
  body.article-page .article-overview-head{
    margin-bottom:16px!important;
  }
  body.article-page .article-overview-card{
    min-height:0!important;
    padding:18px 4px!important;
  }
  body.article-page .article-overview-no{
    margin-bottom:10px!important;
  }

  body.article-page.article-right-toc-example .guide-layout{
    padding-top:24px!important;
    padding-bottom:52px!important;
  }
  body.article-page.article-right-toc-example .guide-content .article-section,
  body.article-page.article-right-toc-example .guide-content .article-section:nth-of-type(3n){
    padding:28px 0 30px!important;
  }
  body.article-page.article-right-toc-example .guide-content .article-section:first-child{
    padding-top:0!important;
  }
  body.article-page.article-right-toc-example .guide-content .article-section h2{
    margin-bottom:14px!important;
    font-size:26px!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
    text-wrap:balance;
  }
  body.article-page.article-right-toc-example .guide-content .article-section>p,
  body.article-page.article-right-toc-example .guide-content .article-section>p:first-of-type{
    margin-bottom:16px!important;
    font-size:15px!important;
    line-height:1.65!important;
  }
  body.article-page.article-right-toc-example .guide-content .article-section>ul,
  body.article-page.article-right-toc-example .guide-content .article-section>ol{
    margin-top:16px!important;
    margin-bottom:18px!important;
  }
  body.article-page.article-right-toc-example .guide-content .article-section li{
    font-size:14.5px!important;
    line-height:1.62!important;
  }

  body.article-page .guide-steps{
    margin-top:18px!important;
  }
  body.article-page .guide-step{
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px 0!important;
  }
  body.article-page .guide-step h3{
    margin-bottom:5px!important;
    font-size:18px!important;
    line-height:1.2!important;
  }
  body.article-page .guide-step p{
    font-size:13.5px!important;
    line-height:1.58!important;
  }

  body.article-page .guide-note{
    margin-top:18px!important;
    padding:17px 18px!important;
    border-radius:14px!important;
  }
  body.article-page.article-right-toc-example .guide-faq{
    margin-top:36px!important;
  }
  body.article-page.article-right-toc-example .article-after-grid{
    gap:28px!important;
  }
}


/* City commercial article CTA · 2026-10-16 */
.city-commercial-cta{display:none}
.city-commercial-cta{
  margin:8px 0 54px;
  padding:34px 36px;
  border:1px solid var(--article-line);
  border-radius:22px;
  background:var(--article-panel);
}
.city-commercial-cta small{
  display:block;
  margin-bottom:10px;
  color:var(--article-accent);
  font:800 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.city-commercial-cta h2{
  max-width:760px;
  margin:0 0 12px;
  color:var(--article-text);
  font:800 clamp(30px,3.2vw,44px)/1.04 Manrope,Inter,Arial,sans-serif;
  letter-spacing:-.04em;
}
.city-commercial-cta p{
  max-width:760px;
  margin:0;
  color:var(--article-muted);
  font:500 15px/1.7 Inter,Arial,sans-serif;
}
.city-commercial-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.city-commercial-actions .button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none!important;
}
.city-commercial-actions .button.primary{
  background:var(--article-accent)!important;
  border-color:var(--article-accent)!important;
  color:#07100d!important;
  -webkit-text-fill-color:#07100d!important;
  font-weight:800;
}
.city-commercial-actions .button.ghost{
  background:transparent!important;
  border-color:rgba(255,255,255,.34)!important;
  color:var(--article-accent)!important;
  -webkit-text-fill-color:var(--article-accent)!important;
}
body.article-page.light-theme .city-commercial-actions .button.ghost{
  border-color:#aeb8b3!important;
  color:#27885a!important;
  -webkit-text-fill-color:#27885a!important;
}
.city-commercial-note{
  display:block;
  margin-top:13px;
  color:var(--article-muted);
  font:600 11.5px/1.5 Inter,Arial,sans-serif;
}
@media(max-width:600px){
  .city-commercial-cta{
    display:block;
    margin:2px 0 34px;
    padding:24px 20px;
    border-radius:18px;
  }
  .city-commercial-cta h2{
    font-size:27px;
    line-height:1.07;
  }
  .city-commercial-cta p{
    font-size:14.5px;
    line-height:1.62;
  }
  .city-commercial-actions{
    display:grid;
    grid-template-columns:1fr;
    margin-top:18px;
  }
  .city-commercial-actions .button{
    width:100%;
    min-height:50px;
  }
}