/* Credanta Articles V2 · 2026-09-07
   Final article layer aligned with the approved Home visual system.
   Loaded after credanta-ui-v2 to avoid legacy cascade collisions. */

.article-page{
  background:#f5f7fa!important;
  --article-shell:var(--c2-shell,1260px);
}
.article-page main{overflow:clip}
.article-page .article-breadcrumbs{padding:18px 0 12px!important;background:#fff;color:#718096!important}
.article-page .article-breadcrumbs .shell{gap:8px}
.article-page .article-breadcrumbs a{font-size:11px;font-weight:760}

/* Hero: one coherent banner, same visual logic as the new Home */
.article-page .article-hero{
  padding:8px 0 54px!important;
  background:linear-gradient(180deg,#fff 0%,#f4f7fb 100%)!important;
}
.article-page .article-hero:before{display:none!important}
.article-page .article-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.06fr) minmax(340px,.70fr)!important;
  gap:22px!important;
  align-items:stretch!important;
  padding:22px!important;
  border-radius:36px!important;
  background:linear-gradient(145deg,#0b1f43 0%,#102b59 100%)!important;
  box-shadow:0 24px 68px rgba(8,31,70,.10)!important;
}
.article-page .article-hero-grid>*{min-width:0}
.article-page .article-hero-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:32px 34px 28px!important;
  border:1px solid rgba(16,45,97,.07);
  border-radius:29px;
  background:rgba(255,255,255,.97);
  box-shadow:0 20px 44px rgba(5,20,46,.10);
}
.article-page .article-meta{gap:7px!important;margin-bottom:18px!important}
.article-page .article-pill{
  min-height:28px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:.07em!important;
  white-space:nowrap;
}
.article-page .article-title{
  max-width:17ch!important;
  margin:0!important;
  font-size:var(--home-type-h1,clamp(40px,3.05vw,46px))!important;
  line-height:var(--home-type-title-line,1.07)!important;
  font-weight:830!important;
  letter-spacing:var(--home-type-title-track,-.037em)!important;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}
.article-page .article-title .accent{color:#d96f43!important}
.article-page .article-dek{
  max-width:58ch!important;
  margin:20px 0 0!important;
  color:#566b87!important;
  font-size:var(--home-type-body,16.4px)!important;
  line-height:var(--home-type-body-line,1.55)!important;
  letter-spacing:-.003em;
}
.article-page .article-hero-actions{gap:12px!important;margin-top:22px!important}
.article-page .article-hero-actions .button{
  min-height:50px!important;
  padding:13px 18px!important;
  border-radius:15px!important;
  font-size:var(--home-type-cta,16px)!important;
  line-height:1.1!important;
  white-space:nowrap;
}
.article-page .article-hero-read{font-size:12px!important;white-space:nowrap}
.article-page .article-date-row{margin-top:20px!important;font-size:9.5px!important}
.article-page .article-author{
  grid-template-columns:40px minmax(0,1fr) auto!important;
  max-width:none!important;
  margin-top:17px!important;
  padding-top:16px!important;
}
.article-page .article-author strong{font-size:11px!important}
.article-page .article-author span,.article-page .article-author a{font-size:9.5px!important}

.article-page .article-stage{
  position:relative!important;
  width:100%;
  min-width:0;
  min-height:100%!important;
  height:100%!important;
  overflow:hidden;
  border-radius:29px;
  background:#dce3e8;
  box-shadow:0 20px 44px rgba(5,20,46,.14);
}
.article-page .article-stage-photo{
  position:absolute!important;
  inset:0!important;
  overflow:hidden;
  border-radius:29px!important;
  background:#dfe5e8!important;
  box-shadow:none!important;
}
.article-page .article-stage-photo picture,
.article-page .article-stage-photo img{display:block;width:100%;height:100%}
.article-page .article-stage-photo img{object-fit:cover!important;object-position:center 47%!important}
.article-page .article-stage-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,20,44,.02) 32%,rgba(6,20,44,.44) 100%)!important;
}
.article-page .article-stage-note{
  left:20px!important;
  right:20px!important;
  bottom:20px!important;
  width:auto!important;
  max-width:none!important;
  padding:17px 18px!important;
  border:1px solid rgba(255,255,255,.45);
  border-radius:20px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 16px 36px rgba(5,20,46,.16)!important;
}
.article-page .article-stage-note small{font-size:8px!important;letter-spacing:.10em!important}
.article-page .article-stage-note strong{margin-top:5px!important;font-size:13.5px!important;line-height:1.28!important}
.article-page .article-stage-mark{
  left:18px!important;
  top:18px!important;
  bottom:auto!important;
  width:54px!important;
  height:54px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 12px 30px rgba(5,20,46,.14)!important;
}
.article-page .article-stage-mark img{width:30px!important;filter:none!important}

