/* Add spacing below 'Follow us' label in support-social */
.support-social-label {
  margin-bottom: 16px;
  display: block;
}
/* =========================
   SINGLE POST — Apple-ish rail + readable article + packages grid
   ========================= */

/* Hero alignment polish */
.page-blog-post .header-transition{
  background: #06090f;
}

body.page-blog-post main.page{
  padding-top: 0;
  background: #06090f;
}

body.page-blog.page-blog-post .blog-stage{
  background: #06090f !important;
}

.page-blog-post .blog-hero-block{
  background: #06090f;
  padding-top: 28px;
}

.page-blog-post .blog-hero{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Background glow continuity ===== */
body.page-blog.page-blog-post .blog-stage::before{
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* ===== Post utility rail (left wide / right thin) ===== */
.page-blog-post .post-rail{
  margin-top: 18px;
}

.page-blog-post .post-rail-inner{
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 14px;
  align-items: start;
}

.page-blog-post .post-rail-left,
.page-blog-post .post-rail-right{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
  padding: 12px;
}

/* Left rail: actions left, mode pinned right */
.page-blog-post .post-rail-left{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.page-blog-post .post-rail-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-blog-post .post-rail-mode{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 220px;
}

/* Back link (always readable) */
.page-blog-post .post-rail-link{
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.page-blog-post .post-rail-link:hover{
  color: rgba(255,255,255,0.94);
  background: rgba(255,255,255,0.09);
}

/* Make primary button fit rail */
.page-blog-post .post-rail-left .btn{
  height: 36px;
  padding: 0 14px;
}

/* Listen button: Apple-clean pill */
.page-blog-post .post-listen{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  cursor: pointer;
}

.page-blog-post .post-listen::before{
  content: "▶";
  font-size: 11px;
  opacity: 0.75;
}

.page-blog-post .post-listen[aria-pressed="true"]::before{
  content: "⏸";
}

.page-blog-post .post-listen:hover{
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.94);
}

/* Reading switch */
.page-blog-post .reading-switch{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-blog-post .reading-switch-label{
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}

.page-blog-post .reading-switch-toggle{
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.10);
  position: relative;
  cursor: pointer;
  padding: 0;
}

.page-blog-post .reading-switch-knob{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15,23,42,0.18);
  transition: transform 0.18s ease;
}

.page-blog-post .reading-switch.is-light .reading-switch-knob{
  transform: translateX(20px);
}

/* Right rail: author + share */
.page-blog-post .post-author{
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}

.page-blog-post .post-author-avatar img{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
}

.page-blog-post .post-author-name{
  margin: 0;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
}

.page-blog-post .post-author-role{
  margin: 2px 0 0;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.35;
}

/* Share */
.page-blog-post .post-share{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-blog-post .post-share-label{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.page-blog-post .post-share-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-blog-post .post-share-btn{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
}

.page-blog-post .post-share-btn:hover{
  color: rgba(255,255,255,0.94);
  background: rgba(255,255,255,0.09);
}

/* ===== Article layout ===== */
.page-blog-post .blog-post{
  margin-top: 14px;
}

.page-blog-post .blog-post-inner{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.78;
}

.page-blog-post .blog-post-inner p,
.page-blog-post .blog-post-inner ul,
.page-blog-post .blog-post-inner ol{
  margin: 0 0 1.05em;
}

.page-blog-post .blog-post-inner li{
  margin: 0 0 0.4em;
}

.page-blog-post .blog-post-inner strong{
  font-weight: 600;
}

.page-blog-post .blog-post-inner h1{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
}

.page-blog-post .blog-post-inner h2{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 2.1em 0 0.55em;
}

.page-blog-post .blog-post-inner h3{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 1.65em 0 0.5em;
}

.page-blog-post .blog-post-inner h4,
.page-blog-post .blog-post-inner h5,
.page-blog-post .blog-post-inner h6{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 1.35em 0 0.45em;
}

.page-blog-post .blog-post-inner > :first-child{
  margin-top: 0;
}

.page-blog-post .blog-post-cover{
  margin-top: 22px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,0.55);
  box-shadow: var(--shadow-soft);
}

.page-blog-post .blog-post-cover-img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Typography override: stop blue-on-blue ===== */

/* DARK (default) */
.page-blog-post .blog-post:not(.is-light) .blog-post-inner{
  color: rgba(255,255,255,0.82);
}

.page-blog-post .blog-post:not(.is-light) .blog-post-inner h1,
.page-blog-post .blog-post:not(.is-light) .blog-post-inner h2,
.page-blog-post .blog-post:not(.is-light) .blog-post-inner h3,
.page-blog-post .blog-post:not(.is-light) .blog-post-inner h4,
.page-blog-post .blog-post:not(.is-light) .blog-post-inner h5,
.page-blog-post .blog-post:not(.is-light) .blog-post-inner h6{
  color: rgba(255,255,255,0.95);
}

.page-blog-post .blog-post:not(.is-light) .blog-post-inner a{
  color: rgba(255,255,255,0.92) !important;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.28);
  text-underline-offset: 4px;
}

.page-blog-post .blog-post:not(.is-light) .blog-post-inner blockquote{
  margin: 22px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.84);
  line-height: 1.65;
}

/* LIGHT (only article card turns light) */
.page-blog-post .blog-post.is-light{
  background: #ffffff;
  color: #0f172a;
  padding: 48px;
  border-radius: 18px;
}

.page-blog-post .blog-post.is-light .blog-post-inner{
  color: #0f172a;
}

.page-blog-post .blog-post.is-light .blog-post-inner h1,
.page-blog-post .blog-post.is-light .blog-post-inner h2,
.page-blog-post .blog-post.is-light .blog-post-inner h3,
.page-blog-post .blog-post.is-light .blog-post-inner h4,
.page-blog-post .blog-post.is-light .blog-post-inner h5,
.page-blog-post .blog-post.is-light .blog-post-inner h6{
  color: #020617;
}

.page-blog-post .blog-post.is-light .blog-post-inner a{
  color: #2563eb !important;
  text-decoration-color: rgba(37,99,235,0.35);
}

.page-blog-post .blog-post.is-light .blog-post-inner{
  font-size: 17px;
  line-height: 1.75;
}

/* ===== Prev/Next ===== */
.page-blog-post .blog-post-nav{
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.page-blog-post .blog-post-nav-link{
  display: block;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  text-decoration: none;
}

.page-blog-post .blog-post-nav-kicker{
  display:block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}

.page-blog-post .blog-post-nav-title{
  display:block;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

/* ===== Packages CTA grid (desktop 3 columns) ===== */
.page-blog-post .packages-cta{
  margin-top: 18px;
}

.page-blog-post .packages-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.page-blog-post .package-card{
  border-radius: 22px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.14); /* matched blog-card border */
  background: rgba(255,255,255,0.02); /* matched blog-card surface */
  box-shadow: none; /* matched blog-card surface */
  padding: 18px;
  min-height: 100%;
  overflow: hidden; /* added blog-card hairlines */
}
.page-blog-post .package-card::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width: 68px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.68); /* added blog-card hairlines */
  pointer-events:none;
  border-radius: inherit;
  z-index: 0;
}
.page-blog-post .package-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,0.62), rgba(255,255,255,0.62)) 0 50%/1px 36px no-repeat,
    linear-gradient(rgba(255,255,255,0.62), rgba(255,255,255,0.62)) 100% 50%/1px 36px no-repeat;
  border-radius: inherit;
  z-index: 0;
}
.page-blog-post .package-card > *{
  position: relative;
  z-index: 1; /* keep content above hairlines */
}

