:root {
  --font-main: "Manrope", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Figma-named aliases */
  --Fonts-Manrope: "Manrope", sans-serif;
  --Fonts-Mono: "IBM Plex Mono", monospace;

  /* Ghost custom fonts hooks */
  --gh-font-heading: var(--font-main);
  --gh-font-body: var(--font-main);

  /* Colours */
  --black-60: #1f2126;
  --black-50: #25282d;
  --black-40: #2b2e34;
  --black-30: #32353c;
  --black-20: #3e424a;
  --black-10: #4e5258;
  --black-80: #141619;
  --grey-40: #e5e7eb;
  --grey-30: #edeff2;
  --grey-20: #f4f4f6;
  --grey-10: #f9f9f9;
  --grey-90: #7c828d;
  --grey-100: #5f656f;
  --stone-200: #e7e5e4;
  --stone-400: #a8a29e;

  /* Header height from Header.js: HEADER_H = 64 */
  --header-h: 64px;
}

/* ============================================================
   Reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: opacity 0.15s;
  background: #fff;
}
body {
  font-family: var(--font-main);
  background: #fff;
  color: var(--black-40);
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   HEADER
   Source: bar/2026/components/Header.js
   ============================================================ */

/* fixed top-0 z-50 w-full backdrop-blur-[11px] */
#kim-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  transition: background 0.2s ease;
  /* light default: bg-[rgba(255,255,255,0.12)] */
  background: rgba(255, 255, 255, 0.72);
}

/* dark mode: bg-[rgba(0,0,0,0.12)] */
#kim-header.is-dark {
  background: rgba(0, 0, 0, 0.12);
}

/* px-3 always — Header.js uses px-3 on all breakpoints, no overrides */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 0.75rem; /* px-3 = 12px, same on all screen sizes */
}

/* ── Logo ─────────────────────────────────────────────────────
   relative flex items-center cursor-pointer p-2 shrink-0 w-12.25 h-7
   w-12.25 = 49px  h-7 = 28px
   ──────────────────────────────────────────────────────────── */
.header-logo {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 49px;
  height: 28px;
  padding: 0.5rem;
}

.header-logo img {
  position: absolute;
  transition: opacity 0.3s ease;
}

/* wordmark: 49×25 */
.logo-wordmark {
  width: 49px;
  height: 25px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
/* icon: 23×28 */
.logo-icon {
  width: 23px;
  height: 28px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Default (not scrolled, light mode): show dark wordmark */
.logo-wordmark.logo-dark {
  opacity: 1;
}
.logo-wordmark.logo-light {
  opacity: 0;
}
.logo-icon.logo-dark {
  opacity: 0;
}
.logo-icon.logo-light {
  opacity: 0;
}

/* Scrolled: hide wordmark, show dark icon */
#kim-header.is-scrolled .logo-wordmark {
  opacity: 0;
}
#kim-header.is-scrolled .logo-icon.logo-dark {
  opacity: 1;
}

/* Dark mode (not scrolled): show light wordmark */
#kim-header.is-dark .logo-wordmark.logo-dark {
  opacity: 0;
}
#kim-header.is-dark .logo-wordmark.logo-light {
  opacity: 1;
}

/* Dark + scrolled: show light icon */
#kim-header.is-dark.is-scrolled .logo-wordmark {
  opacity: 0;
}
#kim-header.is-dark.is-scrolled .logo-icon.logo-dark {
  opacity: 0;
}
#kim-header.is-dark.is-scrolled .logo-icon.logo-light {
  opacity: 1;
}

/* Left group: flex items-center gap-4 h-[44px] */
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4 */
  height: 44px;
}

/* ── Desktop nav: hidden md:flex items-center gap-3 ── */
.header-nav {
  display: none;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .header-nav {
    display: flex;
  }
}

/* p-3 text-base tracking-[0.32px] rounded-xl */
.nav-btn,
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--black-60); /* text-[#1f2126] */
  border-radius: 0.75rem;
  transition: background 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.nav-btn:hover,
.nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
} /* hover:bg-black/5 */

#kim-header.is-dark .nav-btn,
#kim-header.is-dark .nav-link {
  color: #fff;
}
#kim-header.is-dark .nav-btn:hover,
#kim-header.is-dark .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
} /* hover:bg-white/10 */

.chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.nav-item.is-open .chevron {
  transform: rotate(180deg);
}

/* ── Dropdown base ── */
.nav-item {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px); /* mt-2.5 */
  left: 0;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.nav-item.is-open .dropdown {
  display: flex;
}

/* ── Products dropdown ──
   pt-4 px-3 pb-3  max-h-72(288px)  overflow-x-auto  gap-4  items-start  w-fit
   ── */
.products-dropdown {
  padding: 1rem 0.75rem 0.75rem;
  align-items: flex-start;
  gap: 1rem; /* gap-4 */
  max-height: 288px;
  overflow-x: auto;
  width: max-content; /* w-fit */
}

/* w-50(200px)  min-h-61.5(246px)  p-3  rounded-xl */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 200px;
  min-height: 246px;
  padding: 0.75rem;
  border-radius: 0.75rem;
  color: var(--black-10);
  flex-shrink: 0;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.product-card:hover {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* relative w-full h-32.5(130px) rounded-lg border border-stone-100 */
.product-img-wrap {
  width: 100%;
  height: 130px;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--grey-20);
  background: var(--grey-10);
  flex-shrink: 0;
}
.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.product-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 500;
}
.product-title .arrow-icon {
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.product-card:hover .arrow-icon {
  opacity: 1;
}

/* text-xs leading-tight */
.product-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--black-10);
}

/* w-px h-60(240px) bg-stone-200 */
.product-divider {
  width: 1px;
  height: 240px;
  background: var(--stone-200);
  flex-shrink: 0;
  align-self: center;
}

/* ── Resources dropdown ──
   w-170(680px)  p-4  gap-4
   ── */
.resources-dropdown {
  width: 680px;
  max-width: calc(100vw - 1.5rem);
  padding: 1rem;
  gap: 1rem;
  align-items: stretch;
  overflow-x: auto;
}

/* min-w-40(160px)  flex-col  gap-1  text-base font-medium */
.resources-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
}

.resource-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--black-10);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.resource-link .arrow-icon {
  opacity: 0;
  transition: opacity 0.15s;
}
.resource-link:hover {
  background: #fff;
  border-color: var(--stone-200);
}
.resource-link:hover .arrow-icon {
  opacity: 1;
}

/* border-l border-stone-200 pl-4 */
.resources-featured {
  flex: 1;
  border-left: 1px solid var(--stone-200);
  padding-left: 1rem;
}

/* text-xs text-stone-400 mb-3 */
.featured-label {
  font-size: 0.75rem;
  color: var(--stone-400);
  margin-bottom: 0.75rem;
}

