/* ===== Scoped article styles: everything lives under .pt-article so it drops into the site template ===== */
.pt-article{
  --pt-red:#b5223b; --pt-red-dark:#931a2f; --pt-red-soft:#fbe9ec;
  --pt-ink:#141a2e; --pt-body:#4a5168; --pt-muted:#6b7288;
  --pt-line:#ececf2; --pt-bg:#ffffff; --pt-tint:#fdf6f7;
  --pt-radius:18px; --pt-shadow:0 10px 30px rgba(20,26,46,.08);
  --pt-serif:"Lora",Georgia,"Times New Roman",serif;
  --pt-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-family:var(--pt-sans); color:var(--pt-body); background:var(--pt-bg);
  line-height:1.7; font-size:17px;
}
.pt-article *{box-sizing:border-box}
.pt-article a{color:var(--pt-red); text-decoration:none; font-weight:600}
.pt-article a:hover{text-decoration:underline}
.pt-wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* Hero */
.pt-hero{background:radial-gradient(1200px 500px at 15% 0%,#fdeef1 0%,rgba(253,238,241,0) 60%),linear-gradient(180deg,#faf7fb 0%,#fff 100%); padding:64px 0 40px; text-align:center}
.pt-eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--pt-red-soft); color:var(--pt-red); font-weight:700; padding:10px 20px; border-radius:999px; font-size:15px}
.pt-hero h1{font-family:var(--pt-serif); color:var(--pt-ink); font-size:clamp(32px,5vw,56px); line-height:1.12; margin:22px auto 18px; max-width:900px}
.pt-hero h1 span{color:var(--pt-red)}
.pt-hero p.pt-lead{font-size:clamp(17px,2vw,20px); color:var(--pt-muted); max-width:820px; margin:0 auto}
.pt-meta{margin-top:18px; font-size:14px; color:var(--pt-muted)}