.page-blog-post .package-card h3{
  margin: 0 0 8px;
  color: rgba(255,255,255,0.95);
}

.page-blog-post .package-desc{
  margin: 0 0 12px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.5;
}

.page-blog-post .package-features{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 8px;
}

.page-blog-post .package-features li{
  color: rgba(255,255,255,0.82);
  font-size: 13px;
}

/* Featured */
.page-blog-post .package-card--featured{
  border-color: rgba(255,255,255,0.14); /* matched blog-card border */
  background: rgba(255,255,255,0.02); /* matched blog-card surface */
}

.page-blog-post .package-badge{
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 10px;
}

/* WhatsApp button: force readable text */
.page-blog-post .package-card--support .btn--secondary{
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
}

.page-blog-post .package-card--support .btn--secondary:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,0.12);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .page-blog-post .post-rail-inner{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px){
  .page-blog-post .post-rail-left{
    flex-direction: column;
    align-items: stretch;
  }
  .page-blog-post .post-rail-mode{
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 980px){
  .page-blog-post .packages-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px){
  .page-blog-post .blog-post-nav{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .page-blog-post .blog-post.is-light{
    padding: 22px;
  }
}

/* =========================================
   PACKAGE CARD — "Not sure yet?" spacing fix
   ========================================= */

/* Vertical rhythm for support card */
.page-blog-post .package-card--support{
  display: flex;
  flex-direction: column;
  gap: 16px; /* main vertical spacing */
  justify-content: space-between;
}

/* Headline */
.page-blog-post .package-card--support h3{
  margin: 0;
}

/* Description text */
.page-blog-post .package-card--support .package-desc{
  margin: 0;
  max-width: 36ch;
}

/* CTA stack */
.page-blog-post .package-card--support .support-cta-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.page-blog-post .package-card--support .btn{
  align-self: flex-start;
  margin-top: 0;
}

.page-blog-post .package-card--support .btn--primary{
  box-shadow: 0 18px 40px rgba(4, 10, 28, 0.22);
}

.page-blog-post .package-card--support .support-note{
  margin-top: -2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.45;
  max-width: 40ch;
}

/* Follow section */
.page-blog-post .package-card--support .support-social{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.page-blog-post .package-card--support .support-social-label{
  margin: 0;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Social icons row */
.page-blog-post .package-card--support .follow-actions,
.page-blog-post .package-card--support .socials,
.page-blog-post .package-card--support .social-icons{
  display: flex;
  gap: 10px;
}

.page-blog-post .package-card--support .footer-social{
  display: flex;
  gap: 10px;
}

.page-blog-post .package-card--support .footer-social-item{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.86);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.page-blog-post .package-card--support .footer-social-item:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}