/* ═══ ARTICLE LAYOUT v2 (type scale v3, 2026-09-23) . Loaded only by remade article pages ═══ */
:root{--ax-text:#2b2f37;--ax-muted:#5f6673;--ax-tint:#faf8f3;--ax-line:#e6e3dc}

/* reading progress */
.ax-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:400;pointer-events:none}
.ax-progress span{display:block;height:100%;width:0;background:var(--gold)}

/* hero: navy fallback, same 1440 grid as the body, shorter */
.ax-hero{background:var(--navy);min-height:300px;padding-top:104px}
.ax-hero .hero-bg img{filter:brightness(.3)}
.ax-hero .hero-inner{max-width:1440px;padding:0 56px 44px}
.ax-hero h1{max-width:780px;font-size:clamp(25px,2.1vw,32px);line-height:1.15}
.ax-hero .hero-p{max-width:580px;color:rgba(255,255,255,.78);font-size:14px}
.ax-hero .hero-stat{color:rgba(255,255,255,.6)}

/* one meta strip: breadcrumb left, author, dates, share right */
.ax-meta,.ax-meta.article-meta{border-bottom:1px solid var(--ax-line);background:#fff;padding:0}
.ax-meta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.ax-crumbs{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ax-muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ax-crumbs a{color:var(--ax-muted)}.ax-crumbs a:hover{color:var(--gold)}
.ax-crumbs b{color:var(--ink);font-weight:500}
.ax-meta-right{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.ax-byline{display:flex;align-items:center;gap:12px}
.ax-by-name{display:block;font-family:var(--serif);font-size:14px;color:var(--ink);line-height:1.2}
.ax-by-role{display:block;font-size:11.5px;color:var(--ax-muted)}
.ax-avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13px;letter-spacing:.04em;flex-shrink:0}
.ax-avatar--lg{width:42px;height:42px;font-size:15px}
.ax-dates{display:flex;gap:20px;font-size:12px;color:var(--ink)}
.ax-dates i{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ax-muted)}
.ax-share{display:flex;gap:8px}

/* three column grid: contents | reading column | rail */
.ax-wrap{padding:44px 0 72px}
.ax-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 270px;gap:56px;align-items:start}
.ax-grid>*{min-width:0}
.ax-body{max-width:660px;width:100%;justify-self:center}

/* contents */
.ax-toc{position:sticky;top:104px}
.ax-toc-h{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:14px}
.ax-toc a{display:block;font-size:12.5px;line-height:1.4;color:var(--ax-muted);padding:9px 0 9px 14px;border-left:2px solid var(--ax-line);transition:.2s}
.ax-toc a:hover{color:var(--ink)}
.ax-toc a.on{color:var(--ink);border-left-color:var(--gold);font-weight:500}
.ax-toc-m{display:none}

/* type */
.ax-body{color:var(--ax-text)}
.ax-body p{font-size:15px;line-height:1.7;font-weight:400;margin:0 0 16px}
.ax-body a{color:var(--ink);border-bottom:1px solid var(--gold)}
.ax-body a:hover{color:var(--gold)}
.ax-body strong{color:var(--ink);font-weight:600}
.ax-dek{font-family:var(--serif);font-style:italic;font-size:17px!important;line-height:1.5!important;color:#3b4150;margin-bottom:24px!important}
.ax-body h2{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.22;color:var(--ink);margin:48px 0 14px;scroll-margin-top:100px}
.ax-body h3{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.3;color:var(--ink);margin:28px 0 8px;scroll-margin-top:100px}
.ax-body ul,.ax-body ol{margin:0 0 20px;padding:0;list-style:none}
.ax-body li{position:relative;font-size:15px;line-height:1.65;padding:0 0 8px 22px}
.ax-body ul li:before{content:'';position:absolute;left:0;top:12px;width:12px;height:2px;background:var(--gold)}
.ax-steps{counter-reset:s}
.ax-steps li{counter-increment:s;padding-left:40px;padding-bottom:12px}
.ax-steps li:before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center}

