/* Webperts blog post styles — consolidated from blog2 + blog3 + blog4. Cached after first visit. */
:root{--white: #ffffff;--off:#f7f6f2;--green:#0DBC14;--green-dark:#008a49;--red:#e63946;--green-mid:#e8fce9;--green-mid:#c3f0c4;--blue:#2563eb;--accent:#0969da;--amber:#f4a261;--dark:#111;--dark2:#1e1e1e;--dark3:#edf0f3;--text:#2d2d2d;--muted:#6b6b6b;--brd:#dfdfdf;--brd-soft:#e8e8e8;--orange:#d1580a;--orange-light:#fff4e8;--orange-mid:#f5c89a}

/* Reading progress bar pinned to top */
#progress-bar{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--green);z-index:9999;transition:width .1s linear}

/* Hero */
.post-hero{padding:130px 0 32px;background:#fff}
.post-hero .container{max-width:1180px}
.post-hero .breadcrumb{justify-content:flex-start;margin-bottom:18px}
.post-hero h1{font-size:clamp(1.85rem,3.6vw,2.5rem);line-height:1.2;font-weight:800;color:var(--dark);margin-bottom:16px;max-width:920px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px 22px;list-style:none;padding:0;margin:0;font-size:.88rem;color:var(--muted)}
.hero-meta li{display:inline-flex;align-items:center;gap:6px;list-style:none}
.hero-meta a{color:var(--muted);font-weight:600;text-decoration:underline;text-decoration-color:#dbdbdb;text-underline-offset:3px}
.hero-meta a:hover{color:var(--green)}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:1.8rem 0;}
.tool-card{border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;background:var(--white);transition:all 0.2s;}
.tool-card:hover{box-shadow:0 6px 24px rgba(0,0,0,0.07);transform:translateY(-2px);border-color:#0cbc18;}
.tool-icon{font-size:1.8rem;margin-bottom:0.8rem;}
.tool-card h4{font-size:0.95rem;font-weight:700;color:var(--brand);margin-bottom:0.5rem;}
.tool-tag{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:0.2rem 0.6rem;border-radius:50px;margin-bottom:0.6rem;}
.tag-free{background:#edf9f0;color:#1a6b3c;}
.tag-third{background: #fcf5e9;color: #785101;}
.tag-cms{background: #eaf5fd;color: #0d5a89;}
.tool-card p{font-size:0.875rem;color:var(--muted);line-height:1.65;}
.pros-box {background: #f0fdf0;border: 1px solid var(--green-mid);}
.cons-box {background: #fff5f5;border: 1px solid #fecaca;}
.pros-box, .cons-box {border-radius: 10px;padding: 20px;}

.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.8rem 0;}
.metric-card{background:var(--off);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;}
.metric-name{font-size:0.9rem;font-weight:700;color:var(--brand);margin-bottom:0.5rem;}
.metric-val{font-size:1.3rem;font-weight:700;color:var(--amber);margin-bottom:0.3rem;}
.metric-desc{font-size:0.8rem;color:var(--muted);line-height:1.5;}

/* Hero image */
.post-feature{max-width:1180px;margin:24px auto 0;padding:0 24px}
.post-feature img{width:100%;height:auto;border-radius:14px;display:block}

/* Article + sidebar layout */
.post-wrap{max-width:1180px;margin:0 auto;padding:48px 24px 72px}
.content-grid{display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:start}
article.post-article{min-width:0}
.post-article > *:first-child{margin-top:0}

/* Sidebar */
.sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:18px}
.sidebar-card{background:#fff;border:1px solid var(--brd);border-radius:14px;overflow:hidden}
.sidebar-card-head{background:var(--dark);color:#fff;padding:13px 18px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.sidebar-card-body{padding:14px 18px}
.progress-ring-wrap{text-align:center;padding:16px}
.progress-pct{font-size:22px;font-weight:700;color:var(--green)}
.progress-ring-label{font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.5px}
.toc-link{display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;font-size:13px;padding:8px 0;border-bottom:1px solid var(--brd);transition:color .2s;line-height:1.4}
.toc-link:last-child{border-bottom:none}
.toc-link:hover,.toc-link.active{color:var(--green)}
.toc-do{width:22px;height:22px;min-width:22px;background:#f3f3f3;color:var(--muted);border-radius:50%;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.toc-link:hover .toc-do,.toc-link.active .toc-do{background:var(--green);color:#fff}
.share-btns{display:flex;flex-direction:column;gap:8px}
.share-btn{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;border:1px solid var(--brd);background:#fff;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s,color .2s}
.share-btn:hover{color:var(--green);border-color:var(--green);background:var(--green-mid)}
.sidebar-card.dark{background:var(--dark);border-color:#333}
.sidebar-card.dark .sidebar-card-head{background:rgba(255,255,255,.06)}
.sidebar-card.dark .sidebar-card-body{text-align:center;padding:20px}
.sidebar-card.dark p{color:rgba(255,255,255,.6);font-size:13px;margin-bottom:14px}
.sidebar-card.dark .phone{color:#999;font-size:14px;margin:10px 0 0}
/* CASE STUDY */
  .case-study::before {content: '"';position: absolute;right: 30px;top: -10px;    font-size: 120px;color: rgba(255,255,255,0.04);line-height: 1;  }
  .case-study-label {background: #10b981;color: #fff;font-size: 11px;font-weight: 500;padding: 4px 12px;border-radius: 20px;letter-spacing: 1px;text-transform: uppercase;display: inline-block;margin-bottom: 16px;  }
  .case-study h3 {font-size: 22px;margin-bottom: 16px;border: none;padding: 0;color: #fff !important;}
  .case-study p {color: rgba(255,255,255,0.7);font-size: 15px;margin-bottom: 12px;  }
  .case-metrics {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;margin-top: 24px;padding-top: 24px;border-top: 1px solid rgba(255,255,255,0.1);  }
  .case-metric { text-align: center; }
  .case-metric-value {    font-size: 28px;font-weight: 700;color: var(--accent2);  }
  .case-metric-label {font-size: 11px;color: rgba(255,255,255,0.5);margin-top: 4px;  }

/* Article body typography */
.post-article p{color:#3a3a3a;font-size:16px;margin-bottom:16px;line-height:1.8}
.post-article h2{font-size:clamp(22px,2.5vw,28px);color:var(--dark);font-weight:700;margin:0 0 14px;line-height:1.25;letter-spacing:-.3px;}
.post-article h3{font-size:18px;font-weight:600;color:var(--dark);margin:28px 0 10px;padding-left:14px;border-left:3px solid var(--green)}
.post-article h4{font-size:16px;font-weight:700;color:var(--dark);}
.post-article h5{font-size:14px;font-weight:700;color:var(--dark);margin:20px 0 8px;text-transform:uppercase;letter-spacing:.05em}
.post-article a{color:white;font-weight:600;text-underline-offset:3px}
.post-article a:hover{color:#0cbc15}
.post-article strong{color:#313131;font-weight:700}
.post-article strong.custm{color:#0cbc15;font-weight:700}
.post-article img{max-width:100%;height:auto;display:block;margin:24px 0;border-radius:10px}
.post-article hr,.post-article hr.article-hr{border:none;height:1px;background:var(--brd);margin:36px 0}
.post-article ul,.post-article ol{margin:14px 0 18px;padding-left:24px}
.post-article ul li, .post-article ol li{line-height:1.4;margin-bottom:6px;color:#3a3a3a;font-size:.9rem}
.post-article ul li{list-style:disc}
.post-article ol li{list-style:decimal}
.post-article blockquote{border-left:3px solid var(--green);padding:6px 0 6px 22px;margin:22px 0;font-style:italic;color:var(--text)}
.post-article small{font-size:11px;color:var(--muted);float:right}
.info-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 16px;margin: 24px 0;}
.info-card {background: var(--white);border: 1px solid var(--border);border-top: 3px solid var(--green);border-radius: 10px;padding: 20px;}
.compare-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;}
.compare-table th{background:var(--dark);color:var(--white);padding:12px 16px;text-align:left;font-weight:600;}
.compare-table th:first-child{border-radius:8px 0 0 0;}
.compare-table th:last-child{border-radius:0 8px 0 0;}
.compare-table td{padding:11px 16px;border-bottom:1px solid var(--border);}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table tr:nth-child(even){background:#f9f9f9;}
.compare-table tr:hover{background:var(--green-mid);}
.badge-yes{color:var(--green);font-weight:600;}
.badge-no{color:#999;font-weight:500;}
.txtgreen{color: #2ab22a !important;}
.txtred{color: #e42727 !important;}
.txtblue{color: #1f88d5 !important;}

.tbl-wrap{overflow-x:auto;margin:24px 0;border-radius:12px;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead tr{background:var(--dark2);color:#fff;}
thead th{padding:12px 16px;text-align:left;font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;}
tbody td{padding:11px 16px;border-bottom:1px solid var(--border);color:#383847;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#f9f9fd;}
.badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;letter-spacing:.5px;text-transform:uppercase;}
.badge.vh{background:#fee2e2;color:#b91c1c;}
.badge.h{background:#fef3c7;color:#b45309;}
.badge.m{background:#dbeafe;color:#1d4ed8;}
.badge.l{background:#d1fae5;color:#065f46;}

.vuln-list{display:flex;flex-direction:column;gap:10px;margin:20px 0;}
.vuln-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px;}
.vuln-icon{width:36px;height:36px;min-width:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.vuln-icon.vh{background:#fee2e2;}
.vuln-icon.h{background:#fef3c7;}
.vuln-icon.m{background:#dbeafe;}
.vuln-icon.l{background:#d1fae5;}
.vuln-label{flex:1;}
.vuln-label strong{font-size:14px;color:var(--dark);display:block;}
.vuln-label span{font-size:12px;color:var(--muted);}
.vuln-bar-wrap{width:120px;}
.vuln-bar{height:6px;border-radius:3px;background:var(--border);}
.vuln-bar-fill{height:100%;border-radius:3px;transition:width 1s ease;}
.vh .vuln-bar-fill{background:var(--red);width:95%;}
.h .vuln-bar-fill{background:var(--amber);width:72%;}
.m .vuln-bar-fill{background:var(--blue);width:48%;}
.l .vuln-bar-fill{background:var(--green);width:22%;}

.pull-quote{background:var(--dark2);border-radius:16px;padding:32px;margin:32px 0;position:relative;overflow:hidden;}
.pull-quote::before{content:'"';position:absolute;right:24px;top:-10px;font-family:'Fraunces',serif;font-size:120px;color:rgba(255,255,255,.04);line-height:1;}
.pull-quote p{font-family:'Fraunces',serif;font-size:20px;color:#fff;font-style:italic;line-height:1.5;margin:0;position:relative;}
.pull-quote cite{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-top:12px;font-style:normal;position:relative;}

/* Section markers (two variants — black circle from blog2, green pill from blog3) */
.section-number{width:30px;height:30px;background:#000;color:#fff;border-radius:50%;font-size:14px;font-weight:700;float:left;display:inline-flex;align-items:center;justify-content:center;margin-top:4px;margin-right:10px}
.section-num{height:30px;background:#0cbc15;color:#000;border-radius:5px;font-size:14px;font-weight:700;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:11px}

.font9rem{font-size:.95rem}

/* Custom lists */
.bloglist{margin:12px 0 18px;padding:0;list-style:none}
.bloglist strong{color: black}
.bloglist li{line-height:1.7;list-style:disc;margin-left:20px;margin-bottom:6px;color:#3a3a3a;font-size:15.5px}
ul.cloud{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;padding:0;list-style:none}
ul.cloud li{background:#f3f1f1;border:1px solid #e7e5e5;border-radius:5px;padding:6px 12px;font-size:13px;color:var(--muted);font-weight:500;list-style:none;margin:0}
ul.cloud li.green{background:#b2f1b5;border-color:#3fd147;color:#0a3a0b}
ul.plain-list{list-style:none;padding:0}
ul.plain-list li{padding:.3rem 0;color:#3d4a5c;font-size:.9rem;display:flex;gap:.6rem;list-style:none}
ul.plain-list li::before{content:'\2192';color:var(--green);font-weight:700;flex-shrink:0}

/* Tables */
.table-wrap{overflow-x:auto;margin:20px 0;border-radius:10px;border:1px solid var(--brd)}
.post-article table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.post-article thead tr{background:var(--dark2);color:#fff}
.post-article thead th{padding:12px 16px;text-align:left;font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.post-article tbody td{padding:11px 16px;border-bottom:1px solid var(--brd);color:#444;vertical-align:top}
.post-article tbody td:first-child{color:#000;font-weight:700}
.post-article tbody tr:last-child td{border-bottom:none}
.post-article tbody tr:hover{background:#fafafa}

/* Stats: blog2 (.stat-value) + blog4 (.stat-val) variants */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0}
.stat-gridx4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.stat-card{background:#fff;border:1px solid var(--brd);border-radius:12px;padding:18px;position:relative;overflow:hidden;text-align:center}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.stat-card.red::before{background:var(--red)}
.stat-card.blue::before{background:var(--blue)}
.stat-card.green::before{background:var(--green)}
.stat-card.amber::before{background:#f59e0b}
.stat-value{font-size:19px;font-weight:700;line-height:1;margin-bottom:4px}
.stat-value.red{color:var(--red)}
.stat-value.amber{color:#f59e0b}
.stat-value.green{color:var(--green)}
.stat-value.blue{color:var(--blue)}
.stat-val{font-size:30px;font-weight:800;color:var(--green);line-height:1.1;margin-bottom:6px}
.stat-label{font-size:13px;color:var(--muted);font-weight:400;line-height:1.4}
.state-card{background:#f7f7f7;border:1px solid #e9e9e9;border-radius:10px;padding:20px 16px;text-align:center}
.state-card .stat-label{font-size:12px;color:#888;line-height:1.5}

/* Blog3-style highlight cards */
.cards-gridx4{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem;margin:1.8rem 0}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin:1.8rem 0}
.card{background:#fff;border:1px solid var(--brd);border-radius:12px;padding:1.3rem 1.4rem;position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--green)}
.card.accent::before{background:var(--accent)}
.card.orange::before{background:var(--orange)}
.card-icon{font-size:1.8rem;margin-bottom:.8rem}
.card h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.4rem}
.card p{font-size:.9rem;color:var(--text);font-weight:500;margin:0}
.card .sub{font-size:.8rem;color:var(--muted);font-weight:400;margin-top:.25rem}

/* App review cards (cricket apps blog) */
.app-card{background:#fff;border:1px solid var(--brd);border-radius:14px;padding:1.6rem 1.8rem;margin-bottom:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.app-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.app-name{font-size:1.2rem;font-weight:800;color:var(--text)}
.app-tagline{font-size:.82rem;color:var(--muted);margin-top:.2rem}
.rating{font-size:.88rem;font-weight:700;color:#b45309}
.app-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem}
.stat{background:#f6f8fa;border-radius:8px;padding:.7rem 1rem;border:1px solid var(--brd)}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.pros,.cons{background:#f6f8fa;border-radius:8px;padding:.9rem 1rem;border:1px solid var(--brd)}
.pros h5{font-size:1.2rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green);margin-bottom:.6rem}
.cons h5{font-size:1.2rem;text-transform:uppercase;letter-spacing:.1em;color:#cf222e;margin-bottom:.6rem}
.pros ul,.cons ul{list-style:none;padding:0;margin:0}
.pros li,.cons li{font-size:.83rem;color:#3d4a5c;padding:.2rem 0;display:flex;gap:.5rem;align-items:flex-start;list-style:none;margin:0}
.pros li::before{content:'\2713';color:var(--green);font-weight:700;flex-shrink:0}
.cons li::before{content:'\2717';color:#cf222e;font-weight:700;flex-shrink:0}

/* Region cards (cricket apps blog) */
.region-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.region-card{background:#fff;border:1px solid var(--brd);border-radius:10px;padding:1.1rem 1.2rem;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.region-flag{font-size:1.5rem;margin-bottom:.5rem}
.region-name{font-weight:700;font-size:.95rem;color:var(--text);margin-bottom:.5rem}
.region-apps{font-size:.82rem;color:var(--muted)}
.region-apps strong{color:var(--green)}

/* Badges (free/premium/freemium for cricket apps + general active state) */
.badge-grid{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.badge{display:inline-block;padding:.2rem .55rem;border-radius:5px;font-size:.6rem;font-weight:600;white-space:nowrap;background:#f7f7f7;color:#555}
.badge.active{background:#eeffef;border-color:#90d490;color:#19a837}
.badge-free{background:#e8f9f1;color:#00703a;border:1px solid #b6e9d2}
.badge-premium{background:#e8f0fd;color:#0550ae;border:1px solid #c5d8fb}
.badge-freemium{background:#fff3e8;color:#92400e;border:1px solid #fcd7aa}

.checklist-block{background:white;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:24px 0;}
.checklist-header{background:var(--dark);color:white;padding:13px 20px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.checklist-item{display:flex;align-items:flex-start;gap:12px;padding:11px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;user-select:none;}
.checklist-item:last-child{border-bottom:none;}
.checklist-item:hover{background:#f9fdf9;}
.check-box{width:18px;height:18px;min-width:18px;border:2px solid var(--green);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:background .15s;}
.checklist-item.done .check-box{background:var(--green);}
.check-box::after{content: "✓";font-size:11px;color:white;display:none;font-weight:700;}
.checklist-item.done .check-box::after{display:block;}
.checklist-item.done .check-label{color:var(--muted);text-decoration:line-through;}
.check-label{font-size:14px;color:var(--text);line-height:1.6;}

.win-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0;}
.win-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;position:relative;overflow:hidden;}
.win-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--green);}
.win-card h4{font-size:1rem;font-weight:600;color:var(--ink);margin:0px 0px 10px 0px;padding-left:14px;}
.win-card p{font-size:13px;color:var(--muted);margin:0;padding-left:14px;line-height:1.5;}

/* Callout boxes (multiple variants) */
.alert-box{background:#fff8f0;border:1px solid rgba(209,88,10,.25);border-left:4px solid #c5642b;border-radius:0 10px 10px 0;padding:1rem 1.3rem;margin:0 0 22px;font-size:.92rem;color:#92400e}
.alert-box p{color:#92400e;margin:0;font-size:.92rem;line-height:1.7}
.alert-box strong{color:#7a3805}
.alertmsg{background:#fce8e8;border-left:4px solid #eb7474;border-radius:0 12px 12px 0;padding:14px 22px;margin-bottom:30px;font-size:15px;color:#7a1a1a;line-height:1.6}
.intro-pull{background:var(--green-mid);border-left:4px solid var(--green);border-radius:0 12px 12px 0;padding:18px 22px;margin-bottom:30px;font-size:15px;color:#1a4a1b;line-height:1.7}
.intro-pull strong{color: black;}
.tip-box{background:var(--green-mid);border:1px solid var(--green-mid);border-radius:10px;padding:16px 20px;margin:20px 0;display:flex;gap:12px;align-items:flex-start}
.tip-box .quote-icon{font-size:18px;flex-shrink:0;line-height:1;margin-top:2px}
.tip-box p{font-size:14px;color:#1a4a1b;line-height:1.65;margin:0}
.tip-box strong{color:#0a3a0b}
.warn-box{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:0 10px 10px 0;padding:14px 18px;margin:20px 0}
.warn-box p{font-size:14px;color:#7c5e10;margin:0;line-height:1.6}
.warning-box{background:#fff2f2;border:1px solid #ffc1c1;border-left:4px solid #cf222e;border-radius:0 10px 10px 0;padding:1.1rem 1.4rem;margin:1.5rem 0;font-size:.9rem;color:#8a0000}
.warning-box strong{color:#cf222e}
.dangr-box{background:#fef2f2;border:1px solid #fecaca;border-left:4px solid #e63946;border-radius:0 10px 10px 0;padding:14px 18px;margin:20px 0;color:#991b1b}
.dangr-box p{font-size:14px;color:#991b1b;margin:6px 0 0;line-height:1.6}
.dangr-box strong{color:#7f1d1d}
.info-box{background:#eef4fd;border:1px solid #c5d8fb;border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:1.1rem 1.4rem;margin:1.5rem 0;font-size:.9rem;color:#0550ae}
.info-box p{font-size:.9rem;color:#0550ae;margin:0;line-height:1.6}
.info-box strong{color:var(--accent)}
.call-box{background:#e8f4fd;border:1px solid #d8e7f2;border-left:4px solid #185fa5;border-radius:0 10px 10px 0;padding:14px 18px;margin:20px 0;color:#185fa5}
.call-box p{font-size:14px;color:#185fa5;margin:0;line-height:1.6}

/* Blog4-style callouts (blue/green/yellow/red/orange variants) */
.callout{border-radius:8px;padding:16px 18px;margin:20px 0;font-size:14px;line-height:1.75}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;display:block}
.callout.blue{background:#eff6ff;border:1px solid #bfdbfe;border-left:3px solid #2563eb;color:#1e3a6e}
.callout.blue .callout-label{color:#2563eb; font-size: .9rem;}
.callout.green{background:#f0fdf4;border:1px solid #bbf7d0;border-left:3px solid #16a34a;color:#14532d}
.callout.green .callout-label{color:#16a34a; font-size: .9rem;}
.callout.yellow{background:#fffbeb;border:1px solid #fde68a;border-left:3px solid #d97706;color:#713f12}
.callout.yellow .callout-label{color:#d97706; font-size: .9rem;}
.callout.red{background:#fff1f1;border:1px solid #fecaca;border-left:3px solid #dc2626;color:#7f1d1d}
.callout.red .callout-label{color:#dc2626; font-size: .9rem;}
.callout.orange{background:var(--orange-light);border:1px solid var(--orange-mid);border-left:3px solid var(--orange);color:#7c2d12}
.callout.orange .callout-label{color:var(--orange); font-size: .9rem;}

/* Step boxes */
.steps-box{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:24px 0;}
.steps-box-header{background:var(--dark);color:var(--white);padding:12px 20px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.steps-box-header span{color:var(--green);}
.step-item{display:flex;align-items:flex-start;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);transition:background .2s;}
.step-item:last-child{border-bottom:none;}
.step-item:hover{background:#f9fdf9;}
.step-num{width:26px;height:26px;min-width:26px;background:var(--green);color:var(--white);border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.step-text{font-size:14px;color:var(--text);line-height:1.6;}
.step-text strong{color:var(--dark);}

/* Checklists */
ul.checklist,.checklist{list-style:none;padding:0;margin:14px 0;border:1px solid var(--brd);border-radius:8px;overflow:hidden;background:#fff}
ul.checklist li,.checklist li{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;font-size:14px;border-bottom:1px solid var(--brd);color:#444;line-height:1.55;margin:0;list-style:none}
ul.checklist li:last-child,.checklist li:last-child{border-bottom:none}
.ci{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:2px}
.ci-pass{background:#ecfaf0;color:#16a149;border:1px solid #bcf9d2}
.ci-warn{background:#fcf8e8;color:#d97706;border:1px solid #fae388}
.ci-fail{background:#fbefef;color:#dd2626;border:1px solid #f9c6c6}

/* Case studies */
.case-study{background:#161616;border:1px solid #e8e8e8;border-radius:12px;padding:24px;margin:26px 0}
.cs-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#21b61d;margin-bottom:6px;display:block}
.case-study h3{margin-top:0;border-left:none;padding-left:0;font-size:1.4rem}
.case-study p{font-size: .9rem;color: gray;margin-bottom: 14px;}
.result-grid{display:flex;flex-wrap:wrap;gap:8px}
.result-chip{background: #4e4e4e;border: 1px solid #848484;border-radius: 5px;padding: 5px 12px;font-size: 12px;font-weight: 600;color: #bdbdbd;}
/* RECOVERY PLAN CARDS */
  .plan-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;margin: 24px 0;  }
  .plan-card {border-radius: 14px;padding: 22px;border: 1px solid var(--border);  }
  .plan-card.quick { background: #f0fdf4; border-color: #bbf7d0; }
  .plan-card.medium { background: #eff6ff; border-color: #bfdbfe; }
  .plan-card.long { background: #fdf4ff; border-color: #e9d5ff; }
  .plan-card-label {font-size: 11px;font-weight: 500;letter-spacing: 1px;text-transform: uppercase;margin-bottom: 10px;  }
  .plan-card.quick .plan-card-label { color: #059669; }
  .plan-card.medium .plan-card-label { color: #2563eb; }
  .plan-card.long .plan-card-label { color: #7c3aed; }
  .plan-card h4 {font-size: 15px;font-weight: 500;margin-bottom: 8px;color: var(--dark);  }
  .plan-card p { font-size: 13px; color: var(--muted); margin: 0; }
/* FAQ accordion */
.faq-wrap{margin:20px 0}
.faq-item{border:1px solid var(--brd);border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff;transition:box-shadow .2s}
.faq-item:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.faq-q{padding:15px 18px;font-size:15px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#fff;color:var(--dark);transition:background .15s;border:none;width:100%;text-align:left;font-family:inherit;gap:12px}
.faq-q:hover{background:#f9fdf9}
.faq-icon{width:24px;height:24px;min-width:24px;border:2px solid var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--green);font-size:14px;font-weight:700;transition:transform .3s,background .2s,color .2s;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--green);color:#fff}
.faq-a{font-size: .9rem;color: gray;padding: 0px 10px 10px 17px;}
.faq-item.open .faq-a{max-height:600px;padding:0 18px 16px}
.faq-a p{font-size:14px;color:var(--muted);margin:0;line-height:1.7}

/* End-of-article CTA */
.cta-block{background:var(--dark);border-radius:16px;padding:36px 28px;text-align:center;margin:44px 0;position:relative;overflow:hidden}
.cta-block::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(13,188,20,.12) 0%,transparent 60%)}
.cta-block h2{font-size:24px;color:#fff;margin-bottom:10px;position:relative}
.cta-block p{color:rgba(255,255,255,.6);font-size:15px;margin-bottom:20px;position:relative}
.cta-btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:13px 28px;border-radius:8px;font-weight:600;font-size:15px;position:relative;transition:opacity .2s,transform .2s,background .2s,color .2s}
.cta-btn:hover{transform:translateY(-2px);background:#fff;color:#000}
.cta-btn2{display:inline-block;margin-top:20px;color:#bbb;text-decoration:none;font-size:14px;position:relative}
.cta-section{background:#000;border-radius:16px;padding:40px;text-align:center;margin:48px auto;position:relative;overflow:hidden;width:100%}
.cta-section h2{font-size:1.9rem;margin-bottom:1rem;color:#fff}
.cta-section p{color:#fff;font-size:.95rem;max-width:560px;margin:0 auto 1.8rem}

/* Back to top button */
#back-top{position:fixed;bottom:90px;right:24px;width:44px;height:44px;background:var(--green);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(13,188,20,.3);opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;z-index:90}
#back-top.show{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:900px){
  .content-grid{grid-template-columns:1fr;gap:32px}
  .sidebar{position:static}
  .stat-grid,.stat-gridx4{grid-template-columns:repeat(2,1fr)}
  .post-hero{padding-top:100px}
  .pros-cons{grid-template-columns:1fr}
}
@media(max-width:520px){
  .stat-grid,.stat-gridx4,.cards-grid{grid-template-columns:1fr}
  .cta-block{padding:24px 18px}
}