/* ============================================================
   NextWeb OS — Blog design system
   Loaded last, after main.css / responsive-fixes.css.
   Scoped to blog-only class prefixes (bh-, bsec-, feat-, guide-,
   cat-, post-, topic-, art-) so nothing collides with the
   site-wide !important rules in responsive-fixes.css.
   Palette: navy #1b2955 · pink #e81f76 · lime #cddd00
   ============================================================ */

:root{
  --nw-navy:#1b2955;
  --nw-navy-2:#24356b;
  --nw-pink:#e81f76;
  --nw-pink-dk:#c0105a;
  --nw-lime:#cddd00;
  --nw-ink:#1b2955;
  --nw-body:#5a6275;
  --nw-line:#e3e7f0;
  --nw-soft:#f4f6fb;
}

/* ─────────────────────────── HERO ─────────────────────────── */

/* Split banner: copy on the left, handwritten note + dotted network map +
   vertical keyword rail on the right. */
.blog-hero{
  background:#16233f;
  padding:6.5rem 4rem 6rem;
  position:relative;
  overflow:hidden;
}
.blog-hero::before{
  content:'';position:absolute;top:-30%;right:-5%;width:58%;height:170%;
  background:radial-gradient(ellipse,rgba(60,96,190,.38) 0%,transparent 66%);
  pointer-events:none;
}
.blog-hero::after{
  content:'';position:absolute;bottom:-60%;left:-10%;width:55%;height:150%;
  background:radial-gradient(ellipse,rgba(232,31,118,.10) 0%,transparent 68%);
  pointer-events:none;
}
.bh-inner{
  max-width:1200px;margin:0 auto;position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center;
}
.bh-eyebrow{
  display:inline-block;font-size:1.2rem;font-weight:700;color:var(--nw-lime);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.8rem;
}
.bh-title{
  font-size:clamp(3.4rem,5vw,5.6rem);font-weight:800;color:#fff;
  line-height:1.08;letter-spacing:-.02em;margin:0 0 1.8rem;
}
.bh-title .pk{color:var(--nw-pink);}
.bh-sub{
  font-size:1.7rem;color:rgba(255,255,255,.72);line-height:1.6;
  max-width:54rem;margin:0 0 3.4rem;
}
.bh-trust{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;margin:0;padding:0;}
.bh-trust li{display:flex;align-items:center;gap:1rem;}
.bh-trust .ti{
  width:3.4rem;height:3.4rem;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.bh-trust .ti svg{
  width:1.6rem;height:1.6rem;fill:none;stroke:var(--nw-lime);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.bh-trust span{font-size:1.4rem;font-weight:500;color:rgba(255,255,255,.88);}

/* right-hand art: handwriting + map + vertical rail */
.bh-art{
  position:relative;display:flex;align-items:center;justify-content:flex-end;gap:2.5rem;
}
.bh-script{
  position:absolute;left:0;top:0;max-width:19rem;z-index:2;
  font-family:'Caveat',cursive;font-size:2.2rem;line-height:1.2;
  color:rgba(255,255,255,.92);transform:rotate(-4deg);pointer-events:none;
}
.bh-map{width:min(34rem,100%);height:auto;display:block;}
.bh-vert{display:flex;flex-direction:column;gap:.9rem;flex-shrink:0;align-items:flex-start;}
.bh-vert span{
  font-size:1.15rem;font-weight:600;color:rgba(255,255,255,.75);
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
}
.bh-vert i{display:block;width:3.5rem;height:3px;background:var(--nw-lime);border-radius:2px;margin-top:.6rem;}

/* ── Search (lives in the Latest articles header, not the banner) ── */
.blog-search{
  display:flex;align-items:center;gap:1rem;background:#fff;
  border:1px solid var(--nw-line);border-radius:5rem;
  padding:.4rem .5rem .4rem 1.8rem;width:38rem;max-width:100%;
}
.blog-search:focus-within{border-color:var(--nw-pink);}
.blog-search svg{
  width:1.8rem;height:1.8rem;flex-shrink:0;fill:none;stroke:#8a93a8;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.blog-search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:'Poppins',sans-serif;font-size:1.4rem;color:var(--nw-ink);padding:.9rem 0;
}
.blog-search input::placeholder{color:#98a0b3;}
.blog-search button{
  flex-shrink:0;border:0;cursor:pointer;background:var(--nw-pink);color:#fff;
  font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:700;
  padding:.9rem 2.2rem;border-radius:5rem;transition:background .2s;
}
.blog-search button:hover{background:var(--nw-pink-dk);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ───────────────────── SECTION SCAFFOLD ───────────────────── */

.bsec{padding:6.5rem 4rem;}
.bsec.alt{background:var(--nw-soft);}
.bsec-inner{max-width:1200px;margin:0 auto;}
.bsec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem;flex-wrap:wrap;}
.bsec-head h2{
  font-size:clamp(2.6rem,3.4vw,3.8rem);font-weight:800;color:var(--nw-ink);
  line-height:1.15;letter-spacing:-.015em;margin:0;
}
.bsec-head h2 .pk{color:var(--nw-pink);}
.bsec-head p{font-size:1.55rem;color:var(--nw-body);margin:1.2rem 0 0;max-width:70rem;line-height:1.65;}
.bsec-more{
  font-size:1.45rem;font-weight:700;color:var(--nw-pink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.6rem;transition:gap .2s;
}
.bsec-more:hover{gap:1.1rem;color:var(--nw-pink-dk);}

/* ────────────────────── FEATURED GUIDE ────────────────────── */

.feat-card{
  display:grid;grid-template-columns:38rem 1fr 22rem;gap:2.8rem;align-items:center;
  background:#fff;border:1px solid var(--nw-line);border-radius:2rem;padding:2rem;
  box-shadow:0 18px 50px rgba(27,41,85,.06);
}
.feat-img{
  width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:1.4rem;display:block;background:var(--nw-soft);
}
.feat-body{min-width:0;}
.feat-badge{
  display:inline-block;background:var(--nw-pink);color:#fff;border-radius:5rem;
  padding:.5rem 1.6rem;font-size:1.1rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1.6rem;
}
.feat-body h3{font-size:clamp(2.1rem,2.4vw,2.7rem);font-weight:800;color:var(--nw-ink);line-height:1.25;margin:0 0 1.4rem;}
.feat-body h3 a{color:inherit;}
.feat-body h3 a:hover{color:var(--nw-pink);}
.feat-body > p{font-size:1.5rem;color:var(--nw-body);line-height:1.7;margin:0 0 2rem;}
.feat-chips{display:flex;flex-wrap:wrap;gap:2.2rem;margin-bottom:2.4rem;}
.feat-chips li{display:flex;align-items:center;gap:.8rem;font-size:1.3rem;font-weight:600;color:var(--nw-ink);}
.feat-chips svg{width:1.7rem;height:1.7rem;fill:none;stroke:var(--nw-pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.feat-btn{
  display:inline-flex;align-items:center;gap:.8rem;background:var(--nw-pink);color:#fff;
  padding:1.4rem 3rem;border-radius:1rem;font-size:1.5rem;font-weight:700;
  transition:background .2s,transform .2s;
}
.feat-btn:hover{background:var(--nw-pink-dk);transform:translateY(-2px);color:#fff;}
.feat-side{background:var(--nw-soft);border-radius:1.4rem;padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1.8rem;}
.feat-benefit{display:flex;align-items:center;gap:1.2rem;}
.feat-benefit .bi{
  width:3.6rem;height:3.6rem;border-radius:1rem;background:#fff;border:1px solid var(--nw-line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.feat-benefit .bi svg{width:1.8rem;height:1.8rem;fill:none;stroke:var(--nw-navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.feat-benefit strong{display:block;font-size:1.4rem;font-weight:700;color:var(--nw-ink);line-height:1.25;}
.feat-benefit em{display:block;font-size:1.2rem;font-style:normal;color:var(--nw-body);line-height:1.3;margin-top:.2rem;}

/* ─────────────────────── GUIDE CARDS ──────────────────────── */

.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.guide-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--nw-line);
  border-radius:1.4rem;padding:1.6rem;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.guide-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(27,41,85,.1);border-color:var(--nw-pink);}
.guide-top{display:flex;gap:1.4rem;align-items:flex-start;}
.guide-thumb{
  width:8.4rem;height:6.4rem;object-fit:cover;border-radius:.9rem;flex-shrink:0;display:block;background:var(--nw-soft);
}
.guide-tag{
  display:inline-block;background:rgba(27,41,85,.07);color:var(--nw-navy);border-radius:.5rem;
  padding:.35rem 1rem;font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem;
}
.guide-card h3{font-size:1.5rem;font-weight:700;color:var(--nw-ink);line-height:1.3;margin:0;}
.guide-card p{font-size:1.3rem;color:var(--nw-body);line-height:1.55;margin:1.2rem 0 0;}
.guide-arrow{
  width:3.2rem;height:3.2rem;border-radius:50%;background:var(--nw-soft);
  display:flex;align-items:center;justify-content:center;margin:1.6rem 0 0 auto;transition:background .2s;
}
.guide-arrow svg{width:1.5rem;height:1.5rem;fill:none;stroke:var(--nw-pink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.guide-card:hover .guide-arrow{background:var(--nw-pink);}
.guide-card:hover .guide-arrow svg{stroke:#fff;}

/* ───────────────────── CATEGORY TILES ─────────────────────── */

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;}
.cat-card{
  background:#fff;border:1px solid var(--nw-line);border-radius:1.6rem;padding:2.6rem;
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cat-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(27,41,85,.1);border-color:var(--nw-pink);}
.cat-ico{width:4.8rem;height:4.8rem;border-radius:1.2rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.8rem;}
.cat-ico svg{width:2.4rem;height:2.4rem;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cat-card h3{font-size:1.9rem;font-weight:700;color:var(--nw-ink);margin:0 0 .9rem;line-height:1.3;}
.cat-card p{font-size:1.4rem;color:var(--nw-body);line-height:1.65;margin:0 0 2rem;flex:1;}
.cat-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.cat-count{font-size:1.25rem;font-weight:600;color:#8a93a8;}
.cat-go{font-size:1.4rem;font-weight:700;color:var(--nw-pink);display:inline-flex;align-items:center;gap:.5rem;transition:gap .2s;}
.cat-card:hover .cat-go{gap:1rem;}

/* ───────────────── LATEST ARTICLES + FILTER ───────────────── */

/* ── Related / keep-reading cards ──
   Horizontal: image left, pink category label + title + date, circular arrow
   on the right. Used by the article foot and the older posts' keep-reading
   rows; the hub has its own pcard/scard set. */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.post-card{
  display:flex;align-items:stretch;min-height:12rem;
  background:#fff;border:1px solid #f6d9e6;border-radius:1.6rem;overflow:hidden;
  box-shadow:0 4px 16px rgba(27,41,85,.05);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.post-card:hover{
  border-color:var(--nw-pink);transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(27,41,85,.12);
}
/* a share of the card, not a fixed width, so the image keeps its
   proportion as the grid changes columns */
.post-media{width:30%;min-width:9.5rem;max-width:13rem;flex-shrink:0;position:relative;display:block;align-self:stretch;}
.post-media img,.post-card > img{
  width:100%;height:100%;object-fit:cover;display:block;background:var(--nw-soft);
}
/* the old badge-on-image treatment is not used in this card */
.post-cat{
  display:block;font-size:1rem;font-weight:700;color:var(--nw-pink);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.7rem;
  position:static;background:none;padding:0;border-radius:0;
}
.post-body{
  flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:1.5rem .6rem 1.5rem 1.6rem;
}
.post-card h3{
  font-size:1.45rem;font-weight:700;color:var(--nw-ink);
  line-height:1.32;margin:0 0 .7rem;transition:color .2s;
}
.post-card:hover h3{color:var(--nw-pink);}
.post-card p{display:none;}
.post-date{display:block;font-size:1.2rem;font-weight:500;color:#8a93a8;margin:0;}
/* arrow sits in the bottom-right corner, level with the foot of the image */
.post-read{
  align-self:flex-end;flex-shrink:0;margin:0 1.4rem 1.4rem 0;
  width:3.6rem;height:3.6rem;border-radius:50%;background:#fff0f5;
  display:flex;align-items:center;justify-content:center;gap:0;
  font-size:0;color:transparent;transition:background .2s;
}
.post-card:hover .post-read{background:var(--nw-pink);gap:0;}
.post-read svg{
  width:1.6rem;height:1.6rem;flex-shrink:0;fill:none;stroke:var(--nw-pink);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;
}
.post-card:hover .post-read svg{stroke:#fff;}
.post-empty{
  grid-column:1/-1;text-align:center;padding:5rem 2rem;color:var(--nw-body);
  font-size:1.5rem;background:var(--nw-soft);border-radius:1.4rem;
}

/* ─────────────────────── NEWSLETTER BLOCK ─────────────────── */

.nw-news{
  max-width:1200px;margin:0 auto;background:var(--nw-soft);border:1px solid var(--nw-line);
  border-radius:1.6rem;padding:3rem 3.5rem;display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;
}
.nw-news .ni{
  width:5.4rem;height:5.4rem;border-radius:1.3rem;background:#fff;border:1px solid var(--nw-line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nw-news .ni svg{width:2.6rem;height:2.6rem;fill:none;stroke:var(--nw-pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.nw-news .nt{flex:1;min-width:26rem;}
.nw-news h2{font-size:2.2rem;font-weight:800;color:var(--nw-ink);margin:0 0 .6rem;}
.nw-news p{font-size:1.45rem;color:var(--nw-body);line-height:1.6;margin:0;}
.nw-news form{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}
.nw-news input{
  border:1px solid var(--nw-line);border-radius:1rem;background:#fff;
  font-family:'Poppins',sans-serif;font-size:1.45rem;color:var(--nw-ink);
  padding:1.3rem 1.8rem;min-width:26rem;outline:0;transition:border-color .2s;
}
.nw-news input:focus{border-color:var(--nw-pink);}
.nw-news button{
  border:0;cursor:pointer;background:var(--nw-pink);color:#fff;white-space:nowrap;
  font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;
  padding:1.4rem 3rem;border-radius:1rem;transition:background .2s,transform .2s;
}
.nw-news button:hover{background:var(--nw-pink-dk);transform:translateY(-2px);}
.nw-news .nn{flex-basis:100%;font-size:1.3rem;color:var(--nw-body);margin:.4rem 0 0;}

/* ─────────────────────── INLINE CTA BAND ──────────────────── */

.cta-band{
  max-width:1200px;margin:0 auto;background:var(--nw-soft);border:1px solid var(--nw-line);
  border-radius:1.6rem;padding:3rem 3.5rem;display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;
}
.cta-band .cb-ico{
  width:5.4rem;height:5.4rem;border-radius:1.3rem;background:#fff;border:1px solid var(--nw-line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cta-band .cb-ico svg{width:2.6rem;height:2.6rem;fill:none;stroke:var(--nw-pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cta-band .cb-txt{flex:1;min-width:24rem;}
.cta-band h2{font-size:2.2rem;font-weight:800;color:var(--nw-ink);margin:0 0 .6rem;}
.cta-band p{font-size:1.45rem;color:var(--nw-body);line-height:1.6;margin:0;}
.cta-band .cb-btn{
  background:var(--nw-pink);color:#fff;padding:1.4rem 3rem;border-radius:1rem;
  /* transparent border so it matches the height of the outlined .cb-alt beside it */
  border:1px solid transparent;
  font-size:1.5rem;font-weight:700;white-space:nowrap;transition:background .2s,transform .2s;
}
.cta-band .cb-btn:hover{background:var(--nw-pink-dk);transform:translateY(-2px);color:#fff;}

/* ─────────────────── CATEGORY / ARTICLE HERO ──────────────── */

.sub-hero{
  background:linear-gradient(135deg,#16224a 0%,#1b2955 50%,#243a77 100%);
  padding:6rem 4rem 5.5rem;position:relative;overflow:hidden;
}
.sub-hero::after{
  content:'';position:absolute;top:-40%;right:-8%;width:50%;height:180%;
  background:radial-gradient(ellipse,rgba(205,221,0,.12) 0%,transparent 65%);pointer-events:none;
}
.sub-hero-inner{max-width:1000px;margin:0 auto;position:relative;z-index:2;}
.sub-hero .bh-eyebrow{margin-bottom:1.4rem;}
.sub-hero h1{
  font-size:clamp(3rem,4.4vw,4.8rem);font-weight:800;color:#fff;line-height:1.1;
  letter-spacing:-.02em;margin:0 0 1.8rem;
}
.sub-hero h1 .pk{color:var(--nw-pink);}
.sub-hero > .sub-hero-inner > p{font-size:1.7rem;color:rgba(255,255,255,.75);line-height:1.7;max-width:76rem;margin:0;}
.art-meta{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.8rem;}
.art-meta li{display:flex;align-items:center;gap:.7rem;font-size:1.35rem;color:rgba(255,255,255,.7);}
.art-meta svg{width:1.6rem;height:1.6rem;fill:none;stroke:var(--nw-lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.art-cat-pill{
  display:inline-flex;align-items:center;gap:.6rem;background:rgba(232,31,118,.18);
  border:1px solid rgba(232,31,118,.45);border-radius:5rem;padding:.5rem 1.6rem;
  font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.8rem;
}
.art-cat-pill:hover{background:var(--nw-pink);color:#fff;}

/* ─────────────────────── ARTICLE BODY ─────────────────────── */

.art-wrap{max-width:1000px;margin:0 auto;padding:5rem 4rem 2rem;}
.art-lead-img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:1.8rem;display:block;margin-bottom:4rem;background:var(--nw-soft);}
/* Rendered as a div[role="navigation"], not <nav>: navigation.css sets
   nav{display:flex!important} and main.css nav{z-index:1000!important},
   which turned this box into a sticky flex row. The resets below are a
   belt-and-braces guard if the element ever goes back to <nav>. */
.toc{
  display:block;position:static;top:auto;z-index:auto;min-height:0;
  justify-content:normal;align-items:normal;gap:0;border-bottom:0;
  background:var(--nw-soft);border:1px solid var(--nw-line);
  border-radius:1.6rem;padding:2.6rem 3rem;margin-bottom:4rem;
}
.toc h2{font-size:1.5rem;font-weight:700;color:var(--nw-ink);text-transform:uppercase;letter-spacing:.08em;margin:0 0 1.6rem;}
.toc ol{list-style:none;counter-reset:toc;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 3rem;margin:0;padding:0;}
.toc li{counter-increment:toc;}
.toc a{font-size:1.45rem;color:var(--nw-ink);font-weight:500;display:flex;gap:.9rem;line-height:1.5;}
.toc a::before{content:counter(toc) ".";color:var(--nw-pink);font-weight:700;flex-shrink:0;}
.toc a:hover{color:var(--nw-pink);}

.prose{font-size:1.65rem;color:#3d4457;line-height:1.85;min-width:0;}
.prose h2{
  font-size:clamp(2.4rem,3vw,3.2rem);font-weight:800;color:var(--nw-ink);
  line-height:1.22;margin:5rem 0 1.8rem;scroll-margin-top:11rem;letter-spacing:-.015em;
}
.prose h3{font-size:2rem;font-weight:700;color:var(--nw-ink);margin:3.5rem 0 1.2rem;line-height:1.3;}
.prose p{margin:0 0 2rem;}
.prose a{color:var(--nw-pink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{color:var(--nw-pink-dk);}
.prose strong{color:var(--nw-ink);font-weight:700;}
.prose ul,.prose ol{margin:0 0 2.4rem;padding-left:0;list-style:none;}
.prose ul li{position:relative;padding-left:2.8rem;margin-bottom:1.1rem;}
.prose ul li::before{
  content:'';position:absolute;left:.4rem;top:1.05rem;width:.8rem;height:.8rem;
  border-radius:50%;background:var(--nw-pink);
}
.prose ol{counter-reset:pl;}
.prose ol li{position:relative;padding-left:3.4rem;margin-bottom:1.1rem;counter-increment:pl;}
.prose ol li::before{
  content:counter(pl);position:absolute;left:0;top:.35rem;width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(232,31,118,.1);color:var(--nw-pink);font-size:1.25rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.prose figure{margin:3.5rem 0;}
.prose figure img{width:100%;border-radius:1.6rem;display:block;}
.prose figcaption{font-size:1.3rem;color:#8a93a8;text-align:center;margin-top:1.2rem;}
.prose table{width:100%;border-collapse:collapse;margin:0 0 3rem;font-size:1.45rem;}
.prose th,.prose td{border:1px solid var(--nw-line);padding:1.4rem 1.6rem;text-align:left;vertical-align:top;}
.prose th{background:var(--nw-soft);font-weight:700;color:var(--nw-ink);font-size:1.35rem;}
.prose td{color:#4b5266;line-height:1.65;}
.callout{
  background:var(--nw-soft);border-left:4px solid var(--nw-pink);border-radius:0 1.2rem 1.2rem 0;
  padding:2.4rem 2.8rem;margin:0 0 3rem;
}
.callout p:last-child{margin-bottom:0;}
.callout > strong:first-child{display:block;font-size:1.4rem;text-transform:uppercase;letter-spacing:.08em;color:var(--nw-pink);margin-bottom:.8rem;}

/* pillar ↔ cluster interlink box */
.series{
  background:linear-gradient(135deg,#1b2955 0%,#243a77 100%);border-radius:2rem;
  padding:3.5rem 3.5rem 3rem;margin:5rem 0;
}
.series h2{font-size:2.2rem;font-weight:800;color:#fff;margin:0 0 .8rem;}
.series > p{font-size:1.45rem;color:rgba(255,255,255,.72);margin:0 0 2.4rem;line-height:1.65;}
.series ul{display:grid;grid-template-columns:1fr 1fr;gap:1rem;list-style:none;margin:0;padding:0;}
.series ul li{margin:0;padding:0;}
.series ul li::before{display:none;}
.series a{
  display:flex;align-items:center;gap:1.2rem;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:1rem;padding:1.4rem 1.8rem;
  font-size:1.4rem;font-weight:600;color:#fff;text-decoration:none;line-height:1.4;transition:background .2s,border-color .2s;
}
.series a:hover{background:rgba(255,255,255,.14);border-color:var(--nw-lime);color:#fff;}
.series a .n{
  width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(205,221,0,.2);color:var(--nw-lime);
  font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.series a[aria-current="page"]{background:rgba(205,221,0,.16);border-color:var(--nw-lime);}

/* ───────────────────────── FAQ BLOCK ──────────────────────── */

.faq-wrap{max-width:1000px;margin:0 auto;}
.faq-wrap h2{font-size:clamp(2.6rem,3.4vw,3.6rem);font-weight:800;color:var(--nw-ink);margin:0 0 3rem;letter-spacing:-.015em;}

/* ──────────────────── RELATED / TOPIC LINKS ───────────────── */

.topic-links{display:flex;flex-wrap:wrap;gap:1rem;}
.topic-links a{
  background:#fff;border:1px solid var(--nw-line);border-radius:5rem;padding:1rem 2.2rem;
  font-size:1.4rem;font-weight:600;color:var(--nw-ink);transition:all .2s;
}
.topic-links a:hover{background:var(--nw-navy);border-color:var(--nw-navy);color:#fff;transform:translateY(-2px);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.svc-grid a{
  display:flex;align-items:center;gap:1.2rem;background:#fff;border:1px solid var(--nw-line);
  border-radius:1.2rem;padding:1.6rem 1.8rem;font-size:1.45rem;font-weight:600;color:var(--nw-ink);transition:all .2s;
}
.svc-grid a:hover{border-color:var(--nw-pink);transform:translateY(-3px);box-shadow:0 12px 30px rgba(27,41,85,.08);}
.svc-grid svg{width:2rem;height:2rem;fill:none;stroke:var(--nw-pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* ───────────────────────── RESPONSIVE ─────────────────────── */

@media(max-width:1180px){
  .feat-card{grid-template-columns:32rem 1fr;}
  .feat-side{grid-column:1/-1;flex-direction:row;}
  .feat-benefit{flex:1;}
  .guide-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1000px){
  .bh-inner{grid-template-columns:1fr;gap:4rem;}
  .bh-art{justify-content:flex-start;flex-wrap:wrap;gap:2rem;}
  .bh-script{position:static;transform:none;flex-basis:100%;max-width:none;}
  .bh-map{width:min(30rem,70%);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .series ul{grid-template-columns:1fr;}
  .toc ol{grid-template-columns:1fr;}
}
@media(max-width:820px){
  .blog-hero{padding:5rem 2rem 4.5rem;}
  .bsec{padding:5rem 2rem;}
  .sub-hero{padding:4.5rem 2rem 4rem;}
  .art-wrap{padding:4rem 2rem 1rem;}
  .feat-card{grid-template-columns:1fr;padding:1.6rem;}
  .feat-side{flex-direction:column;}
  .guide-grid{grid-template-columns:repeat(2,1fr);}
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .bh-trust{gap:1.6rem 2.4rem;}
  .cta-band{padding:2.5rem;}
  .prose{font-size:1.6rem;}
  .prose table{display:block;overflow-x:auto;white-space:nowrap;}
}
@media(max-width:560px){
  .guide-grid,.post-grid,.cat-grid,.svc-grid{grid-template-columns:1fr;}
  .bh-trust{flex-direction:column;gap:1.4rem;}
  .bsec-head{flex-direction:column;align-items:flex-start;}
  .cta-band .cb-btn{width:100%;text-align:center;}
  .toc{padding:2.2rem;}
  .series{padding:2.6rem 2rem;}
}

/* ── FAQ accordion overrides ──
   The per-page inline <style> caps .faq-a at 300px, which clips the longer
   answers on these pages. Loaded after it, so these win. */
.faq-list .faq-item{border-bottom:1px solid var(--nw-line);}
.faq-list .faq-q{font-size:1.75rem;padding:2.4rem 0;}
.faq-list .faq-a{font-size:1.55rem;line-height:1.8;color:var(--nw-body);}
.faq-list .faq-item.open .faq-a{max-height:90rem;padding-bottom:2.6rem;}
@media(max-width:560px){.faq-list .faq-q{font-size:1.6rem;}}

/* ── Breadcrumb bar ──
   The generated pages carry this in their inline <style>; the five older
   posts do not, so it lives here too (identical values, so it is a no-op
   where the inline rule already applies). */
.breadcrumb{
  background:var(--nw-soft);padding:1.4rem 4rem;font-size:1.3rem;color:#888;
  border-bottom:1px solid var(--nw-line);
}
.breadcrumb a{color:var(--nw-navy);text-decoration:none;}
.breadcrumb a:hover{color:var(--nw-pink);}
.breadcrumb span{margin:0 .6rem;}
@media(max-width:820px){.breadcrumb{padding:1.2rem 2rem;}}

/* ── 3-up variant of .post-grid (related / keep-reading rows) ──
   A class rather than an inline grid-template-columns, so the responsive
   rules below can still collapse it on tablet and phone. */
/* The horizontal card needs ~380px for image + title + arrow, so it drops to
   2-up earlier than a stacked card would. */
.post-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1180px){.post-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){.post-grid.cols-3{grid-template-columns:1fr;}}

/* ── Category tab bar ──
   Real links, not filters: each tab navigates to that category hub.
   Sits under the hero on /blog/ and on every /blog/category/ page. */
/* Also a div[role="navigation"], for the same reason as .toc */
.blog-tabs{
  display:block;position:static;top:auto;z-index:auto;min-height:0;
  justify-content:normal;align-items:normal;gap:0;
  background:#fff;border-bottom:1px solid var(--nw-line);padding:0 4rem;
}
.blog-tabs-inner{
  max-width:1200px;margin:0 auto;display:flex;gap:.8rem;align-items:center;
  justify-content:center;padding:2rem 0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
/* once the row has to scroll, centring would hide the leading tabs */
@media(max-width:1100px){.blog-tabs-inner{justify-content:flex-start;}}
.blog-tabs-inner::-webkit-scrollbar{display:none;}
.blog-tab{
  flex-shrink:0;display:inline-flex;align-items:center;gap:.7rem;
  background:#f5f6fa;border:1px solid transparent;border-radius:999px;
  padding:.9rem 2rem;font-size:1.4rem;font-weight:600;color:var(--nw-ink);
  white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.blog-tab:hover{background:#e8ebf4;color:var(--nw-ink);transform:translateY(-1px);}
.blog-tab[aria-current="page"]{background:var(--nw-pink);border-color:var(--nw-pink);color:#fff;}
.blog-tab[aria-current="page"]:hover{background:var(--nw-pink-dk);color:#fff;}
.blog-tab .n{
  font-size:1.1rem;font-weight:700;color:#8a93a8;background:#fff;
  border-radius:5rem;padding:.15rem .7rem;line-height:1.5;
}
.blog-tab[aria-current="page"] .n{color:#fff;background:rgba(255,255,255,.18);}
@media(max-width:820px){.blog-tabs{padding:0 2rem;}.blog-tabs-inner{padding:1.4rem 0;}}

/* Two-column variant of the featured card (category hubs, no side panel).
   A class, not an inline grid-template-columns, so it still collapses. */
.feat-card.cols-2{grid-template-columns:38rem 1fr;}
@media(max-width:820px){.feat-card.cols-2{grid-template-columns:1fr;}}

/* ── "Read more" reveal under the Latest articles grid ──
   The grid ships every card; the button reveals them in batches, so search
   still covers the full set rather than only what is on screen. */
.post-more-wrap{display:flex;justify-content:center;margin-top:3.5rem;}
.post-more{
  display:inline-flex;align-items:center;gap:.9rem;cursor:pointer;
  background:#fff;border:1px solid var(--nw-line);border-radius:5rem;
  font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;color:var(--nw-ink);
  padding:1.4rem 3.2rem;transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.post-more:hover{background:var(--nw-pink);border-color:var(--nw-pink);color:#fff;transform:translateY(-2px);}
.post-more svg{
  width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;
}
.post-more:hover svg{transform:translateY(2px);}

/* ============================================================
   BLOG HUB v2 — photo hero + per-category blocks
   Each category renders a pillar card followed by up to three
   sub-article cards. Brand palette kept (pink/navy/lime); the
   reference mockup used blue.
   ============================================================ */

/* ── Hero over the Dubai skyline photo ──
   Drop the photo in at /images/dubai-skyline.jpg. Until it exists the
   gradients below still paint, so the hero never renders bare. */
.hero2{
  position:relative;overflow:hidden;
  background-color:#0d1730;
  background-image:
    linear-gradient(90deg,rgba(10,20,45,.94) 0%,rgba(10,20,45,.80) 48%,rgba(10,20,45,.38) 100%),
    linear-gradient(160deg,#16294f 0%,#0d1730 55%,#1d2f5e 100%),
    url("../images/dubai-skyline.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,center bottom;
  padding:6rem 4rem 5rem;
}
.hero2-inner{
  max-width:1200px;margin:0 auto;position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;gap:2rem 3rem;align-items:center;
}
.hero2 .bh-eyebrow{color:rgba(255,255,255,.72);letter-spacing:.18em;margin-bottom:1.4rem;}
.hero2 h1{
  font-size:clamp(3.2rem,4.6vw,5.2rem);font-weight:800;color:#fff;
  line-height:1.08;letter-spacing:-.02em;margin:0 0 1.6rem;
}
.hero2 h1 .pk{color:var(--nw-pink);display:block;}
.hero2 .h2sub{
  font-size:1.6rem;color:rgba(255,255,255,.78);line-height:1.6;
  max-width:52rem;margin:0 0 2.8rem;
}
.hero2 .blog-search{
  width:100%;max-width:52rem;margin:0 0 2.8rem;
  box-shadow:0 14px 40px rgba(0,0,0,.3);border-color:transparent;
}
.hero2-trust{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.4rem 3.2rem;
  margin:1.4rem 0 0;padding:2.2rem 0 0;border-top:1px solid rgba(255,255,255,.14);
}
.hero2-trust li{display:flex;align-items:center;gap:.9rem;}
.hero2-trust .ti{
  width:2.8rem;height:2.8rem;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
}
.hero2-trust .ti svg{
  width:1.4rem;height:1.4rem;fill:none;stroke:var(--nw-lime);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.hero2-trust span{font-size:1.35rem;font-weight:500;color:rgba(255,255,255,.9);}
.hero2-art{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:1rem;}
.hero2-script{
  font-family:'Caveat',cursive;font-size:2.3rem;line-height:1.2;max-width:22rem;
  color:rgba(255,255,255,.95);transform:rotate(-3deg);text-align:center;
}

/* ── Category block ── */
.cblock{padding:4.5rem 4rem 1rem;}
.cblock.last{padding-bottom:4.5rem;}
.cblock-inner{max-width:1200px;margin:0 auto;}
.cblock-head{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:2.2rem;flex-wrap:wrap;}
.cblock-head h2{
  display:flex;align-items:center;gap:1.4rem;margin:0;
  font-size:clamp(2.4rem,3vw,3.2rem);font-weight:800;color:var(--nw-ink);letter-spacing:-.015em;
}
.cblock-head h2::before{
  content:"";width:.5rem;height:3rem;border-radius:.3rem;background:var(--nw-pink);flex-shrink:0;
}
.cblock-more{
  font-size:1.4rem;font-weight:700;color:var(--nw-pink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.6rem;transition:gap .2s;
}
.cblock-more:hover{gap:1.1rem;color:var(--nw-pink-dk);}

/* pillar card */
.pcard{
  display:grid;grid-template-columns:38rem 1fr;gap:3rem;align-items:center;
  background:#fff;border:1px solid var(--nw-line);border-radius:1.6rem;
  padding:1.6rem;margin-bottom:1.8rem;box-shadow:0 14px 40px rgba(27,41,85,.05);
}
.pcard-media{display:block;border-radius:1.2rem;overflow:hidden;}
.pcard-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--nw-soft);}
.pcard-body{padding-right:1.4rem;min-width:0;}
.pcard-badge{
  display:inline-block;background:var(--nw-pink);color:#fff;border-radius:5rem;
  padding:.45rem 1.5rem;font-size:1.05rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1.4rem;
}
.pcard-body h3{font-size:clamp(2rem,2.3vw,2.6rem);font-weight:800;color:var(--nw-ink);line-height:1.25;margin:0 0 1.2rem;}
.pcard-body h3 a{color:inherit;}
.pcard-body h3 a:hover{color:var(--nw-pink);}
.pcard-body p{font-size:1.45rem;color:var(--nw-body);line-height:1.65;margin:0 0 2rem;}
.pcard-btn{
  display:inline-flex;align-items:center;gap:.8rem;background:var(--nw-pink);color:#fff;
  padding:1.2rem 2.6rem;border-radius:.8rem;font-size:1.4rem;font-weight:700;
  transition:background .2s,transform .2s;
}
.pcard-btn:hover{background:var(--nw-pink-dk);transform:translateY(-2px);color:#fff;}
.pcard-btn svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* sub-article cards */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
.scard{
  display:flex;gap:1.4rem;background:#fff;border:1px solid var(--nw-line);
  border-radius:1.2rem;padding:1.4rem;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.scard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(27,41,85,.1);border-color:var(--nw-pink);}
.scard-thumb{width:8.6rem;height:8.6rem;object-fit:cover;border-radius:.9rem;flex-shrink:0;display:block;background:var(--nw-soft);}
.scard-body{display:flex;flex-direction:column;flex:1;min-width:0;}
.scard-tag{
  align-self:flex-start;background:rgba(232,31,118,.1);color:var(--nw-pink);border-radius:.5rem;
  padding:.3rem .9rem;font-size:.95rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:.8rem;
}
.scard-body h3{font-size:1.4rem;font-weight:700;color:var(--nw-ink);line-height:1.35;margin:0 0 1rem;}
.scard-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;}
.scard-meta{font-size:1.1rem;color:#8a93a8;}
.scard-go{
  width:2.6rem;height:2.6rem;border-radius:50%;background:var(--nw-soft);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.scard-go svg{width:1.3rem;height:1.3rem;fill:none;stroke:var(--nw-pink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.scard:hover .scard-go{background:var(--nw-pink);}
.scard:hover .scard-go svg{stroke:#fff;}

/* ── Bottom CTA over the skyline ── */
.cta2{padding:2rem 4rem 6rem;}
.cta2-inner{
  max-width:1200px;margin:0 auto;border-radius:1.6rem;overflow:hidden;
  background-color:#132347;
  background-image:
    linear-gradient(90deg,rgba(14,26,56,.95) 0%,rgba(14,26,56,.82) 55%,rgba(14,26,56,.55) 100%),
    linear-gradient(120deg,#16294f 0%,#1d2f5e 100%),
    url("../images/dubai-skyline.jpg");
  background-size:cover,cover,cover;background-position:center,center,center bottom;
  padding:3.4rem 3.6rem;display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;
}
.cta2-inner .ct{flex:1;min-width:28rem;}
.cta2-inner h2{font-size:clamp(2.2rem,2.6vw,2.8rem);font-weight:800;color:#fff;margin:0 0 .8rem;}
.cta2-inner p{font-size:1.45rem;color:rgba(255,255,255,.78);line-height:1.6;margin:0;max-width:58rem;}
.cta2-btn{
  background:var(--nw-pink);color:#fff;padding:1.4rem 3rem;border-radius:.8rem;
  font-size:1.5rem;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:.8rem;
  transition:background .2s,transform .2s;
}
.cta2-btn:hover{background:var(--nw-pink-dk);transform:translateY(-2px);color:#fff;}
.cta2-btn svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* no-results state for the hub search */
.cblock-empty{
  max-width:1200px;margin:0 auto 4rem;text-align:center;padding:5rem 2rem;
  background:var(--nw-soft);border-radius:1.4rem;color:var(--nw-body);font-size:1.5rem;
}

/* ── Responsive ── */
@media(max-width:1100px){
  .sgrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:980px){
  .hero2-inner{grid-template-columns:1fr;gap:2.5rem;}
  .hero2-art{justify-content:flex-start;padding-top:0;}
  .hero2-script{transform:none;text-align:left;}
  .pcard{grid-template-columns:1fr;}
  .pcard-body{padding-right:0;}
}
@media(max-width:820px){
  .hero2{padding:4.5rem 2rem 4rem;}
  .cblock{padding:4rem 2rem 1rem;}
  .cblock.last{padding-bottom:4rem;}
  .cta2{padding:1rem 2rem 5rem;}
  .cta2-inner{padding:2.6rem;}
  .sgrid{grid-template-columns:1fr;}
  .cblock-head h2::before{height:2.4rem;}
}
@media(max-width:560px){
  .hero2-trust{flex-direction:column;gap:1.2rem;}
  .cta2-btn{width:100%;justify-content:center;}
  .scard-thumb{width:7rem;height:7rem;}
}

/* ── Article page: one content column ──
   The hero (1000), article body (920) and card sections (1200) each had a
   different left edge, so content stepped in and out down the page. Pin them
   all to the article's 920px reading column. Scoped with .art / .narrow so
   the hub and category hubs keep their wider 1200px bands. */
.sub-hero.art .sub-hero-inner{max-width:920px;}
.bsec.narrow .bsec-inner,
.bsec.narrow .cta-band{max-width:920px;}
.faq-wrap{max-width:920px;}
.bsec.narrow .post-grid.cols-3{gap:1.6rem;}
/* Category hubs: hero and intro share the same 1200px grid as the card
   sections, so the page keeps one left edge. The intro text is capped for
   readability without indenting it. */
.sub-hero.hub .sub-hero-inner{max-width:1200px;}
.prose.cat-intro{max-width:78rem;}

/* ============================================================
   Sticky table of contents (article pages)
   ============================================================ */

/* ── position:sticky enabler ──
   responsive-fixes.css sets body{overflow-x:hidden!important}. Pairing a
   hidden axis with a visible one computes overflow-y to `auto`, which makes
   BODY a scroll container — so sticky descendants pin to body's scrollport,
   which never scrolls, and they just scroll away. overflow-x:clip crops the
   same way WITHOUT creating a scroll container, so body goes back to
   overflow-y:visible and sticky resolves against the viewport.

   Deliberately body only. Applying clip to the ROOT as well propagates to
   the viewport and removes its scrolling mechanism — the page then cannot be
   scrolled at all (the five older posts do exactly that and are stuck).
   :root body is (0,1,1), so it outranks the (0,0,1) !important rule. */
:root body{overflow-x:clip !important;}

.art-layout{
  display:grid;grid-template-columns:26rem minmax(0,1fr);
  gap:4.8rem;align-items:start;
}
/* 11rem clears the site header, which is sticky at top:0 and ~90px tall */
.art-side{
  position:sticky;top:11rem;
  max-height:calc(100vh - 14rem);overflow-y:auto;
  scrollbar-width:thin;
}
.art-side::-webkit-scrollbar{width:6px;}
.art-side::-webkit-scrollbar-thumb{background:#d6dbe8;border-radius:3px;}
.art-side .toc{
  margin-bottom:0;padding:2.2rem 2rem;
  border-left:4px solid var(--nw-pink);
}
.art-side .toc h2{font-size:1.3rem;margin-bottom:1.4rem;}
.art-side .toc ol{grid-template-columns:1fr;gap:.9rem;}
.art-side .toc a{font-size:1.35rem;line-height:1.45;}

/* highlight the section currently in view */
.art-side .toc a.is-active{color:var(--nw-pink);font-weight:700;}
.art-side .toc a.is-active::before{color:var(--nw-pink);}

@media(max-width:980px){
  /* stack: the TOC returns to a full-width block above the article.
     minmax(0,1fr), not 1fr: a bare 1fr track takes its automatic minimum from
     min-content, and the nowrap tables below 820px blow the column out well
     past the viewport (overflow-x:hidden then hides it from scrollWidth). */
  .art-layout{grid-template-columns:minmax(0,1fr);gap:0;}
  .art-side{position:static;max-height:none;overflow:visible;margin-bottom:3.5rem;}
  .art-side .toc{padding:2.6rem 3rem;}
  .art-side .toc h2{font-size:1.5rem;}
  .art-side .toc ol{grid-template-columns:1fr 1fr;gap:.9rem 3rem;}
}
@media(max-width:640px){
  .art-side .toc ol{grid-template-columns:1fr;}
}

/* ============================================================
   ARTICLE LAYOUT v2 — modelled on nextweb.com.au/blog/<post>
   Light header inside the content column (no dark hero), hero
   figure below it, and a right-hand sidebar carrying Related
   Articles plus a sticky TOC + CTA card.
   ============================================================ */

.art2{padding:4.5rem 4rem 2rem;}
.art2-layout{
  max-width:1260px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) 29rem;
  gap:5.6rem;align-items:start;
}
.art2-main{min-width:0;}

/* ── header ── */
.art2-cat{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(232,31,118,.1);color:var(--nw-pink);border-radius:5rem;
  padding:.5rem 1.6rem;font-size:1.2rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.8rem;
}
.art2-cat:hover{background:var(--nw-pink);color:#fff;}
.art2-cat svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.art2-header h1{
  font-size:clamp(3rem,3.6vw,4.4rem);font-weight:800;color:var(--nw-ink);
  line-height:1.16;letter-spacing:-.02em;margin:0 0 1.8rem;
}
.art2-intro{font-size:1.75rem;line-height:1.65;color:var(--nw-body);margin:0 0 2.4rem;}
.art2-meta{
  display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;
  padding-bottom:2.6rem;border-bottom:1px solid var(--nw-line);margin-bottom:3rem;
}
.art2-author{display:flex;align-items:center;gap:1.2rem;}
.art2-avatar{
  width:4.4rem;height:4.4rem;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--nw-pink),#8d1149);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;font-weight:700;letter-spacing:.04em;
}
.art2-author strong{display:block;font-size:1.45rem;font-weight:700;color:var(--nw-ink);line-height:1.3;}
.art2-author small{display:block;font-size:1.3rem;color:#8a93a8;margin-top:.2rem;}
.art2-chips{display:flex;align-items:center;gap:1.6rem;margin-left:auto;}
.art2-chips span{display:inline-flex;align-items:center;gap:.6rem;font-size:1.3rem;color:#8a93a8;}
.art2-chips svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ── hero figure ── */
.art2-hero{margin:0 0 3.6rem;}
.art2-hero img{width:100%;height:auto;display:block;border-radius:1.2rem;background:var(--nw-soft);}

/* ── sidebar ── */
/* The grid uses align-items:start, which sizes this column to its own
   content (~1100px). A sticky child can only travel inside its parent, so
   that capped the TOC at ~286px of stick before it scrolled away. Stretch
   the column to the full row height and it travels the whole article. */
.art2-side{min-width:0;align-self:stretch;}
.art2-side h2{
  font-size:1.5rem;font-weight:700;color:var(--nw-ink);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 1.6rem;
}
.art2-related{margin-bottom:2.6rem;}
.art2-related ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.4rem;}
.art2-related a{display:flex;gap:1.2rem;align-items:flex-start;}
.art2-related img{
  width:6.4rem;height:6.4rem;object-fit:cover;border-radius:.8rem;
  flex-shrink:0;display:block;background:var(--nw-soft);
}
.art2-related strong{
  display:block;font-size:1.35rem;font-weight:600;color:var(--nw-ink);
  line-height:1.4;transition:color .2s;
}
.art2-related a:hover strong{color:var(--nw-pink);}
.art2-related time{display:block;font-size:1.2rem;color:#8a93a8;margin-top:.5rem;}

/* sticky column: TOC + CTA travel with the reader */
.art2-sticky{
  position:sticky;top:10rem;display:flex;flex-direction:column;gap:1.8rem;
  /* keep TOC + CTA inside the viewport on short screens */
  max-height:calc(100vh - 12rem);
}
.art2-sticky > .art2-cta{flex:0 0 auto;}

.art2-toc{
  background:#fff;border:1px solid var(--nw-line);border-radius:1rem;
  /* shrink first when the sticky column runs out of height */
  flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;
}
.art2-toc::-webkit-scrollbar{width:6px;}
.art2-toc::-webkit-scrollbar-thumb{background:#d6dbe8;border-radius:3px;}
.art2-toc summary{
  cursor:pointer;list-style:none;padding:1.6rem 1.8rem;
  font-size:1.35rem;font-weight:700;color:var(--nw-ink);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:sticky;top:0;background:#fff;border-radius:1rem 1rem 0 0;
}
.art2-toc summary::-webkit-details-marker{display:none;}
.art2-toc summary span{font-size:1.15rem;font-weight:600;color:#8a93a8;white-space:nowrap;}
.art2-toc summary::after{
  content:'';width:.8rem;height:.8rem;flex-shrink:0;
  border-right:2px solid #8a93a8;border-bottom:2px solid #8a93a8;
  transform:rotate(45deg);margin-left:.4rem;transition:transform .2s;
}
.art2-toc[open] summary::after{transform:rotate(-135deg);}
.art2-toc ol{
  list-style:none;counter-reset:t2;margin:0;padding:0 1.8rem 1.8rem;
  border-top:1px solid var(--nw-line);padding-top:1.4rem;
}
.art2-toc li{counter-increment:t2;margin-bottom:1rem;}
.art2-toc li:last-child{margin-bottom:0;}
.art2-toc a{
  display:flex;gap:.8rem;font-size:1.3rem;line-height:1.45;
  color:var(--nw-body);font-weight:500;
}
.art2-toc a::before{content:counter(t2) ".";color:#b9c0d0;font-weight:700;flex-shrink:0;}
.art2-toc a:hover{color:var(--nw-pink);}
.art2-toc a.is-active{color:var(--nw-pink);font-weight:700;}
.art2-toc a.is-active::before{color:var(--nw-pink);}

.art2-cta{
  background:#fff0f5;border-radius:1.2rem;padding:2.2rem 2rem;
}
.art2-cta .ci{
  width:4rem;height:4rem;border-radius:1rem;background:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;
}
.art2-cta .ci svg{width:2rem;height:2rem;fill:none;stroke:var(--nw-pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.art2-cta h2{font-size:1.7rem;font-weight:800;color:var(--nw-ink);text-transform:none;letter-spacing:normal;margin:0 0 .8rem;}
.art2-cta p{font-size:1.35rem;color:var(--nw-body);line-height:1.6;margin:0 0 1.8rem;}
.art2-cta a{
  display:inline-flex;align-items:center;gap:.7rem;background:var(--nw-pink);color:#fff;
  padding:1.1rem 2.2rem;border-radius:.8rem;font-size:1.35rem;font-weight:700;
  transition:background .2s;
}
.art2-cta a:hover{background:var(--nw-pink-dk);color:#fff;}
.art2-cta a svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* FAQ now sits inside the content column */
.art2-faq{margin-top:5rem;}
.art2-faq > h2{
  font-size:clamp(2.4rem,3vw,3.2rem);font-weight:800;color:var(--nw-ink);
  margin:0 0 2.4rem;letter-spacing:-.015em;text-transform:none;
}

/* ── responsive ── */
@media(max-width:1080px){
  .art2-layout{grid-template-columns:minmax(0,1fr);gap:0;}
  .art2-side{margin-top:4rem;align-self:auto;}
  .art2-sticky{position:static;max-height:none;}
  .art2-toc{max-height:none;overflow:visible;}
  .art2-related ul{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
}
@media(max-width:820px){
  .art2{padding:3.5rem 2rem 1rem;}
  .art2-meta{gap:1.2rem;}
  .art2-chips{margin-left:0;}
}
@media(max-width:560px){
  .art2-related ul{grid-template-columns:1fr;}
}

/* ── Sidebar cards ──
   One shared card for both sidebar slots: "Main Blog" (the pillar, shown on
   cluster pages) and "Related Blogs" (shown on the pillar page). Compact
   horizontal layout — thumbnail left, title + date right. */
.art2-cards{margin-bottom:2.6rem;}
.art2-cards > h2{
  font-size:1.9rem;font-weight:800;color:var(--nw-ink);
  text-transform:none;letter-spacing:-.01em;margin:0 0 1.4rem;
}
.art2-cards ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.2rem;}
.side-card{
  display:flex;gap:1.2rem;align-items:center;
  background:#fff;border:1px solid var(--nw-line);border-radius:1.2rem;
  padding:1rem;box-shadow:0 4px 14px rgba(27,41,85,.05);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.side-card:hover{
  border-color:var(--nw-pink);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(27,41,85,.12);
}
.side-card img{
  width:7.2rem;height:5.8rem;object-fit:cover;border-radius:.8rem;
  flex-shrink:0;display:block;background:var(--nw-soft);
}
.side-card .sc-body{min-width:0;}
.side-card strong{
  display:block;font-size:1.35rem;font-weight:700;color:var(--nw-ink);
  line-height:1.35;transition:color .2s;
}
.side-card:hover strong{color:var(--nw-pink);}
.side-card time{display:block;font-size:1.2rem;color:#8a93a8;margin-top:.6rem;}

/* ── Article footer sections share the article shell's width ──
   Previously these used .narrow (920px) while the article shell is 1260px,
   so the page stepped in at the related/topics/CTA blocks. */
.bsec.artfoot{padding:5rem 4rem;}
.bsec.artfoot .bsec-inner,
.bsec.artfoot .cta-band{max-width:1260px;}
@media(max-width:820px){.bsec.artfoot{padding:4rem 2rem;}}

/* ── Closing line back to the pillar (sub-blog pages) ──
   Sits after the FAQ as the last thing in the article column, separated by a
   rule so it reads as a sign-off. Not nested in .prose, so it carries its own
   type rules and link styling. */
.pillar-note{
  margin:3.5rem 0 0;padding-top:2.6rem;
  border-top:1px solid var(--nw-line);
  font-size:1.6rem;line-height:1.8;color:#3d4457;
}
.pillar-note a{
  color:var(--nw-pink);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.pillar-note a:hover{color:var(--nw-pink-dk);}

/* Intro paragraphs that sit above the first heading on the older posts */
.art2-lead > p:first-child{margin-top:0;}
.art2-lead .pp-lead{font-size:1.8rem;font-weight:600;color:var(--nw-ink);line-height:1.6;}

/* ============================================================
   Legacy post components (.pp-*)
   The five older posts were re-wrapped in the shared article shell, which
   dropped their page-level <style>. These rules are recovered verbatim from
   those pages so their callouts, figures, tables and flow diagrams keep
   rendering exactly as before.
   ============================================================ */
.simple-page ul.pp{list-style:disc;padding-left:2.2rem;margin:0 0 2rem;}
.simple-page ul.pp li{font-size:1.5rem;color:#555;line-height:1.8;margin-bottom:.6rem;}
.simple-page ul.pp li::marker{color:#e81f76;}
/* ── TWO-COLUMN LAYOUT: sticky TOC left, content right ── */
    .simple-page.pp-page{max-width:1280px;padding:6rem 4rem 8rem;}
.pp-head{margin-bottom:4rem;padding-bottom:3rem;border-bottom:1px solid #e8eaf0;}
.pp-head .sub{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.pp-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:6rem;align-items:start;}
.pp-side{position:sticky;top:3rem;max-height:calc(100vh - 6rem);overflow-y:auto;padding-right:.8rem;}
.pp-side::-webkit-scrollbar{width:5px;}
.pp-side::-webkit-scrollbar-track{background:transparent;}
.pp-side::-webkit-scrollbar-thumb{background:#dde1ee;border-radius:3px;}
.pp-content{min-width:0;}
.pp-content>p:first-child,.pp-content>h2:first-child{margin-top:0;}
.pp-toc h2{font-size:1.2rem !important;font-weight:700 !important;color:#9aa0b4 !important;text-transform:uppercase;letter-spacing:.09em;margin:0 0 1.6rem !important;}
.pp-toc ol{list-style:none;counter-reset:pp;margin:0;padding:0;}
.pp-toc>ol>li{counter-increment:pp;}
.pp-toc a{display:block;border-left:2px solid #e8eaf0;transition:color .2s,background .2s,border-color .2s;}
.pp-toc>ol>li>a{display:flex;gap:.6rem;padding:.7rem 1.2rem;font-size:1.35rem;color:#1b2955;font-weight:500;line-height:1.5;}
.pp-toc>ol>li>a::before{content:counter(pp) ".";color:#e81f76;font-weight:700;flex:0 0 1.9rem;}
.pp-toc ol ol{padding:0;}
.pp-toc ol ol a{padding:.45rem 1.2rem .45rem 2.8rem;font-size:1.25rem;color:#7a8095;font-weight:400;line-height:1.5;}
.pp-toc a:hover{color:#e81f76;background:#f7f8fc;border-left-color:#f0b6d0;}
.pp-toc a.active{color:#e81f76;background:#fdf3f8;border-left-color:#e81f76;font-weight:600;}
.pp-box{background:#f7f8fc;border:1px solid #e8eaf0;border-radius:1rem;padding:2.4rem 2.8rem;margin:2rem 0;}
.pp-box p{margin-bottom:.6rem;}
.pp-box p:last-child{margin-bottom:0;}
.pp-meta{font-size:1.5rem;color:#555;line-height:1.8;margin-bottom:1.5rem;}
.pp-meta strong{color:#1b2955;}
.pp-copy{margin-top:5rem;padding-top:2.5rem;border-top:1px solid #e8eaf0;font-size:1.35rem;color:#888;text-align:center;}
.pp-mail{font-size:1.6rem;font-weight:600;margin-bottom:1.5rem;}
.pp-notice{border-left:4px solid #e81f76;}
.pp-lead{font-size:1.75rem !important;font-weight:600;color:#1b2955 !important;line-height:1.6 !important;border-left:3px solid #e81f76;padding-left:2rem;margin:2.5rem 0 !important;}
.pp-toc{background:#f7f8fc;border:1px solid #e8eaf0;border-left:4px solid #e81f76;border-radius:1rem;padding:2.4rem 2rem;}
.pp-toc a:hover,.pp-toc a.active{background:transparent;}
.simple-page.pp-page{padding:5rem 2rem 6rem;}
@media(max-width:1100px){
  .pp-layout{grid-template-columns:1fr;gap:0;}
  .pp-side{position:static;max-height:none;overflow:visible;padding-right:0;margin-bottom:4rem;}
  .pp-toc{background:#f7f8fc;border:1px solid #e8eaf0;border-left:4px solid #e81f76;border-radius:1rem;padding:2.4rem 2rem;}
  .pp-toc a{border-left:none;}
  .pp-toc>ol>li>a{padding:.5rem 0;}
  .pp-toc ol ol a{padding:.4rem 0 .4rem 2rem;}
  .pp-toc a:hover,.pp-toc a.active{background:transparent;}
}
@media(max-width:768px){
  .simple-page.pp-page{padding:5rem 2rem 6rem;}
}
/* ── Article extras: callouts, chips, flows, figures, FAQ ── */
    /* Customer questions / self-audit prompts pulled out of the body copy */
    ul.pp-q{list-style:none;padding:0;margin:2rem 0 2.5rem;display:grid;gap:1rem;}
ul.pp-q li{font-size:1.5rem;font-weight:600;color:#1b2955;line-height:1.6;background:#f7f8fc;border:1px solid #e8eaf0;border-left:3px solid #e81f76;border-radius:.8rem;padding:1.4rem 1.8rem;}
/* Chip lists for capabilities, channels, CRM labels */
    ul.pp-chips{list-style:none;padding:0;margin:1.8rem 0 2.5rem;display:flex;flex-wrap:wrap;gap:.9rem;}
ul.pp-chips li{font-size:1.4rem;font-weight:600;color:#1b2955;background:#f4f6fb;border:1px solid #e2e6f0;border-radius:5rem;padding:.9rem 1.8rem;line-height:1.4;}
ul.pp-chips li::before{content:'';display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:#e81f76;margin-right:.9rem;vertical-align:middle;}
ul.pp-chips.alt li::before{background:#1b2955;}
/* Priority / benefit blocks: bold label + explanation */
    .pp-benefits{display:grid;gap:1.4rem;margin:2.2rem 0 2.8rem;}
.pp-benefit{background:#fff;border:1px solid #e8eaf0;border-radius:1rem;padding:2rem 2.2rem;border-left:3px solid #e81f76;}
.pp-benefit strong{display:block;font-size:1.6rem;font-weight:700;color:#1b2955;margin-bottom:.6rem;}
.pp-benefit span{display:block;font-size:1.45rem;color:#555;line-height:1.75;}
/* Sequential workflow written inline: chip → chip → chip */
    .pp-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:2rem 0 2.5rem;padding:2rem;background:#f7f8fc;border:1px solid #e8eaf0;border-radius:1rem;}
.pp-flow span{font-size:1.35rem;font-weight:600;color:#1b2955;background:#fff;border:1px solid #e2e6f0;border-radius:.7rem;padding:.8rem 1.3rem;line-height:1.4;}
.pp-flow i{font-style:normal;color:#e81f76;font-weight:700;font-size:1.5rem;line-height:1;}
.pp-flow.rigid span{color:#7a8095;background:#f0f2f8;}
.pp-flow.rigid i{color:#9aa0b4;}
/* Numbered funnel stages */
    .pp-steps{list-style:none;padding:0;margin:2.2rem 0 2.8rem;display:grid;gap:1.1rem;}
/* .pp-steps prints its own step number in a <b>, so switch off the .prose
   counter that would otherwise render a second number next to it. */
.prose ol.pp-steps{counter-reset:none;}
.prose ol.pp-steps li{padding-left:15px;counter-increment:none;}
.prose ol.pp-steps li::before{content:none;}
.pp-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:start;background:#fff;border:1px solid #e8eaf0;border-radius:1rem;padding:1.7rem 2rem;}
.pp-steps b{font-size:1.5rem;font-weight:800;color:#e81f76;line-height:1.5;font-variant-numeric:tabular-nums;}
.pp-steps strong{display:block;font-size:1.5rem;font-weight:700;color:#1b2955;margin-bottom:.35rem;}
.pp-steps span{display:block;font-size:1.4rem;color:#555;line-height:1.75;}
/* Diagrams */
    .pp-fig{margin:3rem 0;}
.pp-fig svg,.pp-fig img{display:block;width:100%;height:auto;background:#fff;border:1px solid #e8eaf0;border-radius:1rem;}
.pp-fig figcaption{font-size:1.3rem;color:#888;line-height:1.7;margin-top:1.2rem;text-align:center;}
/* FAQ */
    .pp-faq{display:grid;gap:1.4rem;margin:2.5rem 0 1rem;}
.pp-faq-item{background:#f7f8fc;border:1px solid #e8eaf0;border-radius:1rem;padding:2.2rem 2.4rem;}
.pp-faq-item h3{font-size:1.6rem !important;font-weight:700;color:#1b2955;margin:0 0 .9rem !important;}
.pp-faq-item p{font-size:1.45rem;color:#555;line-height:1.8;margin:0;}
.pp-flow{padding:1.5rem;}
@media(max-width:768px){
  .pp-faq-item{padding:1.8rem;}
  .pp-flow{padding:1.5rem;}
  .pp-steps li{padding:1.5rem 1.6rem;gap:1.2rem;}
}
/* ── Article extras: comparison table + question blocks ── */
    .pp-table-wrap{overflow-x:auto;margin:2.5rem 0 3rem;border:1px solid #e8eaf0;border-radius:1rem;}
.pp-table{width:100%;border-collapse:collapse;min-width:560px;background:#fff;border-radius:1rem;overflow:hidden;}
.pp-table th{font-size:1.35rem;font-weight:700;text-align:left;padding:1.6rem 2rem;background:#1b2955;color:#fff;letter-spacing:.02em;}
.pp-table th:last-child{background:#e81f76;}
.pp-table td{font-size:1.45rem;color:#555;line-height:1.7;padding:1.5rem 2rem;border-top:1px solid #eef0f6;vertical-align:top;}
.pp-table td:first-child{color:#7a8095;width:47%;}
.pp-table td:last-child{color:#1b2955;font-weight:600;background:#fdf7fa;}
.pp-table tbody tr:hover td{background:#f7f8fc;}
.pp-table tbody tr:hover td:last-child{background:#fbeef4;}
/* Question prompts pulled out of the body copy */
    ul.pp-q{list-style:none;padding:0;margin:2rem 0 2.5rem;display:grid;gap:1rem;}
@media(max-width:768px){
  .pp-table th{font-size:1.25rem;padding:1.2rem 1.4rem;}
  .pp-table td{font-size:1.35rem;padding:1.2rem 1.4rem;}
}
/* ── Article extras: comparison table, chips, industries, figures, FAQ ── */
    .pp-table-wrap{overflow-x:auto;margin:2.5rem 0 3rem;border:1px solid #e8eaf0;border-radius:1rem;}
/* Customer questions pulled out of the body copy */
    ul.pp-q{list-style:none;padding:0;margin:2rem 0 2.5rem;display:grid;gap:1rem;}
/* A single quoted customer message */
    .pp-msg{font-size:1.7rem !important;font-weight:600;color:#1b2955 !important;line-height:1.6 !important;background:#f7f8fc;border:1px solid #e8eaf0;border-left:3px solid #e81f76;border-radius:.8rem;padding:1.8rem 2.2rem;margin:2rem 0 !important;}
/* Chip lists for capabilities */
    ul.pp-chips{list-style:none;padding:0;margin:1.8rem 0 2.5rem;display:flex;flex-wrap:wrap;gap:.9rem;}
/* Industry / step blocks: bold label + explanation */
    .pp-benefits{display:grid;gap:1.4rem;margin:2.2rem 0 2.8rem;}
/* Numbered getting-started steps */
    .pp-steps{list-style:none;padding:0;margin:2.2rem 0 2.8rem;display:grid;gap:1.1rem;}
@media(max-width:768px){
  .pp-faq-item{padding:1.8rem;}
  .pp-steps li{padding:1.5rem 1.6rem;gap:1.2rem;}
}
/* ── Article extras: comparison table, callouts, figures, FAQ ── */
    .pp-table-wrap{overflow-x:auto;margin:2.5rem 0 3rem;border:1px solid #e8eaf0;border-radius:1rem;}
/* Customer questions / search queries pulled out of the body copy */
    ul.pp-q{list-style:none;padding:0;margin:2rem 0 2.5rem;display:grid;gap:1rem;}
/* Chip lists for signals, schema types, capabilities */
    ul.pp-chips{list-style:none;padding:0;margin:1.8rem 0 2.5rem;display:flex;flex-wrap:wrap;gap:.9rem;}
/* "Benefit" blocks: bold label + explanation */
    .pp-benefits{display:grid;gap:1.4rem;margin:2.2rem 0 2.8rem;}
/* Before / after content examples */
    .pp-swap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.6rem;margin:2rem 0;}
.pp-swap-old,.pp-swap-new{border-radius:1rem;padding:1.8rem 2rem;font-size:1.45rem;line-height:1.6;}
.pp-swap-old{background:#f7f8fc;border:1px solid #e8eaf0;color:#7a8095;}
.pp-swap-new{background:#fdf3f8;border:1px solid #f4cadd;color:#1b2955;font-weight:600;}
.pp-swap-lbl{display:block;font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.7rem;}
.pp-swap-old .pp-swap-lbl{color:#9aa0b4;}
.pp-swap-new .pp-swap-lbl{color:#e81f76;}
.pp-swap-arrow{font-size:2.2rem;color:#e81f76;font-weight:700;line-height:1;}
.pp-swap{grid-template-columns:1fr;gap:1rem;}
@media(max-width:700px){
  .pp-swap{grid-template-columns:1fr;gap:1rem;}
  .pp-swap-arrow{transform:rotate(90deg);justify-self:center;}
}
@media(max-width:768px){
  .pp-faq-item{padding:1.8rem;}
}

/* closing CTA band with a secondary action.
   The band sits on --nw-soft, so this is an outlined button on white rather
   than the light-on-dark treatment the dark CTA sections use. */
.cta-band .cb-acts{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.cta-band .cb-alt{
  background:#fff;color:var(--nw-ink);border:1px solid var(--nw-line);
  padding:1.4rem 2.6rem;border-radius:1rem;text-decoration:none;
  font-size:1.5rem;font-weight:700;white-space:nowrap;
  transition:border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.cta-band .cb-alt:hover{
  color:var(--nw-pink);border-color:var(--nw-pink);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(27,41,85,.10);
}
@media(max-width:768px){
  .cta-band .cb-acts{width:100%;flex-direction:column;align-items:stretch;}
  .cta-band .cb-alt{text-align:center;}
}