/* ═══════════════════════════════════════════════
   ARTICLE, GREEN & LIME DESIGN (every insights/ article)
   Loaded after article.css, home-v8.css and green-lime-base.css,
   scoped under body.gl. Re-skins the live article markup:
   concept hero, overlapping featured image, a readable body
   column, rounded callouts, tables and cards, dark closing CTA.
   ═══════════════════════════════════════════════ */

.gl{--read-width:680px;--gl-copy:#23332e}
.gl .progress-bar{height:4px;background:var(--gl-lime)}

/* ── HERO (shell from the base; text column 960px, image overlaps the bottom) ── */
.gl .gl-article-hero .gl-hero-inner{max-width:calc(960px + 2 * var(--gl-gutter));padding-bottom:200px}
.gl .gl-article-hero h1{max-width:22ch;margin-top:18px}
.gl .article-breadcrumb{flex-wrap:wrap;margin-bottom:22px;font-size:13px;color:rgba(255,255,255,.55)}
.gl .gl-article-hero .breadcrumb-link{display:inline-block;padding:8px 0;color:var(--gl-lime);border-bottom:0;text-decoration:underline;text-decoration-color:rgba(198,241,107,.45);text-underline-offset:4px}
.gl .gl-article-hero .breadcrumb-cat{color:rgba(255,255,255,.75)}
.gl .gl-article-hero .article-meta-top{margin-bottom:0}
.gl .gl-article-hero .cat-pill{padding:6px 12px;border:0;border-radius:999px;background:var(--gl-lime);color:var(--gl-brand);font-size:11px;letter-spacing:.12em}
.gl .gl-article-hero .article-read-time{font-size:13px;color:rgba(255,255,255,.72)}
.gl .gl-article-hero .article-deck{max-width:640px;margin:22px 0 0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.78)}
.gl .gl-article-hero .article-author-row{flex-wrap:wrap;max-width:640px;margin-top:32px;padding:18px 0;border-color:var(--gl-line-dark)}
.gl .gl-article-hero .author-name{color:#fff}
.gl .gl-article-hero .author-role{color:rgba(255,255,255,.6)}
.gl .gl-article-hero .author-divider{background:var(--gl-line-dark)}
.gl .gl-article-hero .author-date{color:rgba(255,255,255,.72)}

/* ── FEATURED IMAGE ── */
.gl .gl-article-figure{position:relative;z-index:2;max-width:calc(960px + 2 * var(--gl-gutter));margin-top:-150px}
.gl .article-hero-img{height:auto;aspect-ratio:16/9;margin:0;border-radius:22px;background:var(--gl-lime-soft);box-shadow:0 24px 60px rgba(6,57,47,.22)}
.gl .article-hero-img-caption{max-width:none;padding:12px 0 0;font-size:13px;color:var(--gl-muted)}

/* ── BODY: one readable column ── */
.gl .article-body-wrap{padding:56px var(--gl-gutter);background:none}
.gl .article-body{max-width:var(--read-width)}
.gl .article-body p{margin-bottom:22px;font-size:18px;line-height:1.75;color:var(--gl-copy)}
.gl .article-body p:last-child{margin-bottom:0}
.gl .article-body h2{margin:60px 0 18px;padding:0;border:0;font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.03em;color:var(--gl-ink)}
.gl .article-body h2::before{content:"";display:block;width:36px;height:4px;margin-bottom:16px;border-radius:2px;background:var(--gl-lime)}
.gl .article-body h3{margin:36px 0 12px;font-size:21px;line-height:1.3;letter-spacing:-.02em;color:var(--gl-brand)}
.gl .article-body strong{color:var(--gl-ink)}
.gl .article-body li{font-size:17px;line-height:1.7;color:var(--gl-copy)}
.gl .article-body ul{list-style:none;padding-left:0}
.gl .article-body ul>li{position:relative;padding-left:26px}
.gl .article-body ul>li::before{content:"";position:absolute;top:.62em;left:4px;width:8px;height:8px;border-radius:50%;background:var(--gl-teal)}
.gl .article-body ol:not(.checklist){padding-left:26px}
.gl .article-body ol:not(.checklist)>li::marker{font-weight:700;color:var(--gl-brand)}
.gl .article-body a{font-weight:700;color:var(--gl-brand);border-bottom:2px solid var(--gl-lime);transition:background-color .2s ease}
.gl .article-body a:hover{color:var(--gl-brand);background:var(--gl-lime-soft)}
.gl .article-body hr{margin:48px 0;border-top-color:var(--gl-line)}
/* callout: lime-soft card */
.gl .callout{margin:36px 0;padding:26px 28px;border:0;border-radius:22px;background:var(--gl-lime-soft)}
.gl .callout-label{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;color:var(--gl-brand)}
.gl .callout-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gl-brand)}
.gl .callout p,.gl .callout li{font-size:16px;line-height:1.65;color:var(--gl-brand)}
/* blockquote: dark card with a lime quote mark */
.gl .article-body blockquote{margin:40px 0;padding:30px 32px 32px;border:0;border-radius:22px;background:var(--gl-brand);font-style:normal}
.gl .article-body blockquote::before{content:"\201C";display:block;margin-bottom:10px;font-size:56px;font-weight:700;line-height:.6;color:var(--gl-lime)}
.gl .article-body blockquote p{font-size:20px;line-height:1.6;color:#fff}
.gl .article-body blockquote strong{color:var(--gl-lime)}
/* numbered checklist */
.gl .checklist li{gap:14px;font-size:17px;border-bottom-color:var(--gl-line)}
.gl .check-num{width:28px;height:28px;margin-top:0;background:var(--gl-lime);color:var(--gl-brand);font-size:12px}
/* tables: white rounded card; wide tables scroll inside the card, never the page */
.gl .table-scroll{margin:32px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gl-line);border-radius:14px;background:#fff}
.gl .table-scroll table{width:100%;border-collapse:collapse}
.gl .table-scroll table:has(th:nth-child(3)){min-width:540px}
.gl .table-scroll th{padding:14px 16px;text-align:left;vertical-align:bottom;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gl-lime);background:var(--gl-brand)}
.gl .table-scroll td{padding:14px 16px;vertical-align:top;font-size:15px;line-height:1.55;color:var(--gl-copy);border-top:1px solid var(--gl-line)}
.gl .table-scroll tbody tr:nth-child(even) td{background:#f8faf6}

/* ── AUTHOR BIO ── */
.gl .author-bio-wrap{padding:0 var(--gl-gutter) 56px}
.gl .author-bio-card{padding:32px;background:#fff;border:1px solid var(--gl-line);border-radius:22px}
.gl .author-bio-av{border-color:var(--gl-lime-soft)}
.gl .author-bio-name{color:var(--gl-ink)}
.gl .author-bio-title{color:var(--gl-muted)}
.gl .author-bio-text{font-size:15px;color:var(--gl-muted)}
.gl .author-bio-link{padding:10px 0;border-bottom:0;color:var(--gl-brand)}

/* ── CLOSING CTA: dark card with glows and a lime pill button ── */
.gl .article-cta-wrap{padding:0 var(--gl-gutter)}
.gl .article-cta{isolation:isolate;padding:44px 40px;border-radius:22px;background:var(--gl-brand)}
.gl .article-cta::before{display:none}
.gl .article-cta>:not(.gl-glow){position:relative;z-index:1}
.gl .article-cta .gl-glow-lime{top:-320px;right:-280px}
.gl .article-cta .gl-glow-teal{bottom:-420px;left:-360px}
.gl .article-cta-label{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;color:var(--gl-lime)}
.gl .article-cta-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gl-lime);box-shadow:0 0 0 4px rgba(198,241,107,.18)}
.gl .article-cta-title{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.03em}
.gl .article-cta-sub{font-size:16px;line-height:1.6;color:rgba(255,255,255,.75)}
.gl .article-cta-btn{min-height:48px;padding:12px 24px;border-radius:999px;background:var(--gl-lime);color:var(--gl-brand);font-size:15px;transition:background-color .2s ease,transform .2s ease}
.gl .article-cta-btn:hover{background:var(--gl-lime-hover);transform:translateY(-2px)}
.gl .article-cta-btn svg{stroke:var(--gl-brand)}

