/* Nero's blog (scripts/build_blog.py): the index and the single-post template. Homepage kit only: Antonio + Sofia Sans,
   night / page tones, flame + ice, the flame-tip cut corner, the service disc on the seam, white cards that lift, bowls on
   the dark band, no decorative dashes. Reused objects (centred hero, proof pill, trust bar, FAQ rows, call card, CTA band)
   keep their own CSS; this file only adds the blog's pieces. */
[hidden] { display: none !important; }

/* ---------- index hero: the About hero's centred column; the H1, then search + topic chips ---------- */
.hero--blog .hc2 { padding-block: 52px 44px; }
.hero--blog .hc2__l1 { font-size: 128px; letter-spacing: .02em; }
.bh__tools { display: grid; justify-items: center; gap: 18px; width: min(100%, 720px); margin-top: 30px; }
.bh__search { position: relative; display: flex; align-items: center; width: 100%; height: 64px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 28px 50px -24px rgba(0, 0, 0, .75); transition: box-shadow .25s var(--ease); }
.bh__search:focus-within { box-shadow: 0 0 0 4px #F0641E, 0 28px 50px -24px rgba(0, 0, 0, .75); }
.bh__mg { position: absolute; left: 24px; width: 22px; height: 22px; color: #E8541F; pointer-events: none; }
.bh__search input { width: 100%; height: 100%; padding: 0 28px 0 60px; border: 0; border-radius: inherit; background: transparent; font: 500 17px/1 var(--fb); color: var(--ink); text-overflow: ellipsis; }
.bh__search input::placeholder { color: #5B6774; opacity: 1; }
.bh__search input:focus, .bh__search input:focus-visible { outline: none; }
.bh__search input::-webkit-search-cancel-button { cursor: pointer; }
.bh__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bh__chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 7px 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 var(--fb); letter-spacing: .02em; color: #FFFFFF; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .22); transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.bh__chip b { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 800 14px/1 var(--fb); }
.bh__chip:hover { background: rgba(255, 255, 255, .18); }
.bh__chip[aria-pressed="true"] { background: #E8541F; box-shadow: 0 12px 24px -12px rgba(232, 84, 31, .9); }
.bh__chip[aria-pressed="true"] b { background: #FFFFFF; color: #C4411A; }

/* ---------- the library ---------- */
:root { --hang: 120px; }   /* on :root, so the CTA band below the hanging section can read it too */
/* the section hangs its last object (the author plate / the more-posts cards) over the CTA band's crest; flow-root keeps
   the negative margin inside it, z 1 keeps it under the trust bar (z 2) hanging from above */
.sec.bl--hang { z-index: 1; padding-bottom: 0; display: flow-root; }
.bl--hang + .cta--hung.has-bowl { padding-top: calc(var(--pad) + 24px + var(--hang)); }

/* the lead post: the latest, wide; photo left under the cut corner, the disc on the seam between photo and copy */
.bl__lead { position: relative; filter: drop-shadow(0 34px 34px rgba(8, 26, 48, .16)); }
.bl__lin { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: 22px; background: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.bl__lph { margin: 0; min-height: 460px; overflow: hidden; border-radius: 22px 0 0 22px; background: #0B1622; }
.bl__lph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bl__lead:hover .bl__lph img { transform: scale(1.04); }
.bl__lcopy { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 56px 56px 48px 64px; }
.bl__lic { position: absolute; left: -36px; top: 52px; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF;
  box-shadow: 0 0 0 6px #FFFFFF, 0 18px 30px -14px rgba(8, 26, 48, .6); }
.bl__lic .eq { width: 36px; height: 36px; fill: currentColor; }
.bl__lcopy .bc__cat { margin-top: 6px; }
.bl__lt { margin-top: 12px; font: 700 44px/1.04 var(--fd); letter-spacing: .005em; color: var(--night); text-wrap: balance; }
.bl__lt a { color: inherit; text-decoration: none; }
.bl__lt a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* hover: the title takes the plaque blue, no underline (Shoaib 11-04: the hover underline "looks ugly"); the underline
   stays for keyboard focus only, so the focused card is still marked */
.bl__lt a:hover, .bl__lead:hover .bl__lt a { color: #0E67A8; }
.bl__lt a:focus-visible { color: #0E67A8; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.bl__lex { margin-top: 18px; font-size: 17px; line-height: 1.68; color: #4A5663; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.by--lead { margin-top: auto; padding-top: 30px; padding-right: 76px; }
.bl__lgo { position: absolute; right: 48px; bottom: 48px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #E8541F; color: #FFFFFF;
  box-shadow: 0 14px 26px -12px rgba(232, 84, 31, .85); transition: transform .3s var(--ease), background-color .3s var(--ease); }
.bl__lgo .i { width: 20px; height: 20px; }
.bl__lead:hover .bl__lgo, .bl__lead:focus-within .bl__lgo { transform: translateX(4px); background: #CF4616; }

/* the byline: Julian's real photo, his name, the date */
.by { display: flex; align-items: center; gap: 12px; }
.by__av { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F0641E; }
.by__t { display: grid; gap: 4px; font: 500 15px/1.25 var(--fb); color: #4A5663; }
.by__t b { font: 700 16px/1.2 var(--fb); color: var(--ink); }
.by__d { display: inline-flex; align-items: center; gap: 7px; }
.by__d .i { width: 15px; height: 15px; color: #E8541F; }

/* the grid: the AC hub's photo card on the light page (the cut-corner card inside, its shadow on the wrapper) */
.bl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; margin-top: 64px; }
.bl__grid [data-first] { display: none; }
.bl__lead[hidden] + .bl__grid { margin-top: 0; }   /* filtered or page 2+: the grid starts where the lead card was */
[data-blog] { scroll-margin-top: 60px; }
.bl.is-filtering .bl__grid [data-first]:not([hidden]) { display: flex; }
.bc { position: relative; display: flex; filter: drop-shadow(0 22px 22px rgba(8, 26, 48, .13)); transition: transform .35s var(--ease); }
.bc:hover, .bc:focus-within { transform: translateY(-5px); }
.bc__in { position: relative; display: flex; flex-direction: column; width: 100%; border-radius: 18px; background: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.bc__ph { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px 18px 0 0; background: #0B1622; }
.bc__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bc:hover .bc__ph img { transform: scale(1.05); }
.bc__ic { position: relative; z-index: 1; flex: none; width: 58px; height: 58px; margin: -29px 0 0 24px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF;
  box-shadow: 0 0 0 5px #FFFFFF, 0 14px 24px -12px rgba(8, 26, 48, .55); }
.bc__ic .eq { width: 30px; height: 30px; fill: currentColor; }
.svc-ic--air { background: linear-gradient(145deg, #5FCF86 0%, #2E9E5B 50%, #1E7A43 100%); }
.svc-ic--water { background: linear-gradient(145deg, #F27272 0%, #D63A3F 50%, #A8202A 100%); }
.bc__body { display: flex; flex-direction: column; flex: 1; padding: 14px 26px 24px; }
.bc__cat { font: 800 14px/1.2 var(--fb); letter-spacing: .07em; text-transform: uppercase; color: #C4411A; }
.bc__t { margin-top: 8px; font: 700 24px/1.12 var(--fd); letter-spacing: .005em; color: var(--night); text-wrap: balance; }
.bc__t a { color: inherit; text-decoration: none; }
.bc__t a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bc__t a { transition: color .3s var(--ease); }
.bc__t a:hover, .bc:hover .bc__t a { color: #0E67A8; }   /* no hover underline (Shoaib 11-04); focus keeps it */
.bc__t a:focus-visible { color: #0E67A8; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.bc__ex { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc__date { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 18px 56px 0 0; font: 600 14.5px/1.2 var(--fb); color: #4A5663; }
.bc__date .i { width: 15px; height: 15px; color: #E8541F; }
.bc__go { position: absolute; right: 22px; bottom: 20px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #0E67A8;
  box-shadow: inset 0 0 0 1.5px #0E67A8; transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.bc__go .i { width: 16px; height: 16px; }
.bc:hover .bc__go, .bc:focus-within .bc__go { background: #0E67A8; color: #FFFFFF; transform: translateX(3px); }

/* pager + the empty state (the homepage FAQ call card) */
.bl__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 52px; }
.bl__pg { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px var(--line); font: 700 16px/1 var(--fb); color: var(--ink); transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.bl__pg:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px #0E67A8; color: #0E67A8; }
.bl__pg[aria-current="page"] { background: #E8541F; color: #FFFFFF; box-shadow: 0 10px 20px -10px rgba(232, 84, 31, .9); }
.bl__pg:disabled { opacity: .4; cursor: default; }
.bl__pg .i { width: 16px; height: 16px; fill: currentColor; }
.bl__empty { display: grid; justify-items: center; margin-top: 48px; }
.bl__empty .faq__call { margin-top: 0; min-width: min(100%, 360px); }

/* the owner card (Shoaib 11-04: "the owner card need to more better", on the index and the post) in the homepage
   founder card's language: Julian's real photo full height on the left under a night film, his homepage quote over it
   (Notion About Us) on the flame quote disc; on white the name, his two credentials as chips, the About Us words and the
   dark button; the flame-tip cut top right. One component: a container query stacks it when its own width is under
   720 px (narrow post columns, phones). On the index it hangs over the CTA band's crest. */
.ba { position: relative; z-index: 1; container-type: inline-size; margin-top: 110px; margin-bottom: calc(-1 * var(--hang)); filter: drop-shadow(0 50px 56px rgba(8, 26, 48, .3)); }
.ba__in { --cut: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 460px; border-radius: 26px; overflow: hidden; background: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.ba__ph { position: relative; margin: 0; min-height: 100%; background: var(--night); }
.ba__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ba__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 22, 34, 0) 36%, rgba(11, 22, 34, .62) 62%, rgba(11, 22, 34, .95) 100%); }
.ba__q { position: absolute; z-index: 1; left: 34px; right: 34px; bottom: 32px; display: grid; justify-items: start; gap: 14px; }
.ba__qm { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #FFFFFF; background: linear-gradient(150deg, #F7934A, #F0641E 50%, #C4411A);
  box-shadow: 0 14px 26px -12px rgba(232, 84, 31, .85); }
.ba__qm .i { width: 24px; height: 24px; fill: currentColor; }
.ba__qt { font: 700 36px/1.06 var(--fd); letter-spacing: .01em; color: #FFFFFF; text-wrap: balance; }
.ba__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 56px 64px 52px 56px; }
.ba__name { font: 700 58px/.98 var(--fd); letter-spacing: .01em; text-transform: uppercase; color: var(--night); }
.ba__role { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ba__chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: 999px; font: 800 14px/1 var(--fb); letter-spacing: .06em; text-transform: uppercase;
  color: #0A4F80; background: #E8F2FB; box-shadow: inset 0 0 0 1px rgba(14, 103, 168, .24); }
.ba__chip--flame { color: #FFFFFF; background: linear-gradient(150deg, #CC4719, #C4411A 55%, #B83C16); box-shadow: none; }
.ba__bio { max-width: 620px; margin-top: 18px; font-size: 17px; line-height: 1.7; color: #36414C; }
.ba__bio + .ba__bio { margin-top: 12px; }
.ba__go { margin-top: 28px; }
.ba__go .arr { display: inline-flex; color: #F58A3C; transition: transform .2s var(--ease); }
.ba__go .arr .i { width: 18px; height: 18px; }
.ba__go:hover .arr, .ba__go:focus-visible .arr { transform: translateX(3px); }
/* the post's card: at the article's end, not hanging, the first paragraph only */
.ba--post { margin: 64px 0 0; filter: drop-shadow(0 34px 44px rgba(8, 26, 48, .22)); }
.ba--post .ba__bio + .ba__bio { display: none; }
@container (min-width: 720px) {
  .ba--post .ba__in { min-height: 400px; }
  .ba--post .ba__copy { padding: 44px 44px 40px; }
  .ba--post .ba__name { font-size: 46px; }
  .ba--post .ba__qt { font-size: 30px; }
  .ba--post .ba__bio { font-size: 16px; }
}
@container (max-width: 719px) {
  .ba__in { --cut: 28px; grid-template-columns: 1fr; min-height: 0; }
  .ba__ph { min-height: 0; aspect-ratio: 16 / 11; }
  .ba__ph img { object-position: 50% 6%; }
  .ba__q { left: 22px; right: 22px; bottom: 20px; gap: 10px; }
  .ba__qm { width: 44px; height: 44px; } .ba__qm .i { width: 20px; height: 20px; }
  .ba__qt { font-size: 28px; }
  .ba__copy { padding: 30px 24px 28px; }
  .ba__name { font-size: 42px; }
  .ba__bio { font-size: 16px; }
}
@media (max-width: 767px) { .ba { margin-top: 80px; } }

/* ---------- the post hero: the AC hub's split, the featured image where the form card sits ---------- */
.hero--post { padding-bottom: 108px; }
.hero--post .hero__bg::after { background: linear-gradient(90deg, rgba(8, 24, 41, .97) 0%, rgba(8, 24, 41, .9) 44%, rgba(8, 24, 41, .66) 72%, rgba(8, 24, 41, .5) 100%),
  linear-gradient(180deg, rgba(8, 24, 41, .5) 0%, transparent 30%, transparent 70%, rgba(8, 22, 38, .88) 100%); }
.ph { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: center; gap: 64px; padding-block: 36px 28px; }
.hero--post .crumbs li[aria-current] { display: block; max-width: 34ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ph__cat { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; margin: 8px 0 18px; padding: 4px 20px 4px 4px; border-radius: 999px;
  font: 800 14.5px/1 var(--fb); letter-spacing: .07em; text-transform: uppercase; color: #FFFFFF; background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ph__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; }
.ph__ic .eq { width: 21px; height: 21px; fill: currentColor; }
.ph__h { max-width: 15em; font: 700 62px/1.02 var(--fd); letter-spacing: .005em; text-transform: uppercase; color: #FFFFFF; text-wrap: balance;
  filter: drop-shadow(0 .03em .05em rgba(3, 10, 18, .5)); }
.by--hero { margin-top: 28px; }
.by--hero .by__av { box-shadow: 0 0 0 2px #0B1622, 0 0 0 4px #F0641E; }
.by--hero .by__t { color: #CFE6F7; }
.by--hero .by__t b { color: #FFFFFF; }
.ph__ph { position: relative; margin: 0; filter: drop-shadow(0 36px 40px rgba(0, 0, 0, .55)); }
.ph__ph::before { content: ""; position: absolute; inset: 12% -8% -10% 10%; z-index: -1; border-radius: 50%; filter: blur(46px); opacity: .55;
  background: radial-gradient(closest-side, rgba(240, 100, 30, .75), rgba(30, 136, 214, .45) 60%, transparent); }
.ph__ph img { width: 100%; height: auto; aspect-ratio: 916 / 600; object-fit: cover; border-radius: 22px; clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }

/* ---------- the article + the sticky rail ---------- */
.readbar { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 4px; pointer-events: none; }
.readbar span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #F0641E, #E8541F 40%, #1E88D6); }
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; }
.post__body { min-width: 0; max-width: 780px; }
.post__lede p { font-size: 18px; line-height: 1.75; color: #36414C; }
.post__lede p + p { margin-top: 18px; }
.post__lede .post__lead { font-size: 22px; line-height: 1.6; color: var(--ink); }
.post__body > p, .post__why > p { font-size: 18px; line-height: 1.75; color: #36414C; }
.post__body > p + p, .post__why > p + p { margin-top: 18px; }
.post__h2 { margin: 72px 0 18px; font: 700 42px/1.06 var(--fd); letter-spacing: .005em; color: var(--night); text-wrap: balance; scroll-margin-top: 112px; }
.post__body a:not(.link):not(.btn), .post__why a { color: #0E67A8; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: rgba(14, 103, 168, .4); }
.post__body a:not(.link):not(.btn):hover, .post__body a:not(.link):not(.btn):focus-visible { color: #0A4F80; text-decoration-color: currentColor; }
.post__fig { margin: 6px 0 30px; }
.post__fig img { width: 100%; height: auto; border-radius: 20px; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }

/* the causes: one white card per H3 */
.post__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.pc { padding: 26px 26px 28px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 26px 44px -36px rgba(8, 26, 48, .5); }
.pc:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pc__t { margin-bottom: 10px; font: 700 25px/1.1 var(--fd); letter-spacing: .005em; color: var(--night); }
.pc p { font-size: 16px; line-height: 1.7; color: #4A5663; }
.pc p + p { margin-top: 12px; }

/* the symptom table: the trust bar's blue head, the verdict word in colour */
.post__tbl { margin: 28px 0; overflow: hidden; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 30px 50px -40px rgba(8, 26, 48, .5); }
.post__tbl table { width: 100%; border-collapse: collapse; }
.post__tbl thead { background: linear-gradient(120deg, #1670B8 0%, #0E67A8 46%, #0A4F80 100%); }   /* one gradient across the head row, no seams */
.post__tbl thead th { padding: 18px 22px; text-align: left; vertical-align: bottom; font: 700 20px/1.12 var(--fd); letter-spacing: .01em; color: #FFFFFF; background: transparent; }
.post__tbl tbody th { width: 34%; padding: 16px 22px; text-align: left; vertical-align: top; font: 700 16px/1.45 var(--fb); color: var(--ink); }
.post__tbl td { padding: 16px 22px; vertical-align: top; font-size: 16px; line-height: 1.5; color: #36414C; }
.post__tbl tbody tr + tr > * { border-top: 1px solid var(--line); }
.post__tbl tbody tr:nth-child(even) { background: #F7F9FB; }
.vd { font-weight: 800; }
.vd--yes { color: #0E67A8; }
.vd--maybe { color: #C4411A; }
.vd--no { color: #5B6774; }

/* "Why choose": the night panel (the FAQ panel's night + orange top edge, the cut corner) */
.post__why { position: relative; isolation: isolate; overflow: hidden; margin: 72px 0 0; padding: 46px 48px 44px; border-radius: 22px; color: #F7F9FB;
  background: radial-gradient(80% 120% at 100% 0%, rgba(30, 136, 214, .3), transparent 60%), radial-gradient(70% 100% at 0% 100%, rgba(240, 100, 30, .22), transparent 60%),
    linear-gradient(160deg, #12304F 0%, #0B1622 60%, #070E17 100%);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); box-shadow: inset 0 4px 0 #F0641E; }
.post__why .post__h2 { margin-top: 0; color: #FFFFFF; }
.post__why > p { color: rgba(247, 249, 251, .88); }
.post__body .post__why a:not(.link):not(.btn) { color: #9CD0F2; text-decoration-color: rgba(156, 208, 242, .5); }
.post__body .post__why a:not(.link):not(.btn):hover, .post__body .post__why a:not(.link):not(.btn):focus-visible { color: #FFFFFF; text-decoration-color: currentColor; }
.post__why .post__tel b { color: #FFFFFF; }
.post__tel { white-space: nowrap; }
.post__why-torch { position: absolute; right: -24px; bottom: -36px; z-index: -1; width: 150px; height: auto; opacity: .07; pointer-events: none; }

/* the FAQ: the homepage's hairline rows (the flame-to-ice edge on the open row) */
.post__faq { gap: 0; margin-top: 20px; border-top: 1px solid var(--line); }
.post__faq .acc__item { position: relative; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.post__faq .acc__item.is-open { border-color: var(--line); box-shadow: none; }
.post__faq .acc__item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #F0641E, #1E88D6);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.post__faq .acc__item.is-open::before { transform: none; }
.post__faq .acc__btn { min-height: 80px; padding: 18px 4px 18px 24px; background: transparent; }
.post__faq .acc__btn > span:first-child { font: 700 23px/1.15 var(--fd); letter-spacing: .005em; color: var(--night); }
.post__faq .acc__btn:hover > span:first-child { color: #0E67A8; }
.post__faq .acc__sign { width: 40px; height: 40px; background: transparent; box-shadow: inset 0 0 0 1.5px #C5D0DA; }
.post__faq .is-open .acc__sign { background: #F0641E; box-shadow: none; }
.post__faq .acc__inner p { max-width: 680px; padding: 0 56px 24px 24px; font-size: 17px; line-height: 1.65; color: #36414C; }

/* the rail: the contents (the active section lit, a reading line that fills flame to ice) and the call card */
.post__rail { align-self: stretch; }
.post__sticky { position: sticky; top: 112px; display: grid; gap: 20px; }
.toc { --p: 0; position: relative; padding: 20px 16px 20px 30px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 30px 50px -42px rgba(8, 26, 48, .5); }
.toc::before, .toc::after { content: ""; position: absolute; left: 14px; top: 26px; width: 3px; border-radius: 3px; }
.toc::before { bottom: 26px; background: #E3E9EF; }
.toc::after { height: calc((100% - 52px) * var(--p)); background: linear-gradient(180deg, #F0641E, #1E88D6); transition: height .15s linear; }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; font: 600 15px/1.3 var(--fb); color: #4A5663; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.post__body .toc a:not(.link):not(.btn) { font-weight: 600; color: #4A5663; text-decoration: none; }   /* the inline contents inside the article: not prose links */
.toc a:hover, .post__body .toc a:not(.link):not(.btn):hover { background: #F2F5F8; color: var(--ink); }
.toc a[aria-current="true"], .post__body .toc a:not(.link):not(.btn)[aria-current="true"] { background: #FDECE2; color: var(--night); font-weight: 800; }
.toc--inline { display: none; }
.post__call { margin-top: 0; }

/* more posts, hanging over the CTA band */
.post__more { margin-top: 112px; }
.post__mh a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--night); text-decoration: none; }
.post__mh .arr { color: #E8541F; }
.post__mh .arr .i { width: .6em; height: .6em; }
.post__mh a:hover, .post__mh a:focus-visible { color: #0E67A8; }
.post__mh a:hover .arr { transform: translateX(5px); }
.bl__grid--more { position: relative; z-index: 1; margin-top: 30px; margin-bottom: calc(-1 * var(--hang)); }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .hero--blog .hc2__l1 { font-size: 104px; }
  .bl__lt { font-size: 38px; } .bl__lph { min-height: 420px; }
  .ph { gap: 44px; } .ph__h { font-size: 52px; }
  .post__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
}
@media (max-width: 1023px) {
  .bl__lin { grid-template-columns: 1fr; }
  .bl__lph { min-height: 0; aspect-ratio: 16 / 9; border-radius: 22px 22px 0 0; }
  .bl__lcopy { padding: 52px 40px 40px; }
  .bl__lic { left: 36px; top: -36px; }
  .bl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph { grid-template-columns: 1fr; gap: 36px; }
  .ph__ph { width: 100%; max-width: 640px; }
  .post__grid { grid-template-columns: 1fr; }
  .post__body { max-width: none; }
  .post__rail { display: none; }
  .toc--inline { display: block; margin: 32px 0 8px; }
}
@media (max-width: 767px) {
  :root { --hang: 72px; }
  .hero--blog .hc2 { padding-block: 30px 28px; }
  .hero--blog .hc2__l1 { font-size: 72px; }
  .bh__tools { margin-top: 22px; }
  .bh__search { height: 56px; }
  .bh__search input { font-size: 16px; padding: 0 18px 0 52px; }
  .bh__mg { left: 20px; }
  .bl__grid { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; }
  .bl__lcopy { padding: 46px 22px 28px; }
  .bl__lic { left: 22px; top: -32px; width: 64px; height: 64px; }
  .bl__lt { font-size: 32px; }
  .bl__lgo { display: none; }
  .by--lead { padding-right: 0; }
  .bl__lin { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
  .ph { padding-block: 26px 20px; }
  .ph__h { font-size: 38px; }
  .ph__ph img { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); border-radius: 16px; }
  .hero--post .crumbs li[aria-current] { max-width: 22ch; }
  .post__lede .post__lead { font-size: 19px; }
  .post__lede p, .post__body > p, .post__why > p { font-size: 17px; }
  .post__h2 { margin-top: 52px; font-size: 32px; }
  .post__fig img { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); border-radius: 14px; }
  .post__cards { grid-template-columns: 1fr; }
  .post__why { padding: 32px 22px 30px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
  .post__faq .acc__btn { min-height: 72px; padding: 16px 2px 16px 18px; }
  .post__faq .acc__btn > span:first-child { font-size: 21px; }
  .post__faq .acc__inner p { padding: 0 12px 22px 18px; font-size: 16px; }
  /* the table stacks: one card per symptom, each verdict under its column label */
  .post__tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .post__tbl table, .post__tbl tbody, .post__tbl tr, .post__tbl th, .post__tbl td { display: block; width: 100%; }
  .post__tbl tbody tr { padding: 16px 18px; }
  .post__tbl tbody tr + tr { border-top: 1px solid var(--line); }
  .post__tbl tbody tr + tr > * { border-top: 0; }
  .post__tbl tbody th { width: auto; padding: 0 0 8px; font-size: 17px; }
  .post__tbl td { padding: 6px 0 0; }
  .post__tbl td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 800 14px/1.3 var(--fb); letter-spacing: .04em; text-transform: uppercase; color: #0E67A8; }
  .post__more { margin-top: 80px; }
}
@media (max-width: 374px) { .hero--blog .hc2__l1 { font-size: 64px; } .ph__h { font-size: 34px; } .bh__chip { padding-left: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .bc, .bc__ph img, .bl__lph img, .bc__go, .bl__lgo, .toc::after, .bh__search { transition: none; }
  .bc:hover, .bc:focus-within { transform: none; }
  .bc:hover .bc__ph img, .bl__lead:hover .bl__lph img { transform: none; }
}

/* ---------- every other post on the template (11-04, "create other blogs as well"): the blocks the template post does
   not carry. Lone sub-headings (H3s with images or tables under them), and lists, in the article's own type. ---------- */
.post__body > .post__h3, .post__why > .post__h3 { margin: 40px 0 12px; font: 700 28px/1.12 var(--fd); letter-spacing: .01em; color: var(--night); text-wrap: balance; }
.post__why > .post__h3 { color: #FFFFFF; }
.post__list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.post__body > .post__list + p, .post__why > .post__list + p { margin-top: 18px; }
.post__list li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.65; color: #36414C; }
ul.post__list li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(150deg, #F7934A, #F0641E 50%, #C4411A); }
ol.post__list { counter-reset: pl; }
ol.post__list li { counter-increment: pl; padding-left: 36px; }
ol.post__list li::before { content: counter(pl); position: absolute; left: 0; top: .2em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 700 14px/1 var(--fb); color: #FFFFFF; background: #0E67A8; }
.pc .post__list li { font-size: 15.5px; line-height: 1.6; }
.acc__inner .post__list { max-width: 680px; padding: 0 56px 18px 24px; }
.acc__inner .post__list li { font-size: 17px; }
.post__why .post__list li { color: rgba(247, 249, 251, .88); }
@media (max-width: 767px) { .post__body > .post__h3 { font-size: 24px; } .post__list li { font-size: 17px; } }

/* ---------- QA 2026-11-04 round 3: a paragraph after a list inside a card keeps the card's rhythm ---------- */
.pc .post__list + p { margin-top: 14px; }