/* one box system: full column width, one left edge, one rule */
.ax-box{background:var(--ax-tint);border-left:3px solid var(--gold);padding:22px 26px;margin:28px 0 30px}
.ax-box-h{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:16px}
.ax-box ul{margin:0}
.ax-box li{font-size:14.5px;padding-bottom:7px}
.ax-box li:last-child{padding-bottom:0}
.ax-box li:before{top:11px}
.ax-box--cta{background:var(--navy);border-left-color:var(--gold);color:#fff}
.ax-box--cta .ax-box-h{color:var(--gold)}
.ax-box--cta p{color:rgba(255,255,255,.78);font-size:14px;margin-bottom:16px}
.ax-box--cta .ax-cta-t{font-family:var(--serif);font-size:19px;color:#fff;line-height:1.25;margin-bottom:10px}

.ax-btn{display:inline-block;background:var(--gold);color:#fff!important;border:none!important;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;padding:14px 26px;transition:.2s}
.ax-btn:hover{background:var(--gold-dark)}

/* tables: same edge, scroll on small screens */
.ax-table{margin:32px 0 40px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ax-line)}
.ax-table table{width:100%;border-collapse:collapse;min-width:540px;font-size:13.5px}
.ax-table caption{caption-side:top;text-align:left;font-family:var(--serif);font-size:15px;color:var(--ink);padding:16px 18px 12px}
.ax-table th{background:var(--navy);color:#fff;font-weight:500;text-align:left;padding:10px 13px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ax-table td{padding:11px 13px;border-top:1px solid var(--ax-line);vertical-align:top;line-height:1.55;color:var(--ax-text)}
.ax-table td:first-child{font-weight:600;color:var(--ink)}
.ax-table tbody tr:nth-child(even){background:#fbfaf7}

/* figure, quote, source */
.ax-fig{margin:32px 0}
.ax-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#d9dde5}
.ax-fig figcaption{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.55;color:var(--ax-muted);text-align:center;max-width:600px;margin:14px auto 0}
.ax-quote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.4;color:var(--ink);border-left:3px solid var(--gold);padding:4px 0 4px 24px;margin:34px 0}
.ax-source{font-size:13px!important;color:var(--ax-muted);border-top:1px solid var(--ax-line);padding-top:12px}

/* FAQ accordion */
.ax-faq{border-top:1px solid var(--ax-line)}
.ax-faq details{border-bottom:1px solid var(--ax-line)}
.ax-faq summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:16px;color:var(--ink);padding:15px 36px 15px 0;position:relative}
.ax-faq summary::-webkit-details-marker{display:none}
.ax-faq summary:after{content:'+';position:absolute;right:4px;top:11px;font-family:var(--sans);font-size:20px;color:var(--gold);font-weight:300}
.ax-faq details[open] summary:after{content:'–'}
.ax-faq details p{margin:0 0 16px;font-size:14.5px}

/* right rail */
.ax-rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.ax-card{border:1px solid var(--ax-line);padding:20px}
.ax-card p{font-size:13.5px;line-height:1.65;color:var(--ax-text);margin:12px 0 16px}
.ax-card--navy{background:var(--navy);border-color:var(--navy)}
.ax-card--navy p{color:rgba(255,255,255,.78)}
.ax-card-k{display:block;font-family:var(--serif);font-size:17px;line-height:1.25;color:#fff}
.ax-card .ax-btn{display:block;text-align:center}
.ax-card-link{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)!important;font-weight:500}
.ax-card-author{display:flex;gap:14px;align-items:center}
.ax-card-author b{display:block;font-family:var(--serif);font-weight:500;font-size:15px;color:var(--ink)}
.ax-card-author span:not(.ax-avatar){font-size:12.5px;color:var(--ax-muted)}

/* readable credentials bar */
.cred{color:var(--ax-muted)}

/* ≤1240: rail drops under the article */
@media(max-width:1240px){
  .ax-grid{grid-template-columns:200px minmax(0,1fr);gap:48px}
  .ax-rail{grid-column:2;position:static;display:grid;grid-template-columns:1fr 1fr;max-width:720px;width:100%;justify-self:center}
}
/* ≤900: one column, contents becomes a dropdown */
@media(max-width:900px){
  .ax-hero .hero-inner{padding:0 20px 36px}
  .c{padding:0 20px}
  .ax-meta-right{gap:18px}
  .ax-wrap{padding:36px 0 64px}
  .ax-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .ax-toc{display:none}
  .ax-rail{grid-column:1;grid-template-columns:1fr}
  .ax-toc-m{display:block;border:1px solid var(--ax-line);margin-bottom:28px}
  .ax-toc-m summary{cursor:pointer;padding:14px 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500}
  .ax-toc-m a{display:block;border:none;border-top:1px solid var(--ax-line);padding:12px 18px;font-size:15px}
  .ax-body p,.ax-body li{font-size:15px}
  .ax-dek{font-size:16.5px!important}
  .ax-body h2{font-size:21px;margin-top:40px}
  .ax-body h3{font-size:17px}
  .ax-box{padding:22px 20px}
  .ax-quote{font-size:18px;padding-left:16px}
}

/* gated download band */
.gated{padding:40px 0;border-bottom:1px solid var(--bd);background:var(--navy);color:#fff}
.gated-row{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
@media(max-width:1024px){.gated-row{grid-template-columns:1fr}}
.gated .ey{color:var(--gold);display:block}
.gated h3{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.15;margin:6px 0 10px;color:#fff}
.gated h3 em{font-style:italic;color:var(--gold)}
.gated p{color:rgba(255,255,255,.55);font-size:15px;line-height:1.6;font-weight:300;margin-bottom:10px}
.gated-card{background:#fff;color:var(--ink);padding:24px;border:1px solid rgba(255,255,255,.1)}
.gated-card .submit-btn{width:100%;padding:15px 18px;background:var(--gold);color:#fff;border:none;font-size:12px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;font-weight:500;margin-top:6px;font-family:var(--sans)}
.gated-card .submit-btn:hover{background:var(--gold-dark)}
.gated-foot{font-size:11px;color:var(--t3);margin-top:10px;line-height:1.5}
.gated-card .submit-btn{display:block;text-align:center;text-decoration:none}
.gated-card p{color:var(--ax-muted)!important;font-size:13px!important;margin:0 0 14px!important;line-height:1.6!important}

/* newsletter and Vendor Shield banners, after the article */
.ax-banners{padding:0 0 64px}
.ax-banner-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ax-banner{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:30px 32px;border-left:3px solid var(--gold);background:var(--ax-tint);min-height:170px}
.ax-banner--navy{background:var(--navy)}
.ax-banner-k{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px}
.ax-banner-t{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink)}
.ax-banner--navy .ax-banner-t{color:#fff}
.ax-banner p{font-size:13.5px;line-height:1.6;color:var(--ax-muted);margin-top:8px}
.ax-banner--navy p{color:rgba(255,255,255,.75)}
.ax-banner .ax-btn{align-self:flex-start}

/* read next */
.ax-next{padding:64px 0;border-top:1px solid var(--ax-line)}
.ax-next-h{font-family:var(--serif);font-size:23px;color:var(--ink);margin-bottom:28px}
.ax-next-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ax-next-i{border-top:3px solid var(--gold);padding:20px 0 0}
.ax-next-i a{font-family:var(--serif);font-size:16.5px;line-height:1.3;color:var(--ink);display:block;margin-bottom:8px}
.ax-next-i a:hover{color:var(--gold)}
.ax-next-i p{font-size:13.5px;line-height:1.6;color:var(--ax-muted)}
.ax-video{margin:36px 0 40px}
.ax-video .vqe,.ax-video .sve{margin:0}
@media(max-width:900px){.ax-banner-row,.ax-next-g{grid-template-columns:1fr}}

/* remade articles: smaller hero than the sitewide unified hero (which uses !important) */
.hero.ax-hero{min-height:300px!important;padding-top:100px!important}
.hero.ax-hero .hero-inner{padding-bottom:30px!important}
.hero.ax-hero h1{font-size:clamp(24px,2.1vw,32px)!important;line-height:1.15!important;margin-bottom:12px!important;max-width:780px}
.hero.ax-hero .hero-p{font-size:14px!important;line-height:1.65!important;margin-bottom:18px!important}
.hero.ax-hero .hero-label{margin-bottom:10px!important}
.hero.ax-hero .hero-stat strong{font-size:19px}
@media(max-width:760px){.hero.ax-hero{min-height:280px!important;padding-top:84px!important}.hero.ax-hero h1{font-size:24px!important}}