/* Stat strip */
.pt-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:36px auto 0; max-width:960px}
.pt-stat{display:block; background:#fff; border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:18px 14px; box-shadow:var(--pt-shadow); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease}
.pt-stat b{display:block; font-family:var(--pt-serif); color:var(--pt-red); font-size:26px; line-height:1.2}
.pt-stat span{font-size:14px; color:var(--pt-muted)}
a.pt-stat{background:var(--pt-red-soft); border-color:#f0c3cb}
a.pt-stat b{font-weight:800}
a.pt-stat span{color:var(--pt-red); font-weight:600}
a.pt-stat em{display:block; font-style:normal; font-size:12px; color:var(--pt-red-dark); font-weight:700; margin-top:2px}
a.pt-stat:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(181,34,59,.22); border-color:var(--pt-red); text-decoration:none}

/* Layout */
.pt-layout{display:grid; grid-template-columns:280px 1fr; gap:44px; padding:48px 0 24px}
.pt-layout > *{min-width:0}
.pt-toc{position:sticky; top:24px; align-self:start; background:#fff; border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:22px; box-shadow:var(--pt-shadow)}
.pt-toc h4{margin:0 0 12px; color:var(--pt-ink); font-size:15px; text-transform:uppercase; letter-spacing:.06em}
.pt-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.pt-toc li{counter-increment:toc; margin:0}
.pt-toc a{display:flex; gap:10px; padding:7px 0; color:var(--pt-body); font-weight:500; font-size:15px; line-height:1.4}
.pt-toc a::before{content:counter(toc,decimal-leading-zero); color:var(--pt-red); font-weight:700; min-width:22px}
.pt-toc a:hover{color:var(--pt-red); text-decoration:none}
.pt-toc .pt-btn{margin-top:14px; width:100%; justify-content:center}

/* Content */
.pt-content h2{font-family:var(--pt-serif); color:var(--pt-ink); font-size:clamp(26px,3vw,34px); line-height:1.25; margin:56px 0 16px; scroll-margin-top:24px}
.pt-content h2:first-child{margin-top:0}
.pt-content h3{color:var(--pt-ink); font-size:21px; margin:32px 0 10px}
.pt-content p{margin:0 0 16px}
.pt-content ul,.pt-content ol{padding-left:22px; margin:0 0 18px}
.pt-content li{margin-bottom:8px}
.pt-content strong{color:var(--pt-ink)}

/* Callouts */
.pt-callout{border-radius:var(--pt-radius); padding:20px 22px; margin:24px 0; border:1px solid var(--pt-line); background:var(--pt-tint)}
.pt-callout.red{background:var(--pt-red-soft); border-color:#f3cdd4}
.pt-callout.dark{background:var(--pt-ink); color:#e6e8f0; border:0}
.pt-callout.dark strong{color:#fff}
.pt-callout h4{margin:0 0 8px; color:var(--pt-ink); font-size:17px}
.pt-callout.dark h4{color:#fff}
.pt-callout p:last-child,.pt-callout ul:last-child{margin-bottom:0}

/* Tables */
.pt-table-wrap{overflow-x:auto; margin:20px 0 24px; border:1px solid var(--pt-line); border-radius:var(--pt-radius); box-shadow:var(--pt-shadow)}
.pt-content table{width:100%; border-collapse:collapse; background:#fff; font-size:15.5px; min-width:560px}
.pt-content caption{caption-side:top; text-align:left; padding:14px 18px 0; font-style:italic; color:var(--pt-muted); font-size:14px}
.pt-content th{background:#faf7f8; color:var(--pt-ink); text-align:left; padding:13px 18px; font-weight:700; border-bottom:1px solid var(--pt-line)}
.pt-content td{padding:13px 18px; border-bottom:1px solid var(--pt-line); vertical-align:top}
.pt-content tr:last-child td{border-bottom:0}
.pt-date{white-space:nowrap; font-weight:700; color:var(--pt-red)}

/* Steps */
.pt-steps{list-style:none; padding:0; margin:20px 0; counter-reset:step}
.pt-steps li{counter-increment:step; position:relative; background:#fff; border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:20px 22px 18px 76px; margin-bottom:14px; box-shadow:var(--pt-shadow)}
.pt-steps li::before{content:counter(step); position:absolute; left:20px; top:20px; width:40px; height:40px; border-radius:12px; background:var(--pt-red); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center}
.pt-steps h4{margin:0 0 6px; color:var(--pt-ink); font-size:18px}
.pt-steps p{margin:0}

/* Cards */
.pt-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:22px 0}
.pt-card{display:block; background:#fff; border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:20px; box-shadow:var(--pt-shadow); transition:transform .15s, border-color .15s}
.pt-card:hover{transform:translateY(-2px); border-color:#f0c3cb; text-decoration:none}
.pt-card b{display:block; color:var(--pt-ink); font-size:17px; margin-bottom:4px}
.pt-card span{display:block; color:var(--pt-muted); font-weight:400; font-size:15px; line-height:1.5}
.pt-card em{display:inline-block; margin-top:10px; font-style:normal; color:var(--pt-red); font-weight:700; font-size:15px}

/* Feature grid */
.pt-features{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0}
.pt-feature{background:#fff; border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:18px; box-shadow:var(--pt-shadow)}
.pt-feature .ico{width:38px; height:38px; border-radius:11px; background:var(--pt-red-soft); color:var(--pt-red); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:10px}
.pt-feature b{display:block; color:var(--pt-ink); margin-bottom:4px}
.pt-feature span{font-size:15px; color:var(--pt-muted); line-height:1.5; display:block}

/* Buttons */
.pt-btn{display:inline-flex; align-items:center; gap:8px; background:var(--pt-red); color:#fff !important; padding:13px 24px; border-radius:12px; font-weight:700; box-shadow:0 8px 18px rgba(181,34,59,.25)}
.pt-btn:hover{background:var(--pt-red-dark); text-decoration:none}
.pt-btn.ghost{background:#fff; color:var(--pt-red) !important; border:1.5px solid #f0c3cb; box-shadow:none}
.pt-cta{background:linear-gradient(135deg,#b5223b 0%,#8f1a30 100%); color:#fbe9ec; border-radius:24px; padding:36px 32px; margin:40px 0; text-align:center}
.pt-cta h3{font-family:var(--pt-serif); color:#fff; font-size:clamp(24px,3vw,30px); margin:0 0 10px}
.pt-cta p{max-width:640px; margin:0 auto 20px; color:#fbe9ec}
.pt-cta .pt-btn{background:#fff; color:var(--pt-red) !important; box-shadow:none}
.pt-cta .pt-btn.ghost{background:transparent; color:#fff !important; border-color:rgba(255,255,255,.5)}
.pt-cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Checklist */
.pt-check{list-style:none; padding:0}
.pt-check li{position:relative; padding-left:34px}
.pt-check li::before{content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px; background:var(--pt-red-soft); color:var(--pt-red); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center}
.pt-flag li::before{content:"!"}

/* FAQ */
.pt-faq details{background:#fff; border:1px solid var(--pt-line); border-radius:14px; padding:16px 20px; margin-bottom:10px}
.pt-faq summary{cursor:pointer; font-weight:700; color:var(--pt-ink); list-style:none; position:relative; padding-right:28px}
.pt-faq summary::-webkit-details-marker{display:none}
.pt-faq summary::after{content:"+"; position:absolute; right:0; top:-2px; color:var(--pt-red); font-size:22px; font-weight:700}
.pt-faq details[open] summary::after{content:"–"}
.pt-faq details p{margin:12px 0 0}

/* Sources & disclaimers */
.pt-sources{font-size:15px}
.pt-sources li{margin-bottom:6px}
.pt-disclaimer{font-size:14px; color:var(--pt-muted); border-top:1px solid var(--pt-line); padding-top:22px; margin-top:44px}
.pt-disclaimer p{margin:0 0 10px}

/* WhatsApp */
.pt-wa-btn{display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff !important; padding:13px 22px; border-radius:12px; font-weight:700; box-shadow:0 8px 18px rgba(37,211,102,.28)}
.pt-wa-btn:hover{background:#1ebe5a; text-decoration:none}
.pt-wa-btn svg{width:20px; height:20px; flex:0 0 auto}
.pt-wa-box{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:#f1fbf5; border:1px solid #cdeedb; border-radius:var(--pt-radius); padding:22px 24px; margin:28px 0}
.pt-wa-box h4{margin:0 0 4px; color:var(--pt-ink); font-size:18px}
.pt-wa-box p{margin:0; font-size:15.5px}
/* WhatsApp popup (bottom-left) */
.pt-wa-pop{position:fixed; left:20px; bottom:20px; z-index:9999; font-family:var(--pt-sans)}
.pt-wa-launch{width:60px; height:60px; border-radius:50%; border:0; cursor:pointer; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.2); position:relative}
.pt-wa-launch:hover{background:#1ebe5a}
.pt-wa-launch svg{width:32px; height:32px}
.pt-wa-launch .dot{position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:var(--pt-red); border:2px solid #fff; font-size:10px; font-weight:700; line-height:12px; text-align:center}
.pt-wa-card{position:absolute; left:0; bottom:76px; width:320px; max-width:calc(100vw - 40px); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 18px 44px rgba(20,26,46,.22); opacity:0; transform:translateY(10px) scale(.98); pointer-events:none; transition:opacity .2s, transform .2s}
.pt-wa-pop.open .pt-wa-card{opacity:1; transform:none; pointer-events:auto}
.pt-wa-head{background:#075E54; color:#fff; padding:16px 44px 16px 16px; position:relative; display:flex; gap:12px; align-items:center}
.pt-wa-avatar{width:42px; height:42px; border-radius:50%; background:#fff; color:var(--pt-red); font-family:var(--pt-serif); font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.pt-wa-head b{display:block; font-size:16px; line-height:1.3}
.pt-wa-head span{font-size:13px; opacity:.85}
.pt-wa-head{padding-right:84px}
.pt-wa-ctrls{position:absolute; right:10px; top:10px; display:flex; gap:6px}
.pt-wa-min,.pt-wa-close{width:28px; height:28px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.pt-wa-min:hover,.pt-wa-close:hover{background:rgba(255,255,255,.3)}
.pt-wa-body{background:#ECE5DD; padding:16px}
.pt-wa-bubble{background:#fff; border-radius:0 12px 12px 12px; padding:12px 14px; font-size:14.5px; color:var(--pt-ink); line-height:1.5; box-shadow:0 1px 1px rgba(0,0,0,.08)}
.pt-wa-bubble p{margin:0 0 8px}
.pt-wa-bubble p:last-child{margin:0}
.pt-wa-opts{padding:12px 16px 16px; display:grid; gap:8px}
.pt-wa-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border:1px solid var(--pt-line); border-radius:12px; color:var(--pt-ink) !important; font-weight:600; font-size:14.5px}
.pt-wa-opt:hover{border-color:#25D366; background:#f1fbf5; text-decoration:none}
.pt-wa-opt i{font-style:normal; color:#25D366; font-weight:700}
.pt-wa-start{display:flex; align-items:center; justify-content:center; gap:8px; margin:0 16px 16px; padding:12px; border-radius:12px; background:#25D366; color:#fff !important; font-weight:700}
.pt-wa-start:hover{background:#1ebe5a; text-decoration:none}
.pt-wa-start svg{width:20px; height:20px}
.pt-toc .pt-wa-btn{margin-top:10px; width:100%; justify-content:center}

/* Responsive */
@media (max-width:960px){
  .pt-layout{grid-template-columns:1fr; gap:24px}
  .pt-toc{position:static}
  .pt-features{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pt-article{font-size:16px}
  .pt-hero{padding:44px 0 28px}
  .pt-stats{grid-template-columns:1fr 1fr}
  .pt-cards,.pt-features{grid-template-columns:1fr}
  .pt-steps li{padding-left:68px}
  .pt-cta{padding:28px 20px}
}
/* FAQ-page extras */
.pt-answer{max-width:860px; margin:28px auto 0; background:#fff; border:1px solid var(--pt-line); border-left:5px solid var(--pt-red); border-radius:var(--pt-radius); padding:20px 24px; text-align:left; box-shadow:var(--pt-shadow)}
.pt-answer b{display:block; color:var(--pt-red); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.pt-answer p{margin:0; color:var(--pt-ink); font-size:17.5px}
.pt-crumbs{font-size:14px; color:var(--pt-muted); margin-bottom:14px}
.pt-crumbs a{font-weight:500}
.pt-faq details[open]{border-color:#f0c3cb}
.pt-faq details ol,.pt-faq details ul{margin:10px 0 0}
.pt-template{background:#faf7f8; border:1px dashed #e6c2c9; border-radius:14px; padding:16px 18px; font-size:15px; color:var(--pt-ink); white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; margin:12px 0 0}
.pt-related{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0}
@media (max-width:640px){ .pt-related{grid-template-columns:1fr} }

/* ===== Site-template accommodation ===== */
html{scroll-behavior:smooth}
/* Prevent sideways scrolling on phones (grid children can overflow otherwise) */
.pt-layout > *{min-width:0}
/* #stickyHeader becomes fixed (~80px) via .slideUp on desktop scroll — keep TOC and
   anchor targets clear of it. */
.pt-toc{top:96px}
.pt-content h2{scroll-margin-top:96px}

/* WhatsApp popup: bottom-right + compact (site override of the base bottom-left styles).
   right:80px keeps it clear of the #progress back-to-top button at bottom:20px right:20px. */
.pt-wa-pop{left:auto; right:80px}
.pt-wa-launch{width:48px; height:48px; box-shadow:0 8px 20px rgba(0,0,0,.2)}
.pt-wa-launch svg{width:26px; height:26px}
.pt-wa-launch .dot{top:1px; right:1px; width:14px; height:14px; font-size:9px; line-height:10px}
.pt-wa-card{left:auto; right:0; bottom:62px; width:272px; border-radius:16px; box-shadow:0 14px 36px rgba(20,26,46,.22)}
.pt-wa-head{padding:12px 70px 12px 14px; gap:10px}
.pt-wa-avatar{width:34px; height:34px; font-size:15px}
.pt-wa-head b{font-size:14px}
.pt-wa-head span{font-size:12px}
.pt-wa-ctrls{right:8px; top:8px; gap:5px}
.pt-wa-min,.pt-wa-close{width:24px; height:24px; font-size:16px}
.pt-wa-body{padding:12px}
.pt-wa-bubble{border-radius:0 10px 10px 10px; padding:10px 12px; font-size:13px}
.pt-wa-opts{padding:10px 12px 12px; gap:7px}
.pt-wa-opt{padding:9px 12px; border-radius:10px; font-size:13px}
.pt-wa-start{margin:0 12px 12px; padding:10px; border-radius:10px; font-size:13.5px}
.pt-wa-start svg{width:18px; height:18px}