/* =====================================================================
   Haisar blog v2 — dark-navy + orange layer  (blog_v2.css)
   Load AFTER blog_v1.css (append-only; v1 is untouched).
   Part A: blog listing cards + pagination   (body.itemid-115 only)
   Part B: .hs-art article components re-skinned to the site palette
   Palette: page #0b2438 · panels #122d42 / #16384f · orange #f1803d
            (hover #ff9452) · footer #071a29 · WhatsApp #0f8a52
   Contrast (on #122d42 unless noted): white 14.6:1 · text #d9e3eb 11.6:1
   muted #a9bccb 8.0:1 · orange #f1803d 5.3:1 (4.6:1 on #16384f)
   navy #0b2438 on orange 6.0:1
   ===================================================================== */

/* =====================================================================
   PART A — BLOG LISTING  (/blog, body.itemid-115)
   ===================================================================== */

/* the component column was rendering at ~75% width; give the grid the full row, centred */
html body.itemid-115:not(#hs-x) #sp-main-body #sp-component{flex:0 0 100% !important;max-width:100% !important;width:100% !important}
html body.itemid-115:not(#hs-x) .blog-list-wrapper{max-width:1240px !important;margin-left:auto !important;margin-right:auto !important}

/* grid: 3 cols > 1100px, 2 cols 768-1100px, 1 col < 768px; equal-height rows */
html body.itemid-115:not(#hs-x) .article-list > .row{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:28px !important;align-items:stretch !important;margin:0 0 28px !important}
html body.itemid-115:not(#hs-x) .article-list > .row > .col-lg-4{display:flex !important;width:auto !important;max-width:none !important;padding:0 !important;margin:0 !important}

/* card */
html body.itemid-115:not(#hs-x) .article-list .article{
  position:relative !important;display:flex !important;flex-direction:column !important;
  width:100% !important;height:auto !important;flex:1 1 auto !important;margin:0 !important;padding:0 !important;
  background:#122d42 !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:14px !important;
  overflow:hidden !important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px rgba(3,14,24,.35) !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;color:#d9e3eb !important}
html body.itemid-115:not(#hs-x) .article-list .article:hover{
  transform:translateY(-4px) !important;border-color:rgba(241,128,61,.6) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 38px rgba(3,14,24,.5) !important}
/* orange focus ring around the whole card when any link inside it has keyboard focus */
html body.itemid-115:not(#hs-x) .article-list .article:focus-within{border-color:#f1803d !important;box-shadow:0 0 0 3px #f1803d,0 18px 38px rgba(3,14,24,.5) !important}
html body.itemid-115:not(#hs-x) .article-list .article a:focus{outline:none !important}
html body.itemid-115:not(#hs-x) .article-list .article a:focus-visible{outline:3px solid #f1803d !important;outline-offset:3px !important;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html body.itemid-115:not(#hs-x) .article-list .article,
  html body.itemid-115:not(#hs-x) .article-list .article-intro-image img{transition:none !important}
  html body.itemid-115:not(#hs-x) .article-list .article:hover{transform:none !important}
}

/* image: fixed 3:2 well, cropped, slight zoom on hover */
html body.itemid-115:not(#hs-x) .article-list .article-intro-image{
  float:none !important;width:100% !important;margin:0 !important;padding:0 !important;
  aspect-ratio:3/2;overflow:hidden !important;border-radius:0 !important;background:#0b2438 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important}
html body.itemid-115:not(#hs-x) .article-list .article-intro-image a{display:block !important;width:100% !important;height:100% !important}
html body.itemid-115:not(#hs-x) .article-list .article-intro-image img{
  display:block !important;width:100% !important;height:100% !important;aspect-ratio:3/2 !important;
  object-fit:cover !important;border-radius:0 !important;transition:transform .35s ease !important}
html body.itemid-115:not(#hs-x) .article-list .article:hover .article-intro-image img{transform:scale(1.035) !important}

/* body: chip -> title -> excerpt -> link pinned to bottom */
html body.itemid-115:not(#hs-x) .article-list .article-body{
  display:flex !important;flex-direction:column !important;flex:1 1 auto !important;
  padding:20px 22px 22px !important;background:transparent !important;border:0 !important}
html body.itemid-115:not(#hs-x) .article-list .article-info{
  order:-1 !important;display:flex !important;flex-wrap:wrap;gap:6px;margin:0 0 12px !important;padding:0 !important;
  position:relative;z-index:2;color:#a9bccb !important;font-size:12px !important}
html body.itemid-115:not(#hs-x) .article-list .article-info .category-name{margin:0 !important;padding:0 !important}
html body.itemid-115:not(#hs-x) .article-list .article-info .category-name::before{display:none !important}
html body.itemid-115:not(#hs-x) .article-list .article-info .category-name a{
  display:inline-block !important;background:#f1803d !important;color:#0b2438 !important;
  font-size:11px !important;font-weight:800 !important;letter-spacing:.09em !important;text-transform:uppercase !important;
  line-height:1 !important;padding:6px 10px 5px !important;border-radius:999px !important;text-decoration:none !important}
html body.itemid-115:not(#hs-x) .article-list .article-info .category-name a:hover{background:#ff9452 !important;color:#0b2438 !important}

html body.itemid-115:not(#hs-x) .article-list .article-header{margin:0 !important;padding:0 !important}
html body.itemid-115:not(#hs-x) .article-list .article-header h2{
  margin:0 0 10px !important;font-size:19px !important;line-height:1.35 !important;font-weight:700 !important;
  letter-spacing:-.005em !important;color:#fff !important;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
html body.itemid-115:not(#hs-x) .article-list .article-header h2 a{color:#fff !important;text-decoration:none !important;background:none !important}
html body.itemid-115:not(#hs-x) .article-list .article:hover .article-header h2 a{color:#fff !important;text-decoration:underline !important;text-decoration-color:rgba(241,128,61,.7) !important;text-underline-offset:4px;text-decoration-thickness:2px !important}
/* whole card is clickable through the title link (chip + Read guide stay on top) */
html body.itemid-115:not(#hs-x) .article-list .article-header h2 a::after{content:"" !important;position:absolute !important;inset:0 !important;z-index:1 !important;display:block !important;background:none !important;width:auto !important;height:auto !important}

/* excerpt */
html body.itemid-115:not(#hs-x) .article-list .article-introtext{
  display:flex !important;flex-direction:column !important;flex:1 1 auto !important;
  color:#c3d1dc !important;font-size:15px !important;line-height:1.6 !important;margin:0 !important}
html body.itemid-115:not(#hs-x) .article-list .article-introtext > p{color:#c3d1dc !important;margin:0 0 14px !important;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* "Read guide →" link (replaces the template's Read more … button) */
html body.itemid-115:not(#hs-x) .article-list .readmore{margin:auto 0 0 !important;padding:14px 0 0 !important;border-top:1px solid rgba(255,255,255,.08) !important;position:relative;z-index:2;background:none !important}
html body.itemid-115:not(#hs-x) .article-list .readmore::before,
html body.itemid-115:not(#hs-x) .article-list .readmore::after{display:none !important;content:none !important}
html body.itemid-115:not(#hs-x) .article-list .readmore a{
  display:inline-flex !important;align-items:center !important;justify-content:flex-start !important;gap:0 !important;
  width:auto !important;min-width:0 !important;max-width:none !important;
  background:none !important;border:0 !important;box-shadow:none !important;padding:4px 0 !important;margin:0 !important;
  min-height:0 !important;border-radius:4px !important;
  font-size:0 !important;line-height:1 !important;color:#f1803d !important;text-decoration:none !important;transform:none !important}
html body.itemid-115:not(#hs-x) .article-list .readmore a::before{
  content:"Read guide" !important;display:inline !important;position:static !important;
  font-size:15px !important;font-weight:800 !important;letter-spacing:.01em;color:#f1803d !important;
  background:none !important;width:auto !important;height:auto !important;transform:none !important;opacity:1 !important}
html body.itemid-115:not(#hs-x) .article-list .readmore a::after{
  content:"\2192" !important;display:inline-block !important;position:static !important;margin-left:8px !important;
  font-size:17px !important;font-weight:800 !important;color:#f1803d !important;
  background:none !important;width:auto !important;height:auto !important;opacity:1 !important;
  transform:translateX(0) !important;transition:transform .2s ease !important}
html body.itemid-115:not(#hs-x) .article-list .readmore a:hover::before,
html body.itemid-115:not(#hs-x) .article-list .readmore a:hover::after,
html body.itemid-115:not(#hs-x) .article-list .article:hover .readmore a::before,
html body.itemid-115:not(#hs-x) .article-list .article:hover .readmore a::after{color:#ff9452 !important}
html body.itemid-115:not(#hs-x) .article-list .article:hover .readmore a::after{transform:translateX(4px) !important}

/* pagination */
html body.itemid-115:not(#hs-x) .pagination-wrapper{display:flex !important;justify-content:center !important;margin:8px 0 48px !important}
html body.itemid-115:not(#hs-x) .pagination{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:8px !important;margin:0 !important;padding:0 !important}
html body.itemid-115:not(#hs-x) .pagination .page-item{margin:0 !important}
html body.itemid-115:not(#hs-x) .pagination .page-link{
  display:flex !important;align-items:center !important;justify-content:center !important;
  min-width:44px !important;height:44px !important;padding:0 12px !important;
  background:#122d42 !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:10px !important;
  color:#d9e3eb !important;font-size:15px !important;font-weight:700 !important;line-height:1 !important;box-shadow:none !important;opacity:1 !important;
  transition:background-color .15s,border-color .15s,color .15s !important}
html body.itemid-115:not(#hs-x) .pagination a.page-link:hover{background:#16384f !important;border-color:#f1803d !important;color:#fff !important}
html body.itemid-115:not(#hs-x) .pagination a.page-link:focus-visible{outline:3px solid #f1803d !important;outline-offset:2px !important;box-shadow:none !important}
html body.itemid-115:not(#hs-x) .pagination .active .page-link{background:#f1803d !important;border-color:#f1803d !important;color:#0b2438 !important;font-weight:800 !important}
html body.itemid-115:not(#hs-x) .pagination .disabled .page-link{background:transparent !important;border-color:rgba(255,255,255,.07) !important;color:#6f8597 !important}
html body.itemid-115:not(#hs-x) .pagination .page-link::before,
html body.itemid-115:not(#hs-x) .pagination .page-link::after{display:none !important}
html body.itemid-115:not(#hs-x) .pagination .page-link .fas{font-size:13px !important;color:inherit !important}

@media (max-width:1100px){
  html body.itemid-115:not(#hs-x) .article-list > .row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:22px !important}
}
@media (max-width:767.98px){
  html body.itemid-115:not(#hs-x) .blog-list-wrapper{margin-top:28px !important}
  html body.itemid-115:not(#hs-x) .article-list > .row{grid-template-columns:minmax(0,1fr) !important;gap:18px !important;margin-bottom:18px !important}
  html body.itemid-115:not(#hs-x) .article-list .article-body{padding:16px 18px 18px !important}
  html body.itemid-115:not(#hs-x) .article-list .article-header h2{font-size:18px !important}
  html body.itemid-115:not(#hs-x) .article-list .article:hover{transform:none !important}
  html body.itemid-115:not(#hs-x) .pagination{gap:6px !important}
  html body.itemid-115:not(#hs-x) .pagination .page-link{min-width:40px !important;height:40px !important;padding:0 10px !important;font-size:14px !important}
  /* keep pagination to one or two tidy lines: drop first/last jump arrows on phones */
  html body.itemid-115:not(#hs-x) .pagination .page-item:first-child,
  html body.itemid-115:not(#hs-x) .pagination .page-item:last-child{display:none !important}
}

/* =====================================================================
   PART B — ARTICLE (.hs-art) dark re-skin
   ===================================================================== */

html body:not(#hs-x) .hs-art{
  --hs-bg:#0b2438; --hs-p1:#122d42; --hs-p2:#16384f; --hs-edge:#24506d; --hs-edge-soft:rgba(255,255,255,.09);
  --hs-text:#d9e3eb; --hs-text-2:#c3d1dc; --hs-dim:#a9bccb; --hs-or:#f1803d; --hs-or-h:#ff9452; --hs-or-soft:rgba(241,128,61,.14);
  /* v1 variables remapped so any rule not restyled below still lands on dark */
  --hs-ink:#d9e3eb; --hs-muted:#a9bccb; --hs-line:rgba(255,255,255,.1); --hs-soft:#122d42; --hs-soft-2:#16384f;
  --hs-accent:#f1803d; --hs-accent-ink:#ff9452; --hs-accent-soft:rgba(241,128,61,.14);
  background:transparent; color:var(--hs-text); border-radius:0; box-shadow:none;
  counter-reset:hs-sec;
}
html body:not(#hs-x) .hs-art p,html body:not(#hs-x) .hs-art li{color:var(--hs-text)}
html body:not(#hs-x) .hs-art h2,html body:not(#hs-x) .hs-art h3{color:#fff}
html body:not(#hs-x) .hs-art strong{color:#fff}
html body:not(#hs-x) .hs-art li::marker{color:var(--hs-or)}
html body:not(#hs-x) .hs-art a{color:#ffab78;text-decoration-color:rgba(255,171,120,.55)}
html body:not(#hs-x) .hs-art a:hover{color:#ffc59f;text-decoration-color:currentColor}
html body:not(#hs-x) .hs-art a:focus-visible{outline:3px solid var(--hs-or);outline-offset:2px;border-radius:4px}
html body:not(#hs-x) .hs-art .hs-small{color:var(--hs-dim)}
html body:not(#hs-x) .hs-art .hs-lead{color:#e8eef3}

/* section numbers -> orange "01 /" eyebrow above the heading (matches SPPB articles) */
html body:not(#hs-x) .hs-art h2{padding-top:0}
html body:not(#hs-x) .hs-art h2 .hs-num{
  counter-increment:hs-sec;display:flex;align-items:center;gap:10px;width:auto;min-width:0;height:auto;
  margin:0 0 10px;padding:0;background:none;border-radius:0;
  font-size:0;line-height:1;color:var(--hs-or);vertical-align:baseline;text-align:left}
html body:not(#hs-x) .hs-art h2 .hs-num::before{content:counter(hs-sec,decimal-leading-zero) " /";font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--hs-or)}
html body:not(#hs-x) .hs-art h2 .hs-num::after{content:"";display:block;width:36px;height:2px;border-radius:2px;background:var(--hs-or)}

/* meta + hero */
html body:not(#hs-x) .hs-art .hs-meta,html body:not(#hs-x) .hs-art .hs-meta li{color:var(--hs-dim)}
html body:not(#hs-x) .hs-art .hs-meta li+li::before{color:#5d7a90}
html body:not(#hs-x) .hs-art .hs-kicker{color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-hero,html body:not(#hs-x) .hs-art .hs-hero figcaption{background:var(--hs-p1);color:var(--hs-dim)}

/* key takeaways */
html body:not(#hs-x) .hs-art .hs-summary{background:var(--hs-p1);border:1px solid var(--hs-edge-soft);border-left:4px solid var(--hs-or);box-shadow:0 10px 26px rgba(3,14,24,.3)}
html body:not(#hs-x) .hs-art .hs-summary .hs-summary-title{color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-summary li{color:var(--hs-text)}
html body:not(#hs-x) .hs-art .hs-summary li::before{background:var(--hs-or);box-shadow:inset 0 0 0 5px var(--hs-p1),0 0 0 2px var(--hs-or)}

/* table of contents */
html body:not(#hs-x) .hs-art .hs-toc{background:var(--hs-p1);border:1px solid var(--hs-edge-soft)}
html body:not(#hs-x) .hs-art .hs-toc>summary{color:#fff}
html body:not(#hs-x) .hs-art .hs-toc>summary::after{color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-toc li{color:var(--hs-dim)}
html body:not(#hs-x) .hs-art .hs-toc a{color:var(--hs-text);text-decoration:none}
html body:not(#hs-x) .hs-art .hs-toc a:hover{color:var(--hs-or-h);text-decoration:underline}

/* callouts: quick-answer style, orange (or status) left border on a panel */
html body:not(#hs-x) .hs-art .hs-callout{background:var(--hs-p1);border:1px solid var(--hs-edge-soft);border-left:4px solid var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-callout p,html body:not(#hs-x) .hs-art .hs-callout li{color:var(--hs-text)}
html body:not(#hs-x) .hs-art .hs-callout .hs-callout-title{color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-callout--tip{background:var(--hs-p1);border-color:var(--hs-edge-soft);border-left-color:#2fbf7a}
html body:not(#hs-x) .hs-art .hs-callout--tip .hs-callout-title{color:#6fdca6}
html body:not(#hs-x) .hs-art .hs-callout--warn{background:var(--hs-p1);border-color:var(--hs-edge-soft);border-left-color:#f2b33d}
html body:not(#hs-x) .hs-art .hs-callout--warn .hs-callout-title{color:#ffc85c}
html body:not(#hs-x) .hs-art .hs-callout--law{background:var(--hs-p1);border-color:var(--hs-edge-soft);border-left-color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-callout--law .hs-callout-title{color:var(--hs-or)}

/* tables: orange header row, navy body (matches SPPB article tables) */
html body:not(#hs-x) .hs-art .hs-table-wrap{background:var(--hs-p1);border:1px solid var(--hs-edge-soft)}
html body:not(#hs-x) .hs-art table.hs-table{background:var(--hs-p1)}
html body:not(#hs-x) .hs-art table.hs-table caption{background:var(--hs-p2);color:#fff;border-bottom:1px solid var(--hs-edge-soft)}
html body:not(#hs-x) .hs-art table.hs-table th,html body:not(#hs-x) .hs-art table.hs-table td{color:var(--hs-text);border-top:1px solid rgba(255,255,255,.07)}
html body:not(#hs-x) .hs-art table.hs-table thead th{background:var(--hs-or);color:#0b2438;font-weight:800;border-top:0}
html body:not(#hs-x) .hs-art table.hs-table tbody tr:nth-child(even) td,html body:not(#hs-x) .hs-art table.hs-table tbody tr:nth-child(even) th{background:#143349}
html body:not(#hs-x) .hs-art table.hs-table tbody th{color:#fff}
html body:not(#hs-x) .hs-art table.hs-table .hs-hl{color:var(--hs-or-h)}
html body:not(#hs-x) .hs-art table.hs-table a{color:#ffab78}
@media (max-width:640px){
  html body:not(#hs-x) .hs-art .hs-table-wrap--stack{background:transparent;border:0}
  html body:not(#hs-x) .hs-art .hs-table--stack{background:transparent}
  html body:not(#hs-x) .hs-art .hs-table--stack caption{background:var(--hs-p2);border:1px solid var(--hs-edge-soft);border-radius:var(--hs-r);margin-bottom:10px}
  html body:not(#hs-x) .hs-art .hs-table--stack tr{background:var(--hs-p1);border:1px solid var(--hs-edge-soft);border-left:3px solid var(--hs-or)}
  html body:not(#hs-x) .hs-art .hs-table--stack tbody tr th{background:var(--hs-p2) !important;color:#fff}
  html body:not(#hs-x) .hs-art .hs-table--stack tbody tr td{background:var(--hs-p1) !important;border-top:1px solid rgba(255,255,255,.06)}
  html body:not(#hs-x) .hs-art .hs-table--stack td[data-label]::before{color:var(--hs-or-h)}
}

/* stat cards */
html body:not(#hs-x) .hs-art .hs-stat{background:var(--hs-p1);border:1px solid var(--hs-edge-soft);border-top:3px solid var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-stat-num{color:#fff}
html body:not(#hs-x) .hs-art .hs-stat-label{color:var(--hs-dim)}

/* bar chart */
html body:not(#hs-x) .hs-art .hs-chart{background:var(--hs-p1);border:1px solid var(--hs-edge-soft)}
html body:not(#hs-x) .hs-art .hs-chart-title{color:#fff}
html body:not(#hs-x) .hs-art .hs-chart-sub{color:var(--hs-dim)}
html body:not(#hs-x) .hs-art .hs-bar-label{color:var(--hs-text)}
html body:not(#hs-x) .hs-art .hs-bar-track{background:#0b2438;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
html body:not(#hs-x) .hs-art .hs-bar-fill{background:linear-gradient(90deg,#2d6187,#5c9ccb)}
html body:not(#hs-x) .hs-art .hs-bars li.hs-bar--accent .hs-bar-fill{background:linear-gradient(90deg,#d9692a,var(--hs-or-h))}
html body:not(#hs-x) .hs-art .hs-bars li.hs-bar--accent .hs-bar-label,html body:not(#hs-x) .hs-art .hs-bars li.hs-bar--accent .hs-bar-val{color:var(--hs-or-h)}
html body:not(#hs-x) .hs-art .hs-bar-val{color:#fff}

/* standards badges */
html body:not(#hs-x) .hs-art .hs-badge{background:var(--hs-p1);border:1px solid var(--hs-edge);border-left:3px solid var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-badge b{color:#fff}
html body:not(#hs-x) .hs-art .hs-badge small{color:var(--hs-dim)}

/* EN marking decoder */
html body:not(#hs-x) .hs-art .hs-decode{background:var(--hs-p1);border:1px solid var(--hs-edge-soft);color:var(--hs-text)}
html body:not(#hs-x) .hs-art .hs-decode-title{color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-decode-row li{color:var(--hs-text-2)}
html body:not(#hs-x) .hs-art .hs-decode-row b{background:var(--hs-p2);border:1.5px solid var(--hs-edge);color:#fff}
html body:not(#hs-x) .hs-art .hs-decode-row li.hs-key b{background:var(--hs-or);border-color:var(--hs-or);color:#0b2438}
html body:not(#hs-x) .hs-art .hs-decode-note{color:var(--hs-dim)}
html body:not(#hs-x) .hs-art .hs-scroll-hint{color:var(--hs-dim)}

/* product cards: navy card, WHITE image well so white-background photos stay clean */
html body:not(#hs-x) .hs-art a.hs-prod{background:var(--hs-p1);border:1px solid var(--hs-edge-soft);color:var(--hs-text);text-decoration:none}
html body:not(#hs-x) .hs-art a.hs-prod:hover{border-color:var(--hs-or);box-shadow:0 14px 30px rgba(3,14,24,.45)}
html body:not(#hs-x) .hs-art a.hs-prod:focus-visible{outline:3px solid var(--hs-or);outline-offset:3px}
html body:not(#hs-x) .hs-art .hs-prod-img{background:#fff;border-bottom:0}
html body:not(#hs-x) .hs-art .hs-prod-tag{background:var(--hs-or-soft);color:#ffab78;border:1px solid rgba(241,128,61,.35)}
html body:not(#hs-x) .hs-art .hs-prod-name{color:#fff}
html body:not(#hs-x) .hs-art .hs-prod-text{color:var(--hs-dim)}
html body:not(#hs-x) .hs-art .hs-prod-cta{color:var(--hs-or)}
html body:not(#hs-x) .hs-art a.hs-prod:hover .hs-prod-cta{color:var(--hs-or-h)}
html body:not(#hs-x) .hs-art .hs-more{color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-more:hover{color:var(--hs-or-h)}

/* steps + checklist */
html body:not(#hs-x) .hs-art ol.hs-steps>li::before{background:var(--hs-or);color:#0b2438}
html body:not(#hs-x) .hs-art ol.hs-steps>li:not(:last-child)::after{background:var(--hs-edge)}
html body:not(#hs-x) .hs-art ol.hs-steps>li>strong{color:#fff}
html body:not(#hs-x) .hs-art ul.hs-check>li::before{border-color:#4fd296}

/* FAQ */
html body:not(#hs-x) .hs-art .hs-faq details{background:var(--hs-p1);border:1px solid var(--hs-edge-soft)}
html body:not(#hs-x) .hs-art .hs-faq details[open]{border-color:rgba(241,128,61,.45)}
html body:not(#hs-x) .hs-art .hs-faq summary{color:#fff}
html body:not(#hs-x) .hs-art .hs-faq summary:hover{color:#ffd7bd}
html body:not(#hs-x) .hs-art .hs-faq summary:focus-visible{outline:3px solid var(--hs-or);outline-offset:-3px}
html body:not(#hs-x) .hs-art .hs-faq summary::after{background:var(--hs-or-soft);color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-faq details[open] summary{background:var(--hs-p2)}
html body:not(#hs-x) .hs-art .hs-faq .hs-faq-a{padding:12px 16px 2px}
html body:not(#hs-x) .hs-art .hs-faq .hs-faq-a p{color:var(--hs-text)}

/* author box */
html body:not(#hs-x) .hs-art .hs-author{background:var(--hs-p1);border:1px solid var(--hs-edge-soft)}
html body:not(#hs-x) .hs-art .hs-author p{color:var(--hs-text)}
html body:not(#hs-x) .hs-art .hs-author-mark{background:var(--hs-or);color:#0b2438}

/* related */
html body:not(#hs-x) .hs-art .hs-related a{background:var(--hs-p1);border:1px solid var(--hs-edge-soft);color:#fff;text-decoration:none}
html body:not(#hs-x) .hs-art .hs-related a::after{color:var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-related a:hover{border-color:var(--hs-or);color:#fff;background:var(--hs-p2)}

/* CTA band */
html body:not(#hs-x) .hs-art .hs-cta{
  background-color:var(--hs-p2);
  background-image:radial-gradient(circle at 100% 0,rgba(241,128,61,.28),transparent 55%),linear-gradient(135deg,#16384f 0%,#122d42 100%);
  border:1px solid var(--hs-edge-soft);border-top:3px solid var(--hs-or)}
html body:not(#hs-x) .hs-art .hs-cta-title{color:#fff}
html body:not(#hs-x) .hs-art .hs-cta p{color:#d9e3eb}
html body:not(#hs-x) .hs-art .hs-cta .hs-cta-note{color:var(--hs-dim)}
html body:not(#hs-x) .hs-art a.hs-btn{text-decoration:none}
html body:not(#hs-x) .hs-art a.hs-btn--quote{background:var(--hs-or);color:#0b2438}
html body:not(#hs-x) .hs-art a.hs-btn--quote:hover{background:var(--hs-or-h);color:#0b2438}
html body:not(#hs-x) .hs-art a.hs-btn--wa{background:#0c7a47;color:#fff}
html body:not(#hs-x) .hs-art a.hs-btn--wa:hover{background:#0f8a52;color:#fff}
html body:not(#hs-x) .hs-art a.hs-btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
html body:not(#hs-x) .hs-art a.hs-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------- small phones: stack stat boxes and product grids ---------- */
@media (max-width:640px){
  html body:not(#hs-x) .hs-art{padding:18px 4px 24px}
}
@media (max-width:520px){
  /* stats: one per row, number left / label right */
  html body:not(#hs-x) .hs-art .hs-stats{grid-template-columns:minmax(0,1fr);gap:10px}
  html body:not(#hs-x) .hs-art .hs-stat{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--hs-edge-soft);border-left:3px solid var(--hs-or)}
  html body:not(#hs-x) .hs-art .hs-stat-num{margin:0;font-size:23px;white-space:nowrap}
  /* products: one per row, white image well left, text right */
  html body:not(#hs-x) .hs-art .hs-products,
  html body:not(#hs-x) .hs-art .hs-products--4{grid-template-columns:minmax(0,1fr);gap:10px}
  html body:not(#hs-x) .hs-art a.hs-prod{flex-direction:row;align-items:stretch}
  html body:not(#hs-x) .hs-art .hs-prod-img{flex:0 0 112px;width:112px;aspect-ratio:auto;min-height:112px;padding:8px;border-radius:0}
  html body:not(#hs-x) .hs-art .hs-prod-body{padding:10px 12px 12px;min-width:0}
  html body:not(#hs-x) .hs-art .hs-prod-text{margin-bottom:8px}
  html body:not(#hs-x) .hs-art a.hs-prod:hover{transform:none}
  /* CTA buttons: keep the WhatsApp number on one line */
  html body:not(#hs-x) .hs-art a.hs-btn{padding:12px 14px;font-size:15px}
  /* bar chart: tighter label/value columns */
  html body:not(#hs-x) .hs-art .hs-bars li{grid-template-columns:58px minmax(0,1fr) 44px;gap:8px}
}