/* grid-cols-2 gap-3 */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.featured-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  color: var(--black-10);
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.featured-card:hover {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* w-full h-30(120px) relative rounded-xl overflow-hidden */
.featured-img-wrap {
  width: 100%;
  height: 120px;
  border-radius: 0.75rem;
  overflow: hidden;
}
.featured-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* text-xs font-semibold leading-tight */
.featured-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
/* text-[10px] text-stone-400 mt-2 */
.featured-card-meta {
  font-size: 0.625rem;
  color: var(--stone-400);
  margin-top: 0.5rem;
}

/* ── Book a Demo button ──
   backdrop-blur-[11px] px-4 py-3 rounded-xl font-manrope text-sm font-semibold
   dark mode: bg-[#1f2126] text-white
   ── */
.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  height: 43px; /* h-10.75 */
  background: var(--black-60);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.75rem;
  white-space: nowrap;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  transition: background 0.15s;
}
.btn-demo:hover {
  background: var(--black-30);
} /* hover:bg-[#32353c] */
.btn-demo:active {
  background: var(--black-20);
} /* active:bg-[#3e424a] */

/* On dark header: light button — bg-white text-[#25282d] */
#kim-header.is-dark .btn-demo {
  background: #fff;
  color: var(--black-50);
}
#kim-header.is-dark .btn-demo:hover {
  background: #dadce0;
}
#kim-header.is-dark .btn-demo:active {
  background: #d1d5db;
}

/* Desktop CTA */
.header-cta-desktop {
  display: none;
}
@media (min-width: 768px) {
  .header-cta-desktop {
    display: flex;
    align-items: center;
  }
}

/* Mobile CTA + hamburger */
.header-cta-mobile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .header-cta-mobile {
    display: none;
  }
}

/* Hamburger button */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--black-10);
  flex-shrink: 0;
}
.icon-close {
  display: none;
}
.hamburger.is-open .icon-menu {
  display: none;
}
.hamburger.is-open .icon-close {
  display: block;
}

/* ── Mobile nav overlay ──
   fixed top-16 left-0 right-0 bottom-0 border-t border-stone-200
   bg-white/80 backdrop-blur-md z-40
   flex-col gap-6 py-5 px-4 text-xl font-semibold
   ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--stone-200);
  z-index: 40;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 1rem;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.mobile-nav.is-open {
  display: flex;
}

/* text-stone-400 text-sm font-medium */
.mobile-nav-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--stone-400);
  margin-bottom: 0.25rem;
}
.mobile-nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* text-blackTen text-xl font-medium */
.mobile-nav-link {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--black-10);
}

/* ============================================================
   SITE CONTENT
   ============================================================ */
.site-content {
  padding-top: var(--header-h);
  min-height: 60vh;
  background: #fff;
}

.footer-wrap {
  position: relative;
  background: #fff;
  overflow: hidden;
  min-height: 1126px; /* spiral-xs natural height */
  border-top: 1px solid #d6d3d1; /* stone-300 — matches bar's section divider */
}
.footer-wrap-index {
  min-height: 866px;
}
@media (max-width: 460px) {
  .footer-wrap.footer-wrap-index {
    min-height: unset;
  }
  .footer-wrap-index .footer-inner-wrap {
    position: relative;
    bottom: unset;
  }
  .footer-wrap-index .cta-inner-top {
    align-items: flex-end;
  }
  .footer-wrap-post .cta-inner-top {
    align-items: flex-start;
  }
  .footer-wrap-index .footer-spiral-xs {
    object-position: center bottom;
  }
}
@media (min-width: 345px) and (max-width: 460px) {
  .footer-wrap-index .footer-spiral-xs {
    height: calc(100vw * 2.6308);
    object-fit: fill;
    object-position: unset;
    top: calc(-100vw * 0.45);
  }
}
@media (max-width: 400px) {
  .footer-wrap-index .footer-spiral-xs {
    height: calc(100vw * 2.6308);
    object-fit: fill;
    object-position: unset;
    top: calc(-100vw * 0.15);
  }
}
@media (min-width: 640px) {
  .footer-wrap {
    min-height: 1128px;
  } /* spiral-sm */
  .footer-wrap-index {
    min-height: 1066px;
  }
}
@media (min-width: 768px) {
  .footer-wrap {
    min-height: 1122px;
  } /* spiral-md */
  .footer-wrap-index {
    min-height: 1066px;
  }
}
@media (min-width: 1024px) {
  .footer-wrap {
    min-height: 1457px;
  } /* spiral-lg */
  .footer-wrap-index {
    min-height: 1456px;
  }
}
@media (min-width: 1280px) {
  .footer-wrap {
    min-height: 1464px;
  } /* spiral-xl */
  .footer-wrap-index {
    min-height: 1456px;
  }
}
@media (min-width: 1470px) {
  .footer-wrap {
    min-height: 1457px;
  } /* spiral-mxl */
  .footer-wrap-index {
    min-height: 1456px;
  }
}
@media (min-width: 1536px) {
  .footer-wrap {
    min-height: 1457px;
  } /* spiral-2xl */
  .footer-wrap-index {
    min-height: 1456px;
  }
}

/* Spiral: matches bar exactly — top:0 h-full w-full object-cover (center by default).
   SVG lines are at Y≈73% of the image; center alignment keeps them visible. */
.footer-spiral {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  display: none;
}

/* Default */
.footer-spiral-xs {
  display: block;
  /* position: relative; */
  /* bottom: 200px !important; */
}
@media (max-width: 344px) {
  .footer-wrap-index .footer-spiral-xs {
    object-position: center 60%;
  }
}

.footer-spiral-sm,
.footer-spiral-md,
.footer-spiral-lg,
.footer-spiral-xl,
.footer-spiral-mxl,
.footer-spiral-2xl {
  display: none;
}

/* >= 640px */
@media (min-width: 640px) {
  .footer-spiral-xs {
    display: none;
  }

  .footer-spiral-sm {
    display: block;
  }
}

/* >= 768px */
@media (min-width: 768px) {
  .footer-spiral-sm {
    display: none;
  }

  .footer-spiral-md {
    display: block;
  }
}

/* >= 1024px */
@media (min-width: 1024px) {
  .footer-spiral-md {
    display: none;
  }

  .footer-spiral-lg {
    display: block;
  }
}

/* >= 1280px */
@media (min-width: 1280px) {
  .footer-spiral-lg {
    display: none;
  }

  .footer-spiral-xl {
    display: block;
  }
}

/* >= 1470px */
@media (min-width: 1470px) {
  .footer-spiral-xl {
    display: none;
  }

  .footer-spiral-mxl {
    display: block;
  }
}

/* >= 1536px */
@media (min-width: 1536px) {
  .footer-spiral-mxl {
    display: none;
  }

  .footer-spiral-2xl {
    display: block;
  }
}

/* mirrors bar: relative z-10 flex flex-col gap-50 sm:gap-33 lg:gap-14 xl:gap-0 */
.footer-inner-wrap {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 100px; /* gap-50 */
  bottom: 0px !important;
  width: 100%;
}
.footer-wrap-index .footer-inner-wrap {
  gap: 0;
}
@media (min-width: 640px) {
  .footer-inner-wrap {
    gap: 132px;
  } /* gap-33 */
}
@media (min-width: 1024px) {
  .footer-inner-wrap {
    gap: 56px;
  } /* gap-14 */
}
@media (min-width: 1280px) {
  .footer-inner-wrap {
    gap: 0;
  } /* xl:gap-0 */
}