/* Reading layout */
.article-page .article-reading{padding:54px 0 84px!important;background:#f5f7fa!important}
.article-page .article-reading-grid{
  width:100%;
  max-width:none!important;
  grid-template-columns:200px minmax(0,1fr) 220px!important;
  gap:26px!important;
}
.article-page .article-sidebar{top:92px!important}
.article-page .side-widget,
.article-page .side-cta,
.article-page .article-right-note{
  border:1px solid #dde5ee!important;
  border-radius:18px!important;
  box-shadow:0 10px 28px rgba(8,31,70,.035)!important;
}
.article-page .side-widget{padding:17px!important;background:#fff!important}
.article-page .side-title{font-size:13px!important;line-height:1.25!important}
.article-page .side-toc a{font-size:10.5px!important;line-height:1.35!important}
.article-page .side-cta{padding:18px!important;background:linear-gradient(145deg,#0d2956,#173d77)!important;color:#fff!important}
.article-page .side-cta strong{font-size:16px!important;line-height:1.18!important;color:#fff!important}
.article-page .side-cta p{font-size:10px!important;line-height:1.48!important;color:#cad5e4!important}
.article-page .side-cta a{border-radius:13px!important;background:#e47d50!important;color:#fff!important}

.article-page .article-card{
  min-width:0;
  padding:34px 36px 40px!important;
  border:1px solid #dde5ee!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 18px 52px rgba(8,31,70,.045)!important;
}
.article-page .article-body,
.article-page .article-body>p,
.article-page .article-body li{
  color:#405773!important;
  font-size:15.5px!important;
  line-height:1.76!important;
}
.article-page .article-body>p,
.article-page .article-body>ul,
.article-page .article-body>ol{max-width:72ch!important}
.article-page .article-body h2{
  max-width:24ch!important;
  margin-top:44px!important;
  font-size:clamp(29px,2.45vw,35px)!important;
  line-height:1.10!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
.article-page .article-body h3{font-size:21px!important;line-height:1.18!important}
.article-page .article-section-eyebrow{margin:40px 0 -32px!important;font-size:9px!important}
.article-page .article-answer{padding:21px 22px!important;border-radius:18px!important;background:#fff6f1!important}
.article-page .article-answer strong{font-size:17px!important;line-height:1.28!important}
.article-page .article-answer p{font-size:13px!important;line-height:1.58!important}
.article-page .article-toc{border-radius:17px!important;background:#f7f9fb!important}
.article-page .article-toc-body ol{gap:6px 20px!important}
.article-page .article-toc-body a{font-size:10.5px!important}

/* Robust content cards: no oversized empty boxes */
.article-page .article-overview,
.article-page .article-compare-cards,
.article-page .article-flow,
.article-page .article-final-check,
.article-page .article-security-list,
.article-page .article-cost-grid,
.article-page .article-steps,
.article-page .article-decision-grid{align-items:stretch}
.article-page .article-overview>div,
.article-page .article-compare-cards>div,
.article-page .article-flow>div,
.article-page .article-final-check>div,
.article-page .article-security-list>div,
.article-page .article-cost-grid>div,
.article-page .article-steps>div,
.article-page .article-decision-grid>div{
  border-color:#dde5ee!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
.article-page .article-action-banner{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:18px!important;
  margin:28px 0 34px!important;
  padding:21px 22px!important;
  border-radius:20px!important;
}
.article-page .article-action-copy strong{font-size:17px!important;line-height:1.22!important}
.article-page .article-action-copy p{font-size:12px!important;line-height:1.55!important}
.article-page .article-action-button{min-height:44px!important;padding:11px 15px!important;border-radius:13px!important;font-size:11px!important;white-space:nowrap}
.article-page .article-table-wrap{max-width:100%;overflow-x:auto!important}

/* Article FAQs: support both legacy button accordions and native <details> markets. */
.article-page .article-faq{margin-top:46px!important}
.article-page .article-faq h2{max-width:24ch!important;font-size:31px!important;line-height:1.12!important}
.article-page .article-faq-list{display:grid;gap:9px;margin-top:20px}
.article-page .article-faq-list details,
.article-page .faq-item{
  overflow:hidden;
  margin:0!important;
  border:1px solid #dde5ee!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.article-page .article-faq-list summary,
.article-page .faq-question{
  position:relative;
  display:flex!important;
  width:100%;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  min-height:58px;
  padding:15px 17px!important;
  border:0!important;
  background:#fff!important;
  color:#102d61!important;
  font-size:14.5px!important;
  line-height:1.35!important;
  font-weight:760!important;
  text-align:left;
  cursor:pointer;
  list-style:none;
}
.article-page .article-faq-list summary::-webkit-details-marker{display:none}
.article-page .article-faq-list summary::after{
  content:"+";
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:999px;
  background:#fff0e8;
  color:#d36e40;
  font-size:18px;
  font-weight:500;
  transition:transform .2s ease;
}
.article-page .article-faq-list details[open] summary::after{transform:rotate(45deg)}
.article-page .article-faq-list details>div{padding:0 17px 16px}
.article-page .article-faq-list details p,
.article-page .faq-answer p{
  margin:0!important;
  padding:0 46px 16px 17px!important;
  color:#5d7089!important;
  font-size:14px!important;
  line-height:1.60!important;
}
.article-page .article-faq-list details>div p{padding:0!important}
.article-page .faq-question span:last-child{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:#fff0e8;
  color:#d36e40!important;
}

/* Final CTA closer to the new Home closing language */
.article-page .article-bottom-cta{padding:68px 0 76px!important;background:#fff!important}
.article-page .article-bottom-card{
  position:relative;
  overflow:hidden;
  min-height:220px;
  padding:36px 38px!important;
  border:0!important;
  border-radius:30px!important;
  background:linear-gradient(135deg,#0a2148 0%,#18386e 72%,#244776 100%)!important;
  box-shadow:0 20px 55px rgba(8,31,70,.12)!important;
  color:#fff;
}
.article-page .article-bottom-card:after{
  content:"";
  position:absolute;
  right:-90px;
  top:-120px;
  width:310px;
  height:310px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
}
.article-page .article-bottom-card small{color:#f2aa87!important}
.article-page .article-bottom-card h2{position:relative;z-index:1;max-width:18ch;color:#fff!important;font-size:var(--home-type-h2,clamp(38px,3vw,46px))!important;line-height:1.07!important}
.article-page .article-bottom-card p{position:relative;z-index:1;max-width:58ch;color:#c9d5e5!important;font-size:14px!important;line-height:1.58!important}
.article-page .article-bottom-card .button{position:relative;z-index:1;min-height:50px;border-radius:15px!important;background:#e47d50!important;font-size:15px!important}

@media(max-width:1120px){
  .article-page .article-reading-grid{grid-template-columns:190px minmax(0,1fr)!important;gap:24px!important}
  .article-page .article-right{display:none!important}
}
@media(max-width:900px){
  .article-page .article-hero-grid{grid-template-columns:1fr!important;gap:16px!important;padding:16px!important;border-radius:30px!important}
  .article-page .article-stage{min-height:390px!important;height:390px!important}
  .article-page .article-stage-photo,.article-page .article-stage{border-radius:25px!important}
  .article-page .article-reading-grid{grid-template-columns:1fr!important}
  .article-page .article-left,.article-page .article-right{display:none!important}
}
@media(max-width:680px){
  .article-page .article-breadcrumbs{padding-top:12px!important}
  .article-page .article-hero{padding:6px 0 38px!important}
  .article-page .article-hero-grid{padding:10px!important;border-radius:25px!important}
  .article-page .article-hero-copy{padding:23px 18px 21px!important;border-radius:21px!important}
  .article-page .article-meta{margin-bottom:15px!important}
  .article-page .article-pill{font-size:8px!important;min-height:25px!important}
  .article-page .article-title{max-width:none!important;font-size:var(--home-type-h1,clamp(30px,7.5vw,34px))!important;line-height:1.08!important}
  .article-page .article-dek{margin-top:16px!important;font-size:var(--home-type-body,15.5px)!important;line-height:1.52!important}
  .article-page .article-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:18px!important}
  .article-page .article-hero-actions .button{width:100%!important;font-size:15px!important}
  .article-page .article-hero-read{justify-content:flex-start}
  .article-page .article-date-row{gap:6px 14px!important;margin-top:16px!important}
  .article-page .article-author{grid-template-columns:36px minmax(0,1fr)!important;gap:10px!important}
  .article-page .article-author>a{grid-column:2}
  .article-page .article-stage{min-height:315px!important;height:315px!important}
  .article-page .article-stage-note{left:12px!important;right:12px!important;bottom:12px!important;padding:14px 15px!important;border-radius:16px!important}
  .article-page .article-stage-note strong{font-size:12px!important}
  .article-page .article-stage-mark{left:12px!important;top:12px!important;width:46px!important;height:46px!important;border-radius:15px!important}
  .article-page .article-stage-mark img{width:26px!important}
  .article-page .article-reading{padding:34px 0 68px!important}
  .article-page .article-card{padding:23px 17px 30px!important;border-radius:22px!important}
  .article-page .article-body,.article-page .article-body>p,.article-page .article-body li{font-size:15px!important;line-height:1.72!important}
  .article-page .article-body h2{font-size:27px!important;line-height:1.10!important;margin-top:38px!important}
  .article-page .article-body h3{font-size:20px!important}
  .article-page .article-toc-body ol{grid-template-columns:1fr!important}
  .article-page .article-action-banner{grid-template-columns:1fr!important;padding:18px!important}
  .article-page .article-action-button{width:100%!important}
  .article-page .article-faq h2{font-size:27px!important}
  .article-page .article-faq-list summary,.article-page .faq-question{font-size:14px!important;min-height:56px!important;padding:14px 15px!important}
  .article-page .article-faq-list details>div{padding:0 15px 14px}
  .article-page .article-faq-list details p,.article-page .faq-answer p{font-size:13.5px!important;padding:0 42px 14px 15px!important}
  .article-page .article-faq-list details>div p{padding:0!important}
  .article-page .article-bottom-cta{padding:52px 0 70px!important}
  .article-page .article-bottom-card{min-height:0;padding:28px 22px!important;border-radius:24px!important}
  .article-page .article-bottom-card h2{font-size:var(--home-type-h2,clamp(30px,7.5vw,34px))!important;max-width:none!important}
  .article-page .article-bottom-card .button{width:100%!important}
}
@media(max-width:390px){
  .article-page .article-stage{min-height:285px!important;height:285px!important}
  .article-page .article-title{font-size:29px!important}
}

/* ==========================================================
   V147 — ARTICLE READING SHELL ALIGNMENT
   Keep article body inside the same approved 1180px shell as
   header, Home and corporate pages. Symmetric outer gutters.
   ========================================================== */
.article-page .article-reading-grid{
  width:min(var(--c2-shell,1180px),calc(100% - 48px))!important;
  max-width:var(--c2-shell,1180px)!important;
  margin-inline:auto!important;
  grid-template-columns:190px minmax(0,1fr) 210px!important;
  gap:24px!important;
}
.article-page .article-card{
  width:100%!important;
  max-width:100%!important;
}

@media(max-width:1120px){
  .article-page .article-reading-grid{
    width:min(var(--c2-shell,1180px),calc(100% - 40px))!important;
    grid-template-columns:180px minmax(0,1fr)!important;
    gap:24px!important;
  }
}
@media(max-width:900px){
  .article-page .article-reading-grid{
    width:min(var(--c2-shell,1180px),calc(100% - 40px))!important;
    grid-template-columns:1fr!important;
  }
}
@media(max-width:680px){
  .article-page .article-reading-grid{
    width:calc(100% - 28px)!important;
  }
}

/* ==========================================================
   V148 — COMPLETE ARTICLE STABILITY / CROSS-MARKET QA
   One robust visual layer for every published market article.
   ========================================================== */

/* 1) Exact alignment with the approved 1180px site shell. */
.article-page .article-reading>.shell{
  width:min(var(--c2-shell,1180px),calc(100% - 48px))!important;
  margin-inline:auto!important;
}
.article-page .article-reading-grid{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  grid-template-columns:190px minmax(0,1fr) 210px!important;
  gap:24px!important;
}
.article-page .article-card,
.article-page .article-body,
.article-page .article-left,
.article-page .article-right{min-width:0!important}

/* 2) Long-language safety without visually mangling editorial headings. */
.article-page .side-widget,
.article-page .side-cta,
.article-page .article-right-note,
.article-page .article-stage-note,
.article-page .article-answer,
.article-page .article-action-banner,
.article-page .article-bottom-card{
  overflow-wrap:break-word;
  word-break:normal;
}
.article-page .side-title,
.article-page .side-toc a,
.article-page .side-cta strong,
.article-page .side-cta p,
.article-page .related-card strong,
.article-page .related-guide-grid strong,
.article-page .article-faq-list summary,
.article-page .faq-question{
  hyphens:auto;
  overflow-wrap:anywhere;
}
.article-page .article-title,
.article-page .article-body h2,
.article-page .article-body h3{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.article-page img{max-width:100%}
.article-page .article-body iframe,
.article-page .article-body video{max-width:100%}

/* 3) Brazil hero trust row had no stylesheet in the legacy market layer. */
.article-page .article-hero-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-top:18px;
  color:#657892;
  font-size:9.5px;
  font-weight:760;
}
.article-page .article-hero-trust i{
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:999px;
  background:#de7a4c;
}

/* 4) Brazil comparison table — previously raw/unstyled markup. */
.article-page .article-compare-table{
  display:grid;
  margin:24px 0 30px;
  overflow:hidden;
  border:1px solid #dde5ee;
  border-radius:18px;
  background:#fff;
}
.article-page .article-table-row{
  display:grid;
  grid-template-columns:minmax(130px,.9fr) minmax(180px,1.2fr) minmax(210px,1.35fr);
  align-items:start;
  gap:16px;
  padding:15px 17px;
  border-top:1px solid #e5ebf1;
  color:#526781;
  font-size:12px;
  line-height:1.5;
}
.article-page .article-table-row:first-child{border-top:0}
.article-page .article-table-row strong{color:#102d61;font-size:12px}
.article-page .article-table-head{
  background:#f3f6f8;
  color:#75849a;
  font-size:9px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* 5) Related-guide markup used in BR/DK/FI/NO/ZA now matches other article cards. */
.article-page .related-guide-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:17px;
}
.article-page .related-guide-grid>a{
  display:flex;
  min-width:0;
  min-height:150px;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:17px;
  border:1px solid #dde5ee;
  border-radius:17px;
  background:#f7f9f8;
  color:#102d61!important;
  text-decoration:none!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.article-page .related-guide-grid>a:hover{
  transform:translateY(-2px);
  border-color:#d7dee8;
  box-shadow:0 12px 28px rgba(8,31,70,.06);
}
.article-page .related-guide-grid small{
  color:#d46f42;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.article-page .related-guide-grid strong{
  color:#102d61;
  font-size:13px;
  line-height:1.28;
}
.article-page .related-guide-grid span{
  color:#d46f42;
  font-size:10px;
  font-weight:850;
}

/* 6) All dense content grids use the same safe geometry. */
.article-page .article-overview,
.article-page .article-compare-cards,
.article-page .article-flow,
.article-page .article-final-check,
.article-page .article-security-list,
.article-page .article-cost-grid,
.article-page .article-steps,
.article-page .article-decision-grid,
.article-page .related-grid,
.article-page .related-guide-grid{
  min-width:0;
}
.article-page .article-overview>* ,
.article-page .article-compare-cards>* ,
.article-page .article-flow>* ,
.article-page .article-final-check>* ,
.article-page .article-security-list>* ,
.article-page .article-cost-grid>* ,
.article-page .article-steps>* ,
.article-page .article-decision-grid>* ,
.article-page .related-grid>* ,
.article-page .related-guide-grid>*{
  min-width:0;
}

/* 7) FAQ questions can wrap naturally while the control stays fixed. */
.article-page .article-faq-list summary,
.article-page .faq-question{align-items:flex-start!important}
.article-page .article-faq-list summary::after,
.article-page .faq-question span:last-child{flex:0 0 30px!important}

/* 8) CTA copy uses approved Home scale but cannot create absurdly tall cards. */
.article-page .article-bottom-card h2{
  max-width:20ch!important;
  text-wrap:balance;
}
.article-page .article-bottom-card p{max-width:62ch!important}

/* 9) Tablet / small desktop: preserve exact global gutters. */
@media(max-width:1120px){
  .article-page .article-reading>.shell{
    width:min(var(--c2-shell,1180px),calc(100% - 40px))!important;
  }
  .article-page .article-reading-grid{
    width:100%!important;
    grid-template-columns:180px minmax(0,1fr)!important;
    gap:24px!important;
  }
}
@media(max-width:900px){
  .article-page .article-reading-grid{grid-template-columns:1fr!important}
}

/* 10) Mobile: every editorial grid becomes a clean single column. */
@media(max-width:680px){
  .article-page .article-reading>.shell{
    width:calc(100% - 28px)!important;
  }
  .article-page .article-reading-grid{width:100%!important}
  .article-page .article-overview,
  .article-page .article-compare-cards,
  .article-page .article-flow,
  .article-page .article-final-check,
  .article-page .article-security-list,
  .article-page .article-cost-grid,
  .article-page .article-steps,
  .article-page .article-decision-grid,
  .article-page .related-grid,
  .article-page .related-guide-grid{
    grid-template-columns:1fr!important;
  }
  .article-page .related-guide-grid>a,
  .article-page .related-card{min-height:0!important}
  .article-page .article-compare-table{
    gap:8px;
    overflow:visible;
    border:0;
    background:transparent;
  }
  .article-page .article-table-head{display:none!important}
  .article-page .article-table-row{
    grid-template-columns:1fr!important;
    gap:5px;
    padding:14px 15px;
    border:1px solid #dde5ee!important;
    border-radius:15px;
    background:#f7f9f8;
    font-size:12px;
  }
  .article-page .article-hero-trust{gap:7px 9px;font-size:9px}
  .article-page .article-bottom-card h2{max-width:none!important}
}

@media(max-width:390px){
  .article-page .article-reading>.shell{width:calc(100% - 24px)!important}
  .article-page .article-pill{white-space:normal!important}
}

/* ==========================================================
   V150 — ARTICLE HERO VIDEO
   Performance-first video treatment:
   - static WebP poster remains the LCP candidate
   - video is loaded only after the deferred script sees the hero
   - object-fit:contain keeps the moving subject visible throughout
   - blurred poster fills the stage without awkward letterboxing
   ========================================================== */
.article-page .article-stage-photo{
  isolation:isolate;
  background:#0a1730!important;
}
.article-page .article-stage-photo::before{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:0;
  background:linear-gradient(120deg,#16396a,#071d43) center center/cover no-repeat;
  filter:blur(18px) saturate(.9) brightness(.72);
  transform:scale(1.07);
  opacity:.72;
  pointer-events:none;
}
.article-page .article-stage-photo video.article-stage-video{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  background:transparent;
}
.article-page .article-stage-photo::after{
  z-index:2;
  background:linear-gradient(180deg,rgba(6,20,44,.02) 28%,rgba(6,20,44,.08) 56%,rgba(6,20,44,.36) 100%)!important;
  pointer-events:none;
}
.article-page .article-stage-note,
.article-page .article-stage-mark{
  z-index:3;
}

@media(max-width:900px){
  .article-page .article-stage-photo::before{filter:blur(15px) saturate(.9) brightness(.74)}
}

@media(max-width:680px){
  .article-page .article-stage-photo video.article-stage-video{object-fit:cover;object-position:center center}
  .article-page .article-stage-photo::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .article-page .article-stage-photo video.article-stage-video{visibility:hidden}
  .article-page .article-stage-photo::before{
    inset:0;
    filter:none;
    transform:none;
    opacity:1;
  }
}


/* ==========================================================
   V151 — ARTICLE HERO VIDEO: CLEAN FULL-BLEED MEDIA
   Desktop/tablet/mobile all fill the existing hero media frame.
   No blurred duplicate poster, no letterboxing, no inner black bars.
   The lightweight poster still provides the initial visual/LCP fallback.
   ========================================================== */
.article-page .article-stage-photo{
  background:#0a1730 linear-gradient(120deg,#16396a,#071d43) center center/cover no-repeat!important;
}
.article-page .article-stage-photo::before{
  display:none!important;
  content:none!important;
}
.article-page .article-stage-photo video.article-stage-video{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:transparent!important;
}
@media (min-width:901px){
  .article-page .article-stage-photo video.article-stage-video{
    object-position:center 50%!important;
  }
}
@media (max-width:900px){
  .article-page .article-stage-photo video.article-stage-video{
    object-position:center center!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .article-page .article-stage-photo video.article-stage-video{visibility:hidden!important}
  .article-page .article-stage-photo{
    background:#0a1730 linear-gradient(120deg,#16396a,#071d43) center center/cover no-repeat!important;
  }
}