/* ── RELATED ARTICLES: concept insight cards ── */
.gl .related-section{padding:var(--gl-s) 0;background:none}
.gl .related-inner{max-width:calc(var(--gl-max) + 2 * var(--gl-gutter));padding:0 var(--gl-gutter)}
.gl .related-header{margin-bottom:var(--gl-head)}
.gl .related-header .gl-eyebrow{margin-bottom:14px}
.gl .related-header h2{margin:0}
.gl .related-link{padding:10px 0;border-bottom:0;color:var(--gl-brand)}
.gl .article-card{border-color:var(--gl-line);border-radius:22px;transition:transform .3s ease,box-shadow .3s ease}
.gl .article-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(6,57,47,.1)}
.gl .article-thumb{height:auto;aspect-ratio:16/10;border-bottom-color:var(--gl-line)}
.gl .article-card .cat-pill{padding:5px 12px;border:0;border-radius:999px;background:var(--gl-lime-soft);color:var(--gl-brand)}
.gl .article-read,.gl .article-date{color:var(--gl-muted)}
.gl .article-card-title{font-size:18px;letter-spacing:-.02em;color:var(--gl-ink)}
.gl .article-excerpt{font-size:15px;color:var(--gl-muted)}
.gl .article-footer-card{border-top-color:var(--gl-line)}
.gl .article-author-name{color:var(--gl-ink)}
.gl .article-read-link{padding:12px 0;border-bottom:0;color:var(--gl-brand)}

/* ── RESPONSIVE ── */
@media(max-width:1080px){
  .gl .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .gl .gl-article-hero .gl-hero-inner{padding-bottom:140px}
  .gl .gl-article-hero .article-deck{font-size:17px}
  .gl .gl-article-figure{margin-top:-104px}
  .gl .article-hero-img{border-radius:16px}
  .gl .article-body-wrap{padding:40px var(--gl-gutter)}
  .gl .author-bio-wrap{padding-bottom:40px}
  .gl .article-body p{font-size:17px}
  .gl .article-body li,.gl .checklist li{font-size:16px}
  .gl .article-body h2{margin-top:48px;font-size:26px}
  .gl .article-body h3{font-size:19px}
  .gl .callout{padding:22px 20px}
  .gl .article-body blockquote{padding:24px 22px 26px}
  .gl .article-body blockquote p{font-size:18px}
  .gl .author-bio-card{padding:24px}
  .gl .article-cta{padding:32px 24px}
  .gl .related-grid{grid-template-columns:minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .gl .article-card,.gl .article-cta-btn{transition:none}
  .gl .article-card:hover,.gl .article-cta-btn:hover{transform:none}
}