/* ============================================================
   Top Systems — article template layer (loaded on blog posts).
   Adds the sticky "On this page" ToC, comparison-table and callout
   styling, and CTA/related polish ON TOP of the existing article
   styles in style.css. Article CONTENT/markup is not changed.
   ============================================================ */

/* ---- canonical article grid (Stage 7G) -----------------------------------
   One outer grid shared by header, body, Continue Reading and the CTA band so
   every block shares the same left content edge; body capped to a readable
   measure. Scoped to article.css, which only the 31 blog articles load. */
:root{
  --art-outer:1180px;   /* canonical outer grid width */
  --art-measure:740px;  /* article reading column     */
  --art-toc:230px;      /* sticky ToC sidebar         */
  --art-gap:44px;       /* content <-> ToC gap        */
}
/* header content shares the body's left edge: same outer width + same padding */
.article-header{padding-left:0;padding-right:0}
.article-header-inner{max-width:var(--art-outer);margin-inline:auto;padding-inline:var(--pad)}
.article-header-inner > *{max-width:var(--art-measure)}

/* two-column body (container already flex in style.css) */
.article-container{max-width:var(--art-outer);gap:var(--art-gap)}
.article-content{max-width:var(--art-measure);order:1}
.article-toc{width:var(--art-toc);flex:0 0 var(--art-toc);order:2}
/* keep the footer below both columns (it is full-width) */
.article-container > .article-footer{order:3;flex-basis:100%}
.article-toc-inner{position:sticky;top:calc(var(--nav-height) + 1.25rem);
  max-height:calc(100vh - var(--nav-height) - 3rem);overflow-y:auto}
/* quiet neutral label — gold is reserved for the active state only */
.article-toc-title{font-family:var(--sans);font-size:0.68rem;font-weight:600;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--mid-grey);margin-bottom:0.85rem}
/* neutralize the global `nav{position:fixed;height:70px;...}` rule that would
   otherwise capture this inner <nav id="article-toc-nav"> */
.article-toc nav{position:static;top:auto;left:auto;right:auto;z-index:auto;height:auto;
  background:none;backdrop-filter:none;border-bottom:0;padding:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:0.1rem;
  border-left:1px solid var(--light-grey)}
/* links fill the column so text starts at one left edge (not centre-drifted) */
.article-toc nav a{align-self:stretch}
.article-toc a{font-family:var(--sans);font-size:0.86rem;line-height:1.35;color:var(--mid-grey);
  text-decoration:none;padding:0.45rem 0 0.45rem 0.9rem;margin-left:-1px;border-left:2px solid transparent;
  transition:color .15s,border-color .15s}
.article-toc a:hover{color:var(--blue-dark)}
.article-toc a.active{color:var(--blue-dark);font-weight:600;border-left-color:var(--gold)}
@media(max-width:960px){.article-toc{display:none}}

/* ---- reusable in-content image system --------------------------------------
   Supports: no image, one image, or many. Use <figure class="article-figure">
   with an <img> (always give real alt text) and an OPTIONAL <figcaption>.
   Do not add a caption or alt text unless the article actually has that
   information. width/height on the <img> prevent layout shift. */
.article-content figure,.article-content .article-figure{margin:2.25rem 0;max-width:100%}
.article-content figure img,.article-content .article-figure img,.article-content img{
  display:block;width:100%;height:auto;max-width:100%;border-radius:8px;
  border:1px solid var(--light-grey)}
.article-content figure.article-figure--full{margin-left:0;margin-right:0}
.article-content figcaption{margin-top:0.6rem;font-family:var(--sans);font-size:0.8rem;
  line-height:1.5;color:var(--mid-grey)}

/* comparison / data tables inside article content */
.article-content .table-wrap{overflow-x:auto;margin:2rem 0;-webkit-overflow-scrolling:touch}
.article-content table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:0.92rem;
  border:1px solid var(--light-grey)}
.article-content th,.article-content td{text-align:left;padding:0.8rem 1rem;border:1px solid var(--light-grey);
  vertical-align:top;line-height:1.5}
.article-content thead th{background:var(--blue-dark);color:#fff;font-weight:600;letter-spacing:0.01em;
  border-color:var(--blue-dark)}
.article-content tbody tr:nth-child(even){background:var(--warm-white)}
.article-content tbody th{background:var(--cream);color:var(--blue-dark);font-weight:600}

/* callout / important note (for articles that use it) */
.article-content .callout,.article-content blockquote{margin:2rem 0;padding:1.4rem 1.6rem;
  background:rgba(201,160,32,0.07);border-left:4px solid var(--gold);border-radius:6px;
  color:var(--charcoal);line-height:1.75;font-style:normal}
.article-content .callout strong,.article-content blockquote strong{color:var(--blue-dark)}
.article-content .callout .callout-label{display:block;font-family:var(--sans);font-size:0.72rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}

/* ---- article CTA (Stage 7G) -----------------------------------------------
   The navy band is .page-cta (style.css). .article-cta is only the INNER
   content — do NOT give it its own navy box/padding/left margin, or it pins
   left inside the band (the 7F bug). It is .page-cta-inner too (max-width
   620, margin:0 auto), so it stays centred and balanced like the homepage CTA. */
.article-cta{background:none;border-radius:0;padding:0;margin-inline:auto}
.article-cta .hp-eyebrow{color:var(--gold-light)}
.article-cta h2{font-family:var(--serif);color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700;
  margin:0.6rem 0 0.6rem;border:0;padding:0}
.article-cta p{color:rgba(255,255,255,0.8);line-height:1.6;margin:0 auto 1.3rem;max-width:52ch}
.article-cta .hp-hero-actions{display:flex;flex-wrap:wrap;gap:0.9rem;justify-content:center}
.article-cta .email-line{margin:1rem 0 0;font-size:0.88rem;color:rgba(255,255,255,0.65)}
.article-cta .email-line a{color:var(--gold-light);text-decoration:none;font-weight:600}

/* ---- vertical rhythm + alignment for the article tail (Stage 7G) ----------
   Continue Reading + CTA share the canonical outer grid; trim excess whitespace
   and the oversized CTA band without cramping. */
.related-articles-section{max-width:var(--art-outer);margin-top:4rem;padding-top:2.75rem;padding-bottom:2.75rem}
.related-articles-container h2{margin-bottom:1.75rem}
.page-cta{margin-top:4rem;padding-top:clamp(2.75rem,5vw,4rem);padding-bottom:clamp(2.75rem,5vw,4rem)}