/* 99 Digital v2 — blog article pages: cinematic header, long-form typography, metrics, FAQ, end CTA, related cards.
   Scoped to .article-head / .article-photo-hero / .single-article / .related-articles (unique to /blog/<slug>). */

/* ───────────── Header ───────────── */
html body main:not(#v2) .article-head{
  position:relative;isolation:isolate;overflow:hidden;color:var(--v2-on-dark)!important;border:0!important;box-shadow:none!important;
  background:
    radial-gradient(1100px 560px at 50% -12%,#14583390,transparent 62%),
    radial-gradient(760px 480px at 92% 70%,#0c6b4a50,transparent 60%),
    radial-gradient(640px 440px at 4% 80%,#0e5a2e40,transparent 62%),
    var(--v2-ink)!important;
  padding:clamp(56px,6.5vw,104px) 0 clamp(150px,17vw,270px)!important;
}
html body main:not(#v2) .article-head:before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(#9bf0c833 1px,transparent 1.4px);background-size:34px 34px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 5%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 5%,transparent 75%);
}
html body main:not(#v2) .article-head>.wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:start}
html body main:not(#v2) .article-head nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 clamp(28px,3.4vw,52px)!important;font-size:15px!important;color:var(--v2-on-dark-muted)!important;
}
html body main:not(#v2) .article-head nav a{color:var(--v2-on-dark)!important;text-decoration:none;border-bottom:1px solid #ffffff33;transition:color .3s,border-color .3s}
html body main:not(#v2) .article-head nav a:hover{color:var(--v2-mint)!important;border-color:var(--v2-mint)}
html body main:not(#v2) .article-head .wrap>span:has(+h1){
  display:inline-flex!important;align-items:center;gap:10px;background:#52e3a41a!important;border:1px solid #52e3a44d!important;border-radius:999px;padding:7px 18px!important;
  color:var(--v2-mint)!important;font-size:15px!important;font-weight:600;letter-spacing:0!important;
}
html body main:not(#v2) .article-head h1{
  color:#fff!important;font-size:clamp(36px,5.6vw,92px)!important;font-weight:800!important;line-height:1.04!important;letter-spacing:-.045em!important;
  max-width:19ch;margin:clamp(20px,2.4vw,34px) 0 0!important;text-wrap:balance;
}
html[dir=ltr] body main:not(#v2) .article-head h1{letter-spacing:-.035em!important;max-width:22ch}
html body main:not(#v2) .article-head .wrap>p{
  color:var(--v2-on-dark-muted)!important;font-size:clamp(17px,1.6vw,24px)!important;line-height:1.6;max-width:56ch;margin:clamp(20px,2.4vw,36px) 0 0!important;
}
html body main:not(#v2) .article-head .article-meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(28px,3.2vw,48px)!important;padding-top:clamp(18px,2vw,26px);border-top:1px solid #ffffff1f;width:100%;
}
html body main:not(#v2) .article-head .article-meta-row small{color:var(--v2-on-dark)!important;font-size:15px!important;font-weight:500}
html body main:not(#v2) .article-head .article-meta-row i{width:5px;height:5px;border-radius:50%;background:var(--v2-mint)!important}
html body main:not(#v2) .article-head .article-meta-row small:first-child{color:#fff!important;font-weight:700}

/* ───────────── Photo hero (overlaps the dark header) ───────────── */
html body main:not(#v2) .article-photo-hero{
  position:relative;z-index:3;overflow:hidden;width:min(1280px,100% - var(--v2-gutter)*2);margin:calc(-1*clamp(96px,12vw,190px)) auto 0;height:min(660px,50vw);
  border-radius:clamp(24px,3.2vw,48px);background:var(--v2-ink-2);box-shadow:0 60px 120px -50px #06140dd0,0 0 0 1px #ffffff14;
}
html body main:not(#v2) .article-photo-hero>img{
  position:absolute;inset:-7% 0 auto 0;width:100%;height:114%;max-width:none;object-fit:cover;display:block;will-change:transform;
}
html body main:not(#v2) .article-photo-hero:after{inset:50% 0 0;background:linear-gradient(#06140d00,#06140dcc)}
html body main:not(#v2) .article-photo-hero>.wrap{
  position:absolute;z-index:3;inset:auto clamp(18px,2.4vw,36px) clamp(18px,2.2vw,32px) clamp(18px,2.4vw,36px);width:auto;max-width:none;margin:0;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
html body main:not(#v2) .article-photo-hero>.wrap>span{
  position:static;background:var(--v2-mint)!important;color:var(--v2-ink)!important;border-radius:999px;padding:9px 20px!important;font-size:15px!important;font-weight:700;letter-spacing:0;
}
html body main:not(#v2) .article-photo-hero>.wrap>b{
  color:#fff!important;font-size:15px!important;font-weight:600;letter-spacing:0!important;background:#06140d88;border:1px solid #ffffff2a;border-radius:999px;padding:9px 18px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* ───────────── Reading layout ───────────── */
html body main:not(#v2) .single-article{
  display:grid;grid-template-columns:minmax(200px,250px) minmax(0,730px);justify-content:center;gap:clamp(40px,7vw,120px);
  padding:clamp(56px,6vw,104px) 0 clamp(64px,7vw,112px);width:min(1240px,100% - var(--v2-gutter)*2);align-items:start;
}
html body main:not(#v2) .article-toc{
  position:sticky;top:112px;display:flex;flex-direction:column;gap:0;background:none!important;border-radius:0;padding:0!important;
  border-inline-start:1px solid var(--v2-line);max-height:calc(100vh - 150px);overflow:auto;scrollbar-width:thin;
}
html body main:not(#v2) .article-toc b{color:var(--v2-green-2)!important;font-size:15px!important;font-weight:700;padding:0 20px 14px;display:block}
html body main:not(#v2) .article-toc a{
  position:relative;display:block;color:var(--v2-muted)!important;font-size:14.5px;line-height:1.45;padding:8px 20px;text-decoration:none;transition:color .3s var(--v2-ease),padding .4s var(--v2-ease);
}
html body main:not(#v2) .article-toc a:before{
  content:'';position:absolute;inset-inline-start:-2px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--v2-mint);transform:scaleY(0);transition:transform .45s var(--v2-ease);
}
html body main:not(#v2) .article-toc a:hover{color:var(--v2-green)!important}
html body main:not(#v2) .article-toc a.is-active{color:var(--v2-ink)!important;font-weight:700;padding-inline-start:26px}
html body main:not(#v2) .article-toc a.is-active:before{transform:scaleY(1);background:var(--v2-green-2)}

html body main:not(#v2) .article-text{width:auto;max-width:none;margin:0;min-width:0}
html body main:not(#v2) .article-text p{
  color:#27402f!important;font-size:clamp(17.5px,1.3vw,20px)!important;line-height:1.95!important;margin:0 0 1.3em!important;max-width:68ch;
}
html body main:not(#v2) .article-text p.lead{
  color:var(--v2-ink)!important;font-size:clamp(22px,2.1vw,31px)!important;font-weight:500!important;line-height:1.55!important;letter-spacing:-.015em;
  max-width:none;margin:0 0 clamp(24px,3vw,40px)!important;padding-inline-start:clamp(18px,2vw,30px);border-inline-start:4px solid var(--v2-mint);
}
html body main:not(#v2) .article-keyline{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(20px,3vw,36px)!important}
html body main:not(#v2) .article-keyline span{
  display:inline-flex;align-items:center;gap:10px;background:#eaf5ee!important;color:var(--v2-green)!important;border-radius:999px;padding:10px 20px!important;font-size:15px!important;font-weight:600;
}
html body main:not(#v2) .article-keyline span:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--v2-green-2)}

html body main:not(#v2) .article-text>section{
  position:relative;margin-top:clamp(40px,5vw,72px)!important;padding-top:clamp(28px,3.6vw,52px);border-top:1px solid var(--v2-line);scroll-margin-top:110px;
}
html body main:not(#v2) .article-text>section>small{
  display:flex;align-items:center;gap:14px;margin:0 0 16px!important;color:var(--v2-green-2)!important;font-size:16px!important;font-weight:800;letter-spacing:0!important;font-variant-numeric:tabular-nums;
}
html body main:not(#v2) .article-text>section>small:after{
  content:'';flex:0 0 clamp(40px,6vw,88px);height:2px;background:linear-gradient(90deg,var(--v2-green-2),transparent);transform-origin:var(--d-origin,right) center;
  transform:scaleX(var(--d-line,1));transition:transform 1.2s var(--v2-ease);
}
html[dir=ltr] body main:not(#v2) .article-text>section>small:after{--d-origin:left}
html[dir=rtl] body main:not(#v2) .article-text>section>small:after{background:linear-gradient(270deg,var(--v2-green-2),transparent)}
html.v2-motion body main:not(#v2) .article-text>section:not(.d-in)>small{--d-line:0}
html body main:not(#v2) .article-text h2,html body main:not(#v2) .article-text>section>h2{
  color:var(--v2-ink)!important;font-size:clamp(28px,3.3vw,48px)!important;font-weight:800!important;line-height:1.1!important;letter-spacing:-.04em!important;margin:0 0 .65em!important;text-wrap:balance;
}
html[dir=ltr] body main:not(#v2) .article-text h2{letter-spacing:-.03em!important}
html body main:not(#v2) .article-text p.article-numbered{
  position:relative;background:linear-gradient(100deg,#fff,#f2faf5)!important;border:1px solid var(--v2-line);border-radius:22px;padding:20px 28px!important;margin:12px 0!important;
  color:var(--v2-ink)!important;font-weight:500;font-size:clamp(17px,1.25vw,19px)!important;line-height:1.7!important;box-shadow:0 20px 40px -32px #10261a55;
}
html body main:not(#v2) .article-text p.article-numbered::first-letter{color:var(--v2-green-2);font-weight:800;font-size:1.5em}

/* ───────────── Metrics: big numbers on dark ───────────── */
html body main:not(#v2) .article-text .article-metrics{
  position:relative;isolation:isolate;overflow:hidden;color:#fff!important;border:0!important;border-radius:clamp(28px,3.4vw,48px);padding:clamp(30px,4.4vw,64px)!important;margin:clamp(56px,6vw,96px) 0!important;
  background:radial-gradient(700px 420px at 100% 0%,#145833cc,transparent 64%),radial-gradient(560px 380px at 0% 110%,#0c6b4a88,transparent 62%),var(--v2-ink)!important;box-shadow:0 50px 100px -60px #06140dcc;
}
html body main:not(#v2) .article-text .article-metrics>small{color:var(--v2-mint)!important;font-size:15px!important;font-weight:600;letter-spacing:0!important;margin:0 0 12px!important}
html body main:not(#v2) .article-text .article-metrics>h2{color:#fff!important;font-size:clamp(28px,3.4vw,52px)!important;margin:0 0 16px!important}
html body main:not(#v2) .article-text .article-metrics>p{color:var(--v2-on-dark-muted)!important;font-size:clamp(16px,1.25vw,18px)!important;line-height:1.75!important;max-width:56ch}
html body main:not(#v2) .article-metrics>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,44px)}
html body main:not(#v2) .article-metrics article{
  --mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:30px;min-height:170px;padding:clamp(20px,2vw,28px)!important;
  border:1px solid #ffffff1f!important;border-radius:26px!important;background:#ffffff0a!important;overflow:hidden;transition:border-color .4s,transform .6s var(--v2-ease),background .4s;
}
html body main:not(#v2) .article-metrics article:before{
  content:'';position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx) var(--my),#52e3a433,transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none;
}
html body main:not(#v2) .article-metrics article:hover{border-color:#52e3a480!important;transform:translateY(-4px)}
html body main:not(#v2) .article-metrics article:hover:before{opacity:1}
html body main:not(#v2) .article-metrics article i{
  width:auto!important;height:auto!important;background:none!important;color:var(--v2-mint)!important;border-radius:0;display:block;font-size:clamp(44px,5vw,76px)!important;font-weight:800;line-height:.9;letter-spacing:-.05em;font-style:normal;
}
html body main:not(#v2) .article-metrics article b{color:#fff!important;font-size:clamp(17px,1.4vw,21px)!important;font-weight:700;line-height:1.35;position:relative}

/* ───────────── Checklist ───────────── */
html body main:not(#v2) .article-text .article-checklist{
  border:0!important;border-radius:clamp(26px,3vw,42px);padding:clamp(28px,4vw,56px)!important;margin:clamp(48px,5vw,80px) 0!important;
  background:linear-gradient(160deg,#e4f6ec,#f3f8ee)!important;position:relative;overflow:hidden;
}
html body main:not(#v2) .article-text .article-checklist>small{color:var(--v2-green-2)!important;font-size:15px!important;font-weight:700;letter-spacing:0!important;margin:0 0 10px}
html body main:not(#v2) .article-text .article-checklist>h2{color:var(--v2-ink)!important;font-size:clamp(26px,2.8vw,40px)!important;margin:0 0 clamp(18px,2vw,28px)!important}
html body main:not(#v2) .article-text .article-checklist p{
  display:block;max-width:none!important;margin:0!important;padding:16px 0;border-top:1px solid #0f4b2420;color:var(--v2-ink)!important;font-size:clamp(17px,1.3vw,20px)!important;font-weight:500;line-height:1.5!important;
  transition:padding .4s var(--v2-ease),color .3s;
}
html body main:not(#v2) .article-checklist p::first-letter{
  background:var(--v2-green-2);color:#fff;border-radius:50%;padding:.12em .38em;margin-inline-end:.4em;font-weight:800;font-size:.8em;
}
html body main:not(#v2) .article-checklist p:hover{padding-inline-start:10px}

/* ───────────── FAQ ───────────── */
html body main:not(#v2) .article-questions{margin:clamp(56px,6vw,96px) 0 0!important}
html body main:not(#v2) .article-questions>small{color:var(--v2-green-2)!important;font-size:15px!important;font-weight:600;letter-spacing:0!important;display:block;margin-bottom:10px}
html body main:not(#v2) .article-questions>h2{font-size:clamp(24px,2.5vw,36px)!important;margin:0 0 clamp(20px,2.4vw,32px)!important}
html body main:not(#v2) .article-questions details{border:0!important;border-top:1px solid var(--v2-line)!important;padding:0!important}
html body main:not(#v2) .article-questions details:last-of-type{border-bottom:1px solid var(--v2-line)!important}
html body main:not(#v2) .article-questions summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:clamp(20px,2.2vw,28px) 0;
  color:var(--v2-ink)!important;font-size:clamp(17px,1.4vw,21px);font-weight:700;line-height:1.45;letter-spacing:-.01em;transition:color .3s;
}
html body main:not(#v2) .article-questions summary::-webkit-details-marker{display:none}
html body main:not(#v2) .article-questions summary:hover{color:var(--v2-green-2)!important}
html body main:not(#v2) .article-questions summary:after{
  content:'+';flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eaf5ee;color:var(--v2-green);font-size:26px;font-weight:400;line-height:1;
  transition:transform .5s var(--v2-ease),background .3s,color .3s;
}
html body main:not(#v2) .article-questions details[open] summary:after{transform:rotate(135deg);background:var(--v2-ink);color:var(--v2-mint)}
html body main:not(#v2) .article-questions details[open]>p{animation:d-faq .6s var(--v2-ease) both}
@keyframes d-faq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
html body main:not(#v2) .article-questions details>p{margin:0 0 clamp(20px,2.2vw,28px)!important;padding-inline-end:62px}

/* ───────────── Summary + CTA: one dark end-cap ───────────── */
html body main:not(#v2) .article-text .summary{
  position:relative;overflow:hidden;isolation:isolate;margin:clamp(56px,6vw,96px) 0 0!important;padding:clamp(32px,4.4vw,64px)!important;border:0!important;
  border-radius:clamp(28px,3.4vw,48px) clamp(28px,3.4vw,48px) 0 0;color:#fff!important;
  background:radial-gradient(700px 420px at 100% 0%,#145833cc,transparent 64%),radial-gradient(520px 340px at 0% 110%,#0c6b4a88,transparent 62%),var(--v2-ink)!important;
}
html body main:not(#v2) .summary b{display:block;color:var(--v2-mint)!important;font-size:16px;font-weight:700;margin:0 0 16px}
html body main:not(#v2) .article-text .summary p{
  color:#fff!important;font-size:clamp(21px,2.1vw,32px)!important;font-weight:500!important;line-height:1.5!important;letter-spacing:-.02em;margin:0!important;max-width:34ch;text-wrap:pretty;
}
html body main:not(#v2) .article-text>a.btn.coral{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:clamp(72px,7vw,96px);margin:0!important;padding-inline:32px;
  border-radius:0 0 clamp(28px,3.4vw,48px) clamp(28px,3.4vw,48px)!important;border:0!important;background:var(--v2-mint)!important;color:var(--v2-ink)!important;
  font-size:clamp(18px,1.6vw,24px);font-weight:800;box-shadow:none!important;position:relative;overflow:hidden;transition:background .4s,letter-spacing .5s var(--v2-ease);
}
html body main:not(#v2) .article-text>a.btn.coral:hover{transform:none;background:#7df0bb!important;letter-spacing:.01em}

/* ───────────── Related articles ───────────── */
html body main:not(#v2) .related-articles{background:var(--v2-paper-2)!important;border-top:0!important;border-radius:clamp(32px,5vw,72px) clamp(32px,5vw,72px) 0 0;padding-block:clamp(72px,8vw,128px)}
html body main:not(#v2) .related-articles .heading.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
html body main:not(#v2) .related-articles .heading.row>a{
  display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;border:1px solid var(--v2-ink);color:var(--v2-ink)!important;font-weight:700;font-size:16px;text-decoration:none;
  transition:background .3s,color .3s;
}
html body main:not(#v2) .related-articles .heading.row>a:hover{background:var(--v2-ink);color:var(--v2-mint)!important}
html body main:not(#v2) .related-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
html body main:not(#v2) .related-article-grid>a{
  --mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0!important;border-radius:clamp(24px,2.4vw,34px)!important;background:#fff!important;
  border:1px solid var(--v2-line)!important;box-shadow:0 24px 50px -36px #10261a50!important;text-decoration:none;
  transition:transform .6s var(--v2-ease),box-shadow .6s var(--v2-ease),border-color .4s;
}
html body main:not(#v2) .related-article-grid>a:hover{transform:translateY(-8px);border-color:#52e3a480!important;box-shadow:0 44px 80px -40px #0f4b2466!important}
html body main:not(#v2) .related-article-grid>a>img{
  width:calc(100% - 20px);margin:10px 10px 0;height:clamp(190px,17vw,250px);object-fit:cover;border-radius:calc(clamp(24px,2.4vw,34px) - 10px)!important;display:block;transition:scale 1.3s var(--v2-ease);
}
html body main:not(#v2) .related-article-grid>a:hover>img{scale:1.04}
html body main:not(#v2) .related-article-grid>a>small{color:var(--v2-green-2)!important;font-size:14px!important;font-weight:600;margin:24px clamp(22px,2vw,30px) 8px!important;letter-spacing:0}
html body main:not(#v2) .related-article-grid>a>h3{color:var(--v2-ink)!important;font-size:clamp(20px,1.7vw,25px)!important;font-weight:800;letter-spacing:-.03em;line-height:1.25;margin:0 clamp(22px,2vw,30px) 22px!important;text-wrap:balance}
html body main:not(#v2) .related-article-grid>a>span{
  margin:auto clamp(22px,2vw,30px) clamp(22px,2vw,28px)!important;padding-top:18px;border-top:1px solid var(--v2-line);color:var(--v2-green)!important;font-size:15px!important;font-weight:700;
  transition:padding .4s var(--v2-ease);
}
html body main:not(#v2) .related-article-grid>a:hover>span{padding-inline-start:10px}

/* progress bar polish */
.v2-progress{height:4px}
.v2-progress i{box-shadow:0 0 14px #52e3a4aa}

/* ───────────── Tablet / mobile ───────────── */
@media(max-width:1000px){
  html body main:not(#v2) .single-article{grid-template-columns:minmax(0,1fr);gap:28px;width:min(760px,100% - var(--v2-gutter)*2)}
  html body main:not(#v2) .article-toc{
    position:static;flex-direction:row;align-items:center;gap:8px;max-height:none;border:0;overflow-x:auto;padding-bottom:10px!important;scroll-snap-type:x proximity;
    margin-inline:calc(-1*var(--v2-gutter));padding-inline:var(--v2-gutter)!important;
  }
  html body main:not(#v2) .article-toc b{padding:0 6px 0 0;white-space:nowrap;flex:none}
  html body main:not(#v2) .article-toc a{flex:none;white-space:nowrap;padding:9px 16px;border-radius:999px;background:#eaf5ee;scroll-snap-align:start}
  html body main:not(#v2) .article-toc a:before{display:none}
  html body main:not(#v2) .article-toc a.is-active{background:var(--v2-ink);color:var(--v2-mint)!important;padding-inline-start:16px}
  html body main:not(#v2) .related-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  html body main:not(#v2) .article-head h1{font-size:clamp(33px,9.4vw,48px)!important;max-width:none}
  html body main:not(#v2) .article-photo-hero{height:clamp(220px,62vw,320px);margin-top:-96px;box-shadow:0 24px 40px -24px #06140d99}
  html body main:not(#v2) .article-photo-hero>.wrap>b{display:none}
  html body main:not(#v2) .article-metrics>div{grid-template-columns:1fr}
  html body main:not(#v2) .article-metrics article{min-height:0;flex-direction:row;align-items:center;gap:20px}
  html body main:not(#v2) .article-questions details>p{padding-inline-end:0}
  html body main:not(#v2) .related-article-grid{grid-template-columns:1fr}
  html body main:not(#v2) .related-articles .heading.row>a{width:100%;justify-content:center}
}