.site-footer {
  position: relative;
  background: transparent !important;
}

/* mirrors bar Footer: pt-14 px-5 pb-7 sm:pt-12 sm:px-16 sm:pb-7 lg:px-25 lg:pb-53 lg:pt-71.75 xl:px-30 xl:pb-62.25 mxl:px-41.75 */
.site-footer {
  padding: 56px 20px 28px;
}
.footer-wrap-index .site-footer {
  padding: 56px 20px 43px;
}
@media (min-width: 640px) {
  .site-footer {
    padding: 48px 64px 28px;
  }
  .footer-wrap-index .site-footer {
    padding: 48px 64px 51px;
  }
}
@media (min-width: 1024px) {
  .site-footer {
    padding: 287px 100px 212px;
  }
  .footer-wrap-index .site-footer {
    padding: 247px 100px 228px;
  }
}
@media (min-width: 1280px) {
  .site-footer {
    padding-left: 120px;
    padding-right: 120px;
    padding-bottom: 249px;
  }
  .footer-wrap-index .site-footer {
    padding-left: 120px;
    padding-right: 120px;
    padding-bottom: 228px;
  }
}
@media (min-width: 1470px) {
  .site-footer {
    padding-left: 167px;
    padding-right: 167px;
  }
  .footer-wrap-index .site-footer {
    padding-left: 167px;
    padding-right: 167px;
  }
}
@media (min-width: 1536px) {
  .site-footer {
    padding-left: 192px;
    padding-right: 192px;
  }
  .footer-wrap-index .site-footer {
    padding-left: 192px;
    padding-right: 192px;
  }
}

/* flex flex-col lg:flex-row justify-between gap-12 */
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem; /* gap-12 = 48px */
}
@media (min-width: 1024px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem; /* gap-12 = 48px */
    position: relative;
    top: 20px;
  }
}

/* Left block: flex flex-col gap-8 lg:gap-28 mxl:gap-30.5 w-full lg:w-[302px] */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-8 */
  width: 100%;
}
@media (min-width: 1024px) {
  .footer-brand {
    width: 302px;
    gap: 7rem; /* gap-28 */
  }
}
@media (min-width: 1470px) {
  .footer-brand {
    gap: 7.625rem; /* mxl:gap-30.5 */
  }
}

/* Logo + tagline group: flex flex-col gap-3 */
.footer-logo-wrap-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* flex items-center gap-2 */
.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-logo-wrap img {
  display: inline;
}

/* font-manrope text-base text-[#2b2e34] */
.footer-tagline {
  font-size: 1rem;
  color: var(--black-40);
}

/* font-manrope text-sm text-[#2b2e34] */
.footer-address {
  font-size: 0.875rem;
  color: var(--black-40);
}

/* flex flex-wrap gap-12 lg:gap-16 */
.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem; /* Figma footer component: 32px */
}
@media (min-width: 1024px) {
  .footer-cols {
    gap: 4rem; /* gap-16 = 64px */
  }
}

/* flex flex-col gap-5 */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* font-ibm-plex-mono text-sm text-[#7c828d] uppercase */
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--grey-90);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* flex flex-col gap-2 xl:gap-0.75 mxl:gap-2 */
.footer-col .footer-link-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* gap-2 = 8px */
}
@media (min-width: 1280px) {
  .footer-col .footer-link-group {
    gap: 0.1875rem;
  } /* xl:gap-0.75 = 3px */
}
@media (min-width: 1470px) {
  .footer-col .footer-link-group {
    gap: 0.5rem;
  } /* mxl:gap-2 = 8px */
}

/* font-manrope text-sm text-[#2b2e34] py-1 rounded-md hover:opacity-70 lg:leading-4.25 xl:leading-normal */
.footer-link {
  font-size: 0.875rem;
  color: var(--black-40);
  padding: 0.25rem 0;
  border-radius: 0.375rem;
  transition: opacity 0.15s;
  display: block;
}
@media (min-width: 1024px) {
  .footer-link {
    line-height: 1.0625rem;
  } /* lg:leading-4.25 = 17px */
}
@media (min-width: 1280px) {
  .footer-link {
    line-height: normal;
  } /* xl:leading-normal */
}
.footer-link:hover {
  opacity: 0.7;
}

/* Bottom bar — separate from spiral wrapper: border-t border-stone-300 p-5 */
.footer-bottom-bar {
  border-top: 1px solid #d6d3d1; /* border-stone-300 */
  padding: 20px; /* p-5 */
  background: #fff !important;
}
/* Inner: flex items-center justify-between sm:px-12 md:px-12 lg:px-20 xl:px-25 mxl:px-36 2xl:px-36 */
.footer-bottom-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .footer-bottom-bar-inner {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (min-width: 768px) {
  .footer-bottom-bar-inner {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (min-width: 1024px) {
  .footer-bottom-bar-inner {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (min-width: 1280px) {
  .footer-bottom-bar-inner {
    padding-left: 100px;
    padding-right: 100px;
  }
}
@media (min-width: 1470px) {
  .footer-bottom-bar-inner {
    padding-left: 144px;
    padding-right: 144px;
  }
}
@media (min-width: 1536px) {
  .footer-bottom-bar-inner {
    padding-left: 144px;
    padding-right: 144px;
  }
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 16.5px;
  color: var(--stone-400);
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer-social-link {
  opacity: 0.7;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}
.footer-social-link:hover {
  opacity: 1;
}
.footer-social-link img {
  display: block;
}

/* ============================================================
   REQUIRED GHOST / KOENIG EDITOR CLASSES
   ============================================================ */
.kg-width-wide {
  margin-left: calc(50% - 50vw + 1.25rem);
  margin-right: calc(50% - 50vw + 1.25rem);
}
.kg-width-full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.gh-article {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.gh-article-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--black-60);
}
.gh-content {
  line-height: 1.75;
}
.gh-content p {
  margin-bottom: 1.25rem;
}

/* ============================================================
   PAGE INNER — shared page padding utility
   Matches bar/tailwind.config.js page padding per breakpoint
   ============================================================ */
.page-inner {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 640px) {
  .page-inner {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (min-width: 768px) {
  .page-inner {
    padding-left: 59px;
    padding-right: 59px;
  }
}
@media (min-width: 1024px) {
  .page-inner {
    padding-left: 100px;
    padding-right: 100px;
  }
}
@media (min-width: 1280px) {
  .page-inner {
    padding-left: 120px;
    padding-right: 120px;
  }
}
@media (min-width: 1470px) {
  .page-inner {
    padding-left: 167px;
    padding-right: 167px;
  }
}
@media (min-width: 1536px) {
  .page-inner {
    padding-left: 192px;
    padding-right: 192px;
  }
}

/* ============================================================
   BLOG INDEX
   ============================================================ */

/* ── Side decorations ───────────────────────────────────── */
.blog-index {
  position: relative;
}
.blog-side {
  display: none;
  position: absolute;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 1024px) {
  .blog-side {
    display: block;
  }
  .blog-side--short {
    width: 39px;
    object-fit: fill;
  }
  .blog-side--left.blog-side--short {
    left: 0;
  }
  .blog-side--right.blog-side--short {
    right: 0;
  }
  .blog-side--long {
    width: 39px;
    object-fit: fill;
  }
  .blog-side--left.blog-side--long {
    left: 0;
  }
  .blog-side--right.blog-side--long {
    right: 0;
  }
}

/* ── Hero ────────────────────────────────────────────────── */
.blog-hero {
  padding-top: 44px;
  padding-bottom: 48px;
  background-color: white;
}
@media (min-width: 640px) {
  .blog-hero {
    padding-top: 64px;
  }
}
@media (min-width: 768px) {
  .blog-hero {
    padding-top: 76px;
  }
}
@media (min-width: 1024px) {
  .blog-hero {
    padding-top: 96px;
    padding-bottom: 64px;
  }
}
@media (min-width: 1470px) {
  .blog-hero {
    padding-top: 128px;
  }
}

/* page-inner here acts as the outer container, no extra wrapper needed */

/* "kim blog" label pill */
.blog-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.blog-label-row img {
  flex-shrink: 0;
}

.blog-label {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #57534e;
}
@media (max-width: 428px) {
  .blog-label {
    font-size: 12px;
  }
}

.blog-hero-h1 {
  font-family: var(--Fonts-Manrope);
}

.hero-h1-line1 {
  color: #78716c;
  font-weight: normal;
}
.hero-h1-line2 {
  color: #44403c;
  font-weight: normal;
}

.blog-hero-h1 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--black-60);
  margin-bottom: 40px;
}
@media (max-width: 428px) {
  .blog-hero-h1 {
    font-size: 32px;
  }
}
@media (min-width: 429px) and (max-width: 640px) {
  .blog-hero-h1 {
    font-size: 36px;
  }
  .blog-label {
    font-size: 14px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-hero-h1 {
    font-size: 40px;
  }
  .blog-label {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .blog-hero-h1 {
    font-size: 48px;
    margin-bottom: 60px;
  }
}
@media (min-width: 1280px) {
  .blog-hero-h1 {
    font-size: 56px;
  }
}
@media (min-width: 1536px) {
  .blog-hero-h1 {
    font-size: 64px;
  }
}

/* Box containing featured post (left) + 3 recents (right) */
.blog-hero-box {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* border: 1px solid #d6d3d1; */
  overflow: hidden;
}
@media (min-width: 1024px) {
  .blog-hero-box {
    display: grid;
    grid-template-columns: 55fr 45fr;
  }
}
@media (min-width: 1280px) {
  .blog-hero-box {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Hero box corner brackets (≥1280px only) ── */
.blog-hero-box-wrap {
  position: relative;
}
.bk-corner {
  display: none;
  position: absolute;
  pointer-events: none;
}
@media (min-width: 1280px) {
  .bk-corner {
    display: block;
  }

  /* vertical lines: 70px tall, extend outward from box top/bottom */
  .bk-corner::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 70px;
    background: repeating-linear-gradient(
      to bottom,
      #d6d3d1 0,
      #d6d3d1 4px,
      transparent 4px,
      transparent 8px
    );
  }
  /* horizontal lines: 58px wide, extend outward from box left/right */
  .bk-corner::after {
    content: "";
    position: absolute;
    width: 58px;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      #d6d3d1 0,
      #d6d3d1 4px,
      transparent 4px,
      transparent 8px
    );
  }

  /* top-left: vertical goes up, horizontal goes left */
  .bk-corner--tl {
    top: 0;
    left: 0;
  }
  .bk-corner--tl::before {
    bottom: 0;
    left: 0;
    mask: linear-gradient(to top, #000, transparent);
    -webkit-mask: linear-gradient(to top, #000, transparent);
  }
  .bk-corner--tl::after {
    top: 0;
    right: 0;
    mask: linear-gradient(to left, #000, transparent);
    -webkit-mask: linear-gradient(to left, #000, transparent);
  }

  /* top-right: vertical goes up, horizontal goes right */
  .bk-corner--tr {
    top: 0;
    right: 0;
  }
  .bk-corner--tr::before {
    bottom: 0;
    right: 0;
    mask: linear-gradient(to top, #000, transparent);
    -webkit-mask: linear-gradient(to top, #000, transparent);
  }
  .bk-corner--tr::after {
    top: 0;
    left: 0;
    mask: linear-gradient(to right, #000, transparent);
    -webkit-mask: linear-gradient(to right, #000, transparent);
  }

  /* bottom-left: vertical goes down, horizontal goes left */
  .bk-corner--bl {
    bottom: 0;
    left: 0;
  }
  .bk-corner--bl::before {
    top: 0;
    left: 0;
    mask: linear-gradient(to bottom, #000, transparent);
    -webkit-mask: linear-gradient(to bottom, #000, transparent);
  }
  .bk-corner--bl::after {
    bottom: 0;
    right: 0;
    mask: linear-gradient(to left, #000, transparent);
    -webkit-mask: linear-gradient(to left, #000, transparent);
  }

  /* bottom-right: vertical goes down, horizontal goes right */
  .bk-corner--br {
    bottom: 0;
    right: 0;
  }
  .bk-corner--br::before {
    top: 0;
    right: 0;
    mask: linear-gradient(to bottom, #000, transparent);
    -webkit-mask: linear-gradient(to bottom, #000, transparent);
  }
  .bk-corner--br::after {
    bottom: 0;
    left: 0;
    mask: linear-gradient(to right, #000, transparent);
    -webkit-mask: linear-gradient(to right, #000, transparent);
  }
}

/* ── Featured post (left col of hero box) ── */
.blog-featured {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: opacity 0.18s;
  border: 1px solid #d6d3d1;
}
.blog-featured:hover {
  background: #fafaf9;
}

.blog-featured-img img {
  transition: transform 0.3s ease;
  will-change: transform;
}

.blog-featured:hover .blog-featured-img img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .blog-featured {
    margin-bottom: 36px;
  }
}

@media (min-width: 1024px) {
  .blog-featured {
    border-right: 1px solid #d6d3d1;
  }
}

/* Image: 260px tall, tags at bottom-left */
.blog-featured-img {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: var(--grey-20);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.blog-featured-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tags overlaid on image, bottom-left */
.blog-featured-img-tags {
  position: relative;
  display: flex;
  gap: 10px;
  z-index: 1;
}
.blog-featured-img-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  backdrop-filter: blur(2px);
}

/* Body: padding 24px, title+excerpt group then meta */
.blog-featured-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.blog-featured-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-featured-title {
  font-size: 24px;
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
  color: #1c1917;
}
@media (max-width: 428px) {
  .blog-featured-title {
    font-size: 18px;
    line-height: 29px;
  }
}

.blog-featured-excerpt {
  font-size: 14px;
  color: #57534e;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0.02px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 768px) {
  .blog-featured-excerpt {
    -webkit-line-clamp: 2;
  }
}
@media (max-width: 428px) {
  .blog-featured-excerpt {
    -webkit-line-clamp: 3;
  }
}

/* Meta row inside featured body */
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #78716c;
  border-top: 0.75px solid #d6d3d1;
  padding-top: 21px;
  line-height: 17px;
  letter-spacing: 0.04px;
}

/* ── 3 recent posts (right col of hero box) ── */
.blog-hero-recents {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.bhr-item {
  display: grid;
  grid-template-columns: minmax(150px, 30%) 1fr;
  height: 172px;
  border: 1px solid #d6d3d1;
  border-left: none;
  transition: opacity 0.15s ease;
}
.bhr-item:last-child {
  border-top: none;
}

.bhr-item:nth-child(2) {
  border-top: none;
}

.bhr-item:hover {
  background: #fafaf9;
}

.bhr-thumb img {
  transition: transform 0.3s ease;
  will-change: transform;
}

.bhr-item:hover .bhr-thumb img {
  transform: scale(1.05);
}

.bhr-thumb {
  overflow: hidden;
  background: var(--grey-20);
  border-right: 1px solid #d6d3d1;
}
.bhr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bhr-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 22px;
}

.bhr-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bhr-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.04px;
  text-transform: uppercase;
  color: #a8a29e;
}

.bhr-title {
  max-width: 690px;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-main);
  color: #25282d;
  line-height: 22px;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
@media (max-width: 640px) {
  .bhr-title {
    font-size: 14px;
    line-height: 19px;
  }
}
@media (max-width: 428px) {
  .bhr-title {
    -webkit-line-clamp: 3;
  }
}
@media (min-width: 1280px) {
  .bhr-title {
    font-size: 18px;
    line-height: 25px;
  }
}

.bhr-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  color: #78716c;
  gap: 8px;
  line-height: 17px;
  letter-spacing: 0.04px;
}

.bhr-meta span:first-child {
  min-width: 0;
}

.bhr-meta-author,
.bhr-meta-date {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: #78716c;
  line-height: 17px;
  letter-spacing: 0.04px;
}
.bhr-meta-date::before {
  content: " · ";
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .bhr-meta-author {
    display: block;
  }
  .bhr-meta-date {
    display: block;
    white-space: nowrap;
  }
  .bhr-meta-date::before {
    content: none;
  }
}

/* ── Explore section ─────────────────────────────────────── */
.blog-explore {
  padding-top: 40px;
  padding-bottom: 24px;
  scroll-margin-top: var(--header-h);
  position: relative;
}
.blog-explore .page-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .blog-explore {
    padding-top: 60px;
    padding-bottom: 24px;
  }
}

.blog-explore-h2 {
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04px;
}
.blog-explore-h2 .explore-h2-dim {
  color: #78716c;
}
.blog-explore-h2 .explore-h2-dark {
  color: #44403c;
}
/* xs/sm/md (<1024px): break after "Drive"  → "Explore Insights That Drive" / "Better CX" */
.ebr-mxl {
  display: none;
}
.ebr-lg {
  display: none;
}
.ebr-xs {
  display: block;
}
/* lg/xl (1024–1469px): break after "That"  → "Explore Insights That" / "Drive Better CX" */
@media (min-width: 1024px) {
  .ebr-xs {
    display: none;
  }
  .ebr-lg {
    display: block;
  }
}
/* mxl/2xl (≥1470px): break after "Insights" → "Explore Insights" / "That Drive Better CX" */
@media (min-width: 1470px) {
  .ebr-lg {
    display: none;
  }
  .ebr-mxl {
    display: block;
  }
}
@media (min-width: 429px) and (max-width: 640px) {
  .blog-explore-h2 {
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  .blog-explore-h2 {
    font-size: 36px;
  }
}
@media (min-width: 1024px) {
  .blog-explore-h2 {
    font-size: 40px;
  }
}
@media (min-width: 1280px) {
  .blog-explore-h2 {
    font-size: 48px;
  }
}

/* pen + dashed-line inline group after "CX" in explore heading */
.explore-pen-wrap {
  display: inline-flex;
  align-items: flex-end;
  vertical-align: -0.3em;
  position: relative;
  top: 10px;
  /* negative margin = line-width: slides group left so line goes behind
     text (transparent there) and pen lands right at end of "CX" */
  margin-left: -4.9em;
}

.explore-pen-svg {
  display: block;
  flex-shrink: 0;
  width: clamp(42px, 1.12em, 68px);
  height: auto;
}

.explore-pen-line-svg {
  display: block;
  flex-shrink: 0;
  width: clamp(80px, 4.9em, 270px);
  height: 2px;
  overflow: visible;
  /* raise line slightly so it aligns with pen tip, not its very bottom */
  margin-bottom: 0.2em;
}

/* Filter tabs */
.blog-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 58px;
  margin-bottom: 72px;
}
@media (max-width: 428px) {
  .blog-tabs {
    margin-bottom: 48px;
  }
}
@media (min-width: 429px) and (max-width: 640px) {
  .blog-tabs {
    margin-top: 52px;
    margin-bottom: 52px;
  }
}

.blog-tab {
  display: inline-flex;
  align-items: center;
  height: 39px;
  padding: 10px 16px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  color: #25282d;
  background: transparent;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.blog-tab:hover {
  background: #f5f5f4;
}
.blog-tab.is-active {
  background: #25282d;
  color: #fff;
  border-color: #25282d;
}
.blog-tab.is-active:hover {
  background: var(--black-50);
}

/* Post grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: 100%;
}
@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d6d3d1;
  background: #fff;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.blog-card:hover {
  /* transform: translateY(-1px); */
  background: #fafaf9;
}

.bc-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--grey-20);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px 27px;
}
.bc-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.bc-image img {
  transition: transform 0.3s ease;
  will-change: transform;
}

.blog-card:hover .bc-image img {
  transform: scale(1.05);
}

.bc-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bc-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #e7e5e4;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  text-transform: uppercase;
}

.bc-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px;
  flex: 1;
}

.bc-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bc-title {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: #1c1917;
  line-height: 26px;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bc-excerpt {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.02px;
  color: #57534e;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .bc-excerpt {
    -webkit-line-clamp: 2;
  }
}

.bc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #d6d3d1;
  padding-top: 21px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: #78716c;
  flex-shrink: 0;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 100px;
}

.pg-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pg-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 14px;
  color: #57534e;
  pointer-events: none;
}
.pg-num,
.pg-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  color: #57534e;
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
}

.pg-num:hover,
.pg-arrow:hover {
  background: var(--grey-20);
}

.pg-num--active {
  background: #25282d;
  color: #fff;
  font-weight: 600;
}
.pg-num--active:hover {
  background: #25282d;
}

.pg-arrow--disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ── CTA section ─────────────────────────────────────────── */
.blog-cta {
  position: relative;
  overflow: hidden;
}
.footer-wrap-index .blog-cta {
  height: 392px;
}
@media (max-width: 460px) {
  .footer-wrap-index .blog-cta {
    height: auto;
    min-height: 430px;
  }
  .footer-wrap-index .blog-cta .page-inner {
    padding-bottom: 40px;
  }
  .footer-wrap-index .blog-cta .cta-spiral {
    top: -20px !important;
    transform: scaleY(0.9) !important;
  }
}
@media (max-width: 344px) {
  .footer-wrap-index .blog-cta .cta-spiral {
    transform: scaleY(4) !important;
  }
}
@media (min-width: 640px) {
  .footer-wrap-index .blog-cta {
    height: 592px;
  }
}
@media (min-width: 1024px) {
  .footer-wrap-index .blog-cta {
    height: 925px;
    top: 105px !important;
    transform: scale(1) !important;
  }
}

@media (min-width: 768px) {
  .footer-wrap-index .blog-cta {
    bottom: -10px !important;
    transform: scale(1.05);
  }
}

@media (min-width: 640px) {
  .footer-wrap-index .blog-cta {
    bottom: 8px;
  }
}

@media (min-width: 1470px) {
  .footer-wrap-index .blog-cta img {
    /* bottom: -10px !important; */
    /* right: 200px !important; */
  }
}

.cta-spiral {
  position: absolute;
  top: 0;
  left: -350px;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-position: left top;
  pointer-events: none;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .cta-spiral {
    left: -90px;
  }
}

.cta-spiral img {
  z-index: -1 !important;
}

@media (min-width: 1024px) {
  .cta-spiral {
    top: 0 !important;
  }
}

@media (max-width: 344px) {
  .footer-wrap-index .blog-cta {
    transform: scale(1.025) !important;
  }
}

/* mirrors bar CompetitorCTA: pt-14 px-5 pb-7 sm:py-12 sm:px-16 md:px-18 lg:pb-21.25 lg:py-70 xl:pt-60 xl:px-23.25 2xl:px-28.25 */
.blog-cta .page-inner {
  position: relative;
  z-index: 1;
  padding: 56px 20px 28px;
}
.footer-wrap-index .blog-cta .page-inner {
  padding-top: 24px;
  padding-bottom: 0;
}

/* @media (max-width: 398px) {
  .blog-cta .page-inner {
    position: absolute;
    z-index: 1;
    padding: 56px 20px 28px;
    background: red;
    top: 200px;
  }
} */

/* mobile: full-width text, button right-aligned */
/* mirrors bar: outer flex-col gap-19 (76px), inner flex-col gap-11.75 (47px) */
.blog-cta-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 76px; /* gap-19 */
  isolation: isolate;
}

@media (min-width: 640px) {
  .blog-cta-inner {
    /* background-color: red; */
    margin-top: 100px !important;
  }
}

.cta-inner-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 47px; /* gap-11.75 */
}
.footer-wrap-index .cta-inner-top {
  gap: 60px;
}

.cta-tagline {
  font-family: var(--font-ibm-plex-mono, "IBM Plex Mono", monospace);
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  max-width: 275px; /* max-w-68.75 */
}
.footer-wrap-index .cta-tagline {
  display: none;
}
.footer-wrap-post .cta-tagline {
  display: block;
}
.cta-tagline-dim {
  color: #a8a29e;
} /* text-stone-400 */
.cta-tagline-dark {
  color: #57534e;
}
@media (max-width: 768px) {
  .cta-tagline-dark {
    display: block;
  }
}

.blog-cta-h2 {
  width: 100%;
  text-align: left;
  z-index: 999 !important;
  /* bar: sm:max-w-97 md:max-w-156 lg:max-w-179.75 xl:max-w-202.75 2xl:max-w-221 */
  max-width: 388px;
}
.footer-wrap-index .blog-cta-h2 {
  max-width: 100%;
  text-align: right;
}
.footer-wrap-post .blog-cta-h2 {
  text-align: left;
  max-width: 388px;
}

@media (min-width: 640px) {
  .blog-cta .page-inner {
    padding: 48px 64px;
  }
  .footer-wrap-index .blog-cta .page-inner {
    padding-top: 80px;
    padding-bottom: 0;
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (min-width: 768px) {
  .blog-cta .page-inner {
    padding-left: 72px;
    padding-right: 72px;
  }
  .footer-wrap-index .blog-cta .page-inner {
    padding-left: 72px;
    padding-right: 46px;
  }
  .cta-tagline {
    font-size: 1rem;
  } /* md:text-base */
}
@media (min-width: 640px) {
  .blog-cta-h2 {
    max-width: 388px; /* sm: max-w-97 */
  }
}
@media (min-width: 768px) {
  .blog-cta-h2 {
    max-width: 624px; /* md: max-w-156 */
  }
  .cta-tagline {
    max-width: 301px; /* md: max-w-75.25 */
  }
}
/* 1024px+: fixed 635px block, pushed to right side */
@media (min-width: 1024px) {
  .blog-cta .page-inner {
    padding-top: 280px;
    padding-bottom: 85px;
    padding-left: 100px;
    padding-right: 100px;
    min-height: unset;
    display: flex;
    align-items: center;
  }
  .footer-wrap-index .blog-cta .page-inner {
    padding-top: 281px;
    padding-bottom: 0;
    padding-left: 100px;
    padding-right: 100px;
  }
  .blog-cta-inner {
    width: 635px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .footer-wrap-post .blog-cta-inner {
    margin-left: 0;
    width: 100%;
    max-width: 884px;
  }
  .footer-wrap-post .blog-cta-h2 {
    max-width: 100%;
  }
  .blog-cta-h2 {
    max-width: 100%;
  }
  .cta-tagline {
    font-size: 1.125rem; /* text-lg */
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .blog-cta .page-inner {
    padding-top: 240px;
    padding-left: 93px;
    padding-right: 93px;
  }
  .footer-wrap-index .blog-cta .page-inner {
    padding-top: 252px;
    padding-left: 120px;
    padding-right: 120px;
  }
}
@media (min-width: 1470px) {
  .footer-wrap-index .blog-cta .page-inner {
    padding-top: 246px;
    padding-left: 167px;
    padding-right: 167px;
  }
}
@media (min-width: 1536px) {
  .blog-cta .page-inner {
    padding-left: 113px;
    padding-right: 113px;
  }
  .footer-wrap-index .blog-cta .page-inner {
    padding-top: 246px;
    padding-left: 192px;
    padding-right: 192px;
  }
}

.blog-cta-h2 {
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: 300;
  line-height: 55px;
  letter-spacing: -0.04px;
}
.blog-cta-h2 .cta-h2-dark {
  color: #292524;
}
.blog-cta-h2 .cta-h2-dim {
  color: #78716c;
}
@media (max-width: 428px) {
  .blog-cta-h2 {
    line-height: 1.2;
  }
}
@media (max-width: 427px) {
  .cta-inner-top {
    gap: 40px !important;
  }
  .blog-cta-h2 {
    font-size: 24px;
  }
}
@media (min-width: 429px) and (max-width: 639px) {
  .footer-wrap-index .blog-cta-h2 {
    font-size: 32px;
    line-height: 1.125;
  }
}
@media (min-width: 640px) {
  .footer-wrap-index .blog-cta-h2 {
    font-size: 36px;
    line-height: 1.11;
  }
}
@media (min-width: 768px) {
  .blog-cta-h2 {
    font-size: 36px;
  }
  .footer-wrap-index .blog-cta-h2 {
    font-size: 36px;
    line-height: 43px;
  }
}
@media (min-width: 1024px) {
  .blog-cta-h2 {
    font-size: 48px;
  }
  .footer-wrap-index .blog-cta-h2 {
    font-size: 40px;
    line-height: 48px;
  }
}
@media (min-width: 1280px) {
  .blog-cta-h2 {
    font-size: 56px;
  }
  .footer-wrap-index .blog-cta-h2 {
    font-size: 44px;
    line-height: 51px;
  }
}
@media (min-width: 1536px) {
  .footer-wrap-index .blog-cta-h2 {
    font-size: 48px;
    line-height: 55px;
  }
}

.cta-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 161px;
  height: 70px;
  padding: 10px 8px;
}
/* Mobile/tablet (≤768px): large button with hatch — matches Figma */
.footer-wrap-index .cta-btn-wrap {
  align-self: flex-end;
  width: 161px;
  min-width: unset;
  height: 70px;
  padding: 10px 8px;
}
.cta-btn-hatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.blog-cta-btn {
  font-family: var(--font-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 6px 26px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #2b2e34;
  border: 1.5px solid #32353c;
  border-radius: 12px;
  transition: background 0.15s;
  white-space: nowrap;
  z-index: 999 !important;
}
.blog-cta-btn:hover {
  background: #32353c;
}

/* Desktop (≥1024px): small button, no hatch */
@media (min-width: 1024px) {
  .footer-wrap-index .cta-btn-wrap {
    width: auto;
    min-width: 118px;
    height: 45px;
    padding: 0;
  }
  .footer-wrap-index .cta-btn-hatch {
    display: none;
  }
  .footer-wrap-index .blog-cta-btn {
    min-width: 118px;
    width: auto;
    height: 45px;
    padding: 6px 18px;
  }
}

/* Post page CTA button — always large with hatch (overrides desktop shrink) */
.footer-wrap-post .cta-btn-wrap {
  align-self: flex-start;
  width: 161px !important;
  height: 70px !important;
  padding: 10px 8px !important;
}
.footer-wrap-post .cta-btn-hatch {
  display: block !important;
}
.footer-wrap-post .blog-cta-btn {
  width: auto !important;
  min-width: unset !important;
  height: 50px !important;
  padding: 6px 26px !important;
}

/* ── Post page CTA ── */
.post-cta {
  position: relative;
}
.post-cta .page-inner {
  padding-top: 60px;
  padding-bottom: 48px;
}
.post-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.post-cta-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.post-cta-h2 {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.04px;
}
.post-cta-h2-dim {
  color: #78716c;
}
.post-cta-h2-dark {
  color: #292524;
}
.post-cta-tagline {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 768px) {
  .post-cta-h2 {
    font-size: 36px;
  }
}
@media (min-width: 1024px) {
  .post-cta .page-inner {
    padding-top: 252px;
    padding-bottom: 85px;
    padding-left: 100px;
    padding-right: 100px;
  }
  .post-cta-inner {
    gap: 136px;
  }
  .post-cta-top {
    gap: 47px;
  }
  .post-cta-h2 {
    font-size: 48px;
    line-height: 1.1;
  }
  .post-cta-tagline {
    font-size: 1.125rem;
  }
}
@media (min-width: 1280px) {
  .post-cta .page-inner {
    padding-left: 120px;
    padding-right: 120px;
  }
  .post-cta-h2 {
    font-size: 56px;
  }
  .post-cta-inner {
    max-width: 884px;
  }
}
@media (min-width: 1470px) {
  .post-cta .page-inner {
    padding-left: 192px;
    padding-right: 192px;
  }
  .post-cta-h2 {
    font-size: 64px;
    line-height: 70px;
  }
}
@media (min-width: 1536px) {
  .post-cta .page-inner {
    padding-left: 192px;
    padding-right: 192px;
  }
}

/* ============================================================
   POST / INDIVIDUAL BLOG PAGE
   ============================================================ */

/* ── Top padding: site-content adds 64px (header-h), add extra below ── */
.post-header-section {
  padding-top: 40px;
  padding-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .post-header-section {
    padding-top: 96px;
    padding-bottom: 78px;
  }
}
@media (min-width: 1280px) {
  .post-header-section {
    padding-top: 96px;
  }
}

/* ── Breadcrumb ── */
.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
}
.post-breadcrumb-link {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0.02px;
  color: #a8a29e;
  white-space: nowrap;
  text-transform: uppercase;
}
.post-breadcrumb-sep {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #a8a29e;
}

/* ── Title + meta ── */
.post-header {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.post-title {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 44px;
  line-height: 55px;
  letter-spacing: -0.04px;
  color: #44403c;
  max-width: 762px;
}
@media (max-width: 767px) {
  .post-title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.02px;
  }
}
@media (min-width: 429px) and (max-width: 640px) {
  .post-title {
    font-size: 32px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post-title {
    font-size: 36px;
    line-height: 44px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .post-title {
    font-size: 40px;
    line-height: 50px;
  }
}
.post-meta-bar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.post-meta-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.04px;
  color: #a8a29e;
}
.post-meta-divider {
  height: 1px;
  background: #d6d3d1;
  width: 100%;
  margin-bottom: 20px;
}

/* ── Feature image ── */
.post-feature-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: var(--grey-20);
}
.post-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .post-feature-image {
    height: 220px;
  }
}

/* ── 3-col body layout ── */
.post-body {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .post-body {
    gap: 32px;
  }
}
@media (min-width: 1280px) {
  .post-body {
    gap: 64px;
  }
}

/* ── Left sidebar: TOC + Related ── */
.post-sidebar-left {
  display: none;
  width: 188px;
  flex-shrink: 0;
  flex-direction: column;
  gap: 60px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  scrollbar-width: none;
}
.post-sidebar-left::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1024px) {
  .post-sidebar-left {
    display: flex;
  }
}
@media (min-width: 1280px) {
  .post-sidebar-left {
    width: 220px;
  }
}

/* Table of contents */
.post-toc {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 188px;
}
@media (min-width: 1280px) {
  .post-toc {
    width: 220px;
  }
}
.toc-divider {
  height: 1px;
  background: #d6d3d1;
  width: 100%;
  margin-block: 3px;
}
.toc-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.toc-item:hover .toc-text {
  color: #44403c;
  font-weight: 500;
  transition: 2s ease-in;
}
.toc-num {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: normal;
  letter-spacing: 0.8px;
  color: #78716c;
  flex-shrink: 0;
  width: 13px;
  padding-top: 2px;
}
.toc-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0.04px;
  color: #78716c;
  text-transform: uppercase;
}
.toc-item.is-active .toc-num,
.toc-item.is-active .toc-text {
  color: #44403c;
  font-weight: 500;
}

/* Related blogs */
.post-related {
  display: flex;
  flex-direction: column;
  width: 188px;
  position: relative;
}
.post-related::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    #d6d3d1 0px,
    #d6d3d1 5px,
    transparent 5px,
    transparent 10px
  );
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
}
.post-related::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #d6d3d1 0px,
    #d6d3d1 5px,
    transparent 5px,
    transparent 10px
  );
  -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
  mask-image: linear-gradient(to right, black 20%, transparent 100%);
}
@media (min-width: 1280px) {
  .post-related {
    width: 220px;
  }
}
.post-related-header {
  padding: 10px 8px;
  position: relative;
}
.post-related-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #d6d3d1 0px,
    #d6d3d1 5px,
    transparent 5px,
    transparent 10px
  );
  -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
  mask-image: linear-gradient(to right, black 20%, transparent 100%);
}
.post-related-label {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0.02px;
  color: #57534e;
}
.post-related-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 8px;
  border-bottom: 1px solid #d6d3d1;
  transition: background 0.15s;
}
.post-related-item:last-child {
  border-bottom: none;
}

.post-related-item:hover {
  background: #fafaf9;
  box-shadow: inset 3px 0 0 #a8a29e;
}
.post-related-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.04px;
  text-transform: uppercase;
  color: #a8a29e;
}
.post-related-title {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0.02px;
  color: #25282d;
}

/* ── Center content column ── */
.post-content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* ── Post content typography ── */
.post-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* h2: section header — mono uppercase + divider */
.post-content h2 {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
  color: #57534e;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d6d3d1;
  margin-top: 20px;
  margin-bottom: -14px;
}
.post-content h2::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("../images/star.webp") center / contain no-repeat;
  flex-shrink: 0;
  margin-top: 4px;
}

.post-content h2 strong,
.post-content h2 b {
  font-weight: 400;
}

@media (max-width: 428px) {
  .post-content h2 {
    font-size: 12px;
  }
}

/* h3: subheader — Manrope regular 24px */
.post-content h3 {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  color: #1f2126;
  margin: 0;
}
@media (max-width: 767px) {
  .post-content h3 {
    font-size: 18px;
    line-height: 29px;
  }
}

/* h4: bold body heading — Manrope medium 18px */
.post-content h4 {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  color: #25282d;
  margin: 0;
}
@media (max-width: 767px) {
  .post-content h4 {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Body text */
.post-content p {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
  color: #25282d;
  margin: 0;
}
@media (min-width: 768px) {
  .post-content p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.02px;
  }
}

/* Unordered lists */
.post-content ul {
  padding-left: 24px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.post-content ul li {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #25282d;
}
.post-content ul li::marker {
  font-size: 10px;
}
@media (max-width: 767px) {
  .post-content ul {
    padding-left: 21px;
  }
}
@media (min-width: 768px) {
  .post-content ul li {
    font-size: 16px;
    line-height: 26px;
  }
}

/* Ordered lists — FAQ style with mono numbers */
.post-content ol {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  counter-reset: post-ol;
}
.post-content ol li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  counter-increment: post-ol;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #25282d;
}
.post-content ol li::before {
  content: counter(post-ol) ".";
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: #57534e;
  flex-shrink: 0;
  min-width: 20px;
}
.post-content ol li + li {
  padding-top: 0px;
  align-items: center;
  /* border-top: 1px solid #d6d3d1; */
}
.post-content ol li,
.post-content ol li + li {
  display: block;
}
.post-content ol li::before {
  display: inline;
  margin-right: 6px;
}
.post-content ol li strong {
  display: inline;
}
.post-content ol li .ol-li-body {
  display: block;
  margin-top: 4px;
}
@media (min-width: 768px) {
  .post-content ol li {
    font-size: 16px;
    line-height: 26px;
  }
  .post-content ol li::before {
    font-size: 14px;
    line-height: 24px;
  }
}

/* Links */
.post-content a {
  color: #25282d;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-content a:hover {
  opacity: 0.75;
}

/* HR */
.post-content hr {
  border: none;
  border-top: 1px solid #d6d3d1;
  margin: 0;
}

/* Tables */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.6;
  margin: 24px 0;
  display: block;
  overflow-x: auto;
}
.post-content table th,
.post-content table td {
  padding: 10px 16px;
  text-align: left;
  border: 1px solid #d6d3d1;
  vertical-align: top;
}
.post-content table th {
  font-weight: 600;
  background: #f9f9f9;
  color: #25282d;
}
.post-content table tr:nth-child(even) td {
  background: #fafaf9;
}

/* Blockquote */
.post-content blockquote {
  border-left: 3px solid #d6d3d1;
  padding-left: 20px;
  color: #57534e;
  font-style: italic;
}

/* Images within content */
.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ghost button card */
.post-content .kg-btn,
.post-content .kg-btn-accent {
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 6px 26px;
  color: #fff !important;
  background: #2b2e34 !important;
  border: 1.5px solid #32353c !important;
  border-radius: 12px !important;
  transition: background 0.15s;
  text-decoration: none;
}
.post-content .kg-btn:hover,
.post-content .kg-btn-accent:hover {
  background: #32353c !important;
}

/* Koenig card widths */
.post-content .kg-width-wide {
  margin-left: -40px;
  margin-right: -40px;
}
.post-content .kg-width-full {
  margin-left: calc(-1 * (50vw - 50%));
  margin-right: calc(-1 * (50vw - 50%));
}
.post-content .kg-image-card img {
  width: 100%;
}

/* ── Post tags footer ── */
.post-tags-footer {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.post-tags-divider {
  height: 1px;
  background: #d6d3d1;
}
.post-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.post-tag-pill {
  display: inline-flex;
  align-items: center;
  height: 39px;
  padding: 10px 16px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  color: #25282d;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  transition: background 0.15s;
  white-space: nowrap;
}
.post-tag-pill:hover {
  background: #f5f5f4;
}

/* ── Right sidebar: newsletter ── */
.post-sidebar-right {
  display: none;
  width: 188px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
@media (min-width: 1024px) {
  .post-sidebar-right {
    display: block;
  }
}
@media (min-width: 1280px) {
  .post-sidebar-right {
    width: 224px;
  }
}
.post-newsletter-widget {
  position: relative;
  background: #f5f5f4;
  border: 1px solid #d6d3d1;
  overflow: visible;
}

/* Corner tick marks */
.nw-tick {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 2;
}
.nw-tick--tl {
  top: -1px;
  left: -1px;
  border-top: 1.5px solid #a8a29e;
  border-left: 1.5px solid #a8a29e;
}
.nw-tick--tr {
  top: -1px;
  right: -1px;
  border-top: 1.5px solid #a8a29e;
  border-right: 1.5px solid #a8a29e;
}
.nw-tick--bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1.5px solid #a8a29e;
  border-left: 1.5px solid #a8a29e;
}
.nw-tick--br {
  bottom: -1px;
  right: -1px;
  border-bottom: 1.5px solid #a8a29e;
  border-right: 1.5px solid #a8a29e;
}
.post-newsletter-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px;
}
.post-newsletter-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-newsletter-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.04px;
  color: #a8a29e;
}
.post-newsletter-heading {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  color: #44403c;
}
.post-newsletter-sub {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0.02px;
  color: #57534e;
}
.post-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-newsletter-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 12px;
  color: #25282d;
  outline: none;
  transition: border-color 0.15s;
}
.post-newsletter-input::placeholder {
  color: #a8a29e;
  letter-spacing: 0.04px;
}
.post-newsletter-input:focus {
  border-color: #a8a29e;
}
.post-newsletter-btn {
  width: 100%;
  height: 40px;
  background: #1f2126;
  color: #fff;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.post-newsletter-btn:hover {
  background: var(--black-50);
}

/* Override legacy gh-article on post page */
.post-page .gh-article {
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
}