/* ============================================================
   WapiGrow — page-specific.css
   Genuinely one-off, page-specific styles — each section below was
   either an embedded <style> block moved out of its .php file
   verbatim, or a page-unique inline style="" extracted into a
   scoped class. None of this is reused elsewhere (checked via grep
   against admin.css/components.css/main.css before naming).
   ============================================================ */

/* ── pricing.php ── */
.pricing-toggle-wrap   { text-align: center; margin-bottom: 1.25rem; }
.pricing-toggle-pill   { display: inline-flex; background: #f3f4f6; border-radius: 10px; padding: 3px; gap: 0; }
.pricing-toggle-active { padding: .6rem 1.2rem; border-radius: 8px; background: #fff; color: #0f1923; box-shadow: 0 1px 4px rgba(0,0,0,.1); font-family: inherit; font-size: .9rem; font-weight: 700; }
.pricing-free-banner   { max-width: 640px; margin: 0 auto 2rem; background: #e7f9ef; border: 1px solid #25D366; border-radius: 12px; padding: 14px 20px; text-align: center; color: #0f5132; font-weight: 600; font-size: .95rem; }
.pricing-save-badge    { font-size: .8rem; color: var(--wg-green); font-weight: 600; margin-top: .15rem; }
.pricing-footnote      { margin-top: 32px; font-size: 0.92rem; }

.comp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 32px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.comp-table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.comp-table th, .comp-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.94rem; }
.comp-table th { background: var(--green-50); color: var(--ink-900); font-weight: 700; }
.comp-table th:not(:first-child), .comp-table td:not(:first-child) { text-align: center; }
.comp-table td:first-child { color: var(--ink-700); }
.comp-table .yes { color: var(--green-600); font-weight: 700; }
.comp-table .no { color: var(--ink-300); }
.comp-table tr:last-child td { border-bottom: none; }
@media (max-width: 720px) { .comp-table { font-size: 0.84rem; } .comp-table th, .comp-table td { padding: 10px 8px; } }

/* ── use-cases.php ── */
.uc-queue-link { color: var(--color-green); font-weight: 600; }
#queue { background: linear-gradient(180deg,#f0fdf4 0%,#ffffff 60%); }
.uc-qvart-orange { background: #fff7ed; }
.uc-qvart-purple { background: #faf5ff; }
.uc-qvart-blue   { background: #eff6ff; }
.uc-qvart-green  { background: #f0fdf4; }
.uc-cta-note { text-align: center; margin-top: 2.25rem; }

#queue .q-hero{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;margin-bottom:3rem}
#queue .q-illus svg{width:100%;height:auto;max-width:440px;display:block;margin:0 auto;filter:drop-shadow(0 18px 40px rgba(15,25,35,.14))}
#queue .q-steps{list-style:none;margin:0;padding:0;counter-reset:qs}
#queue .q-steps li{position:relative;padding:0 0 1.25rem 3.25rem;color:var(--ink-700);font-size:.98rem;line-height:1.6}
#queue .q-steps li:last-child{padding-bottom:0}
#queue .q-steps li strong{color:var(--ink-900)}
#queue .q-steps li::before{counter-increment:qs;content:counter(qs);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--green-600);color:var(--white);font-weight:800;display:flex;align-items:center;justify-content:center}
#queue .q-sub{text-align:center;font-size:1.15rem;font-weight:800;color:var(--ink-900);margin:0 0 1.5rem}
#queue .q-verticals{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
#queue .q-vcard{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:1.4rem;text-align:center;transition:transform .15s,box-shadow .15s}
#queue .q-vcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,25,35,.1)}
#queue .q-vart{position:relative;width:74px;height:74px;border-radius:20px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
#queue .q-vart svg{width:38px;height:38px}
#queue .q-vart .q-tag{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;background:var(--green-600);color:var(--white);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;border:2px solid var(--white)}
#queue .q-vcard h4{font-size:1rem;font-weight:800;color:var(--ink-900);margin:0 0 .4rem}
#queue .q-vcard p{font-size:.86rem;color:var(--color-text-muted);line-height:1.55;margin:0}
@media (max-width:900px){ #queue .q-verticals{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ #queue .q-hero{grid-template-columns:1fr;gap:1.75rem} }
@media (max-width:460px){ #queue .q-verticals{grid-template-columns:1fr} }

/* ── blog/index.php ──
   NOTE: named .bloglist-*/.blogpost-* rather than the more obvious
   .blog-grid/.blog-card/.post-wrap/.post-body/.post-cta/.post-meta —
   pages.css already defines those exact names with DIFFERENT values,
   and features.php actually depends on that pages.css version (it has
   no embedded <style> block of its own to win the cascade). The blog
   pages' own embedded blocks happened to silently outrank pages.css's
   version via source order, so renaming here preserves both: blog
   pages keep rendering exactly as they do today, and features.php's
   existing .blog-grid/.blog-card usage is completely unaffected. */
.bloglist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px;margin-top:1.5rem;}
.bloglist-card{display:flex;flex-direction:column;background:var(--white,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:24px;transition:box-shadow .2s,transform .2s;}
.bloglist-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.08);transform:translateY(-2px);}
.bloglist-card .b-date{font-size:.82rem;color:var(--text-muted,#6b7280);margin-bottom:.5rem;}
.bloglist-card h2{font-size:1.18rem;line-height:1.35;margin:0 0 .6rem;}
.bloglist-card h2 a{color:var(--ink-900,#111);text-decoration:none;}
.bloglist-card h2 a:hover{color:#128C4A;}
.bloglist-card .b-excerpt{font-size:.95rem;line-height:1.6;color:var(--ink-700,#374151);flex:1;}
.bloglist-card .b-more{margin-top:1rem;font-weight:600;color:#128C4A;text-decoration:none;}
.blog-pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin:2.5rem 0;flex-wrap:wrap;}
.blog-pagination a,.blog-pagination span{padding:8px 14px;border-radius:8px;border:1px solid var(--border,#e5e7eb);text-decoration:none;color:var(--ink-800,#1f2937);font-weight:600;font-size:.9rem;}
.blog-pagination .current{background:#25D366;color:#fff;border-color:#25D366;}
.blog-pagination .disabled{opacity:.4;pointer-events:none;}

/* ── blog/template.php (same naming rationale as above) ── */
.blogpost-wrap{max-width:760px;margin:0 auto;padding:0 20px;}
.post-title { font-size: 2rem; line-height: 1.25; }
.blogpost-meta{color:var(--text-muted,#6b7280);font-size:.92rem;margin:.4rem 0 1.6rem;}
.blogpost-body{font-size:1.06rem;line-height:1.75;color:var(--ink-800,#1f2937);}
.blogpost-body h2{font-size:1.5rem;margin:2rem 0 .6rem;}
.blogpost-body h3{font-size:1.18rem;margin:1.5rem 0 .4rem;}
.blogpost-body p{margin:0 0 1rem;}
.blogpost-body ul,.blogpost-body ol{margin:0 0 1.2rem;padding-left:1.4rem;line-height:1.8;}
.blogpost-body li{margin-bottom:.4rem;}
.post-back-link { margin-top: 1.5rem; }
.blogpost-cta{margin:2.4rem 0;padding:24px;background:var(--green-50,#e7f9ef);border:1px solid #25D366;border-radius:14px;text-align:center;}
.blogpost-cta h3{margin:0 0 .4rem;color:#0f5132;}
.blogpost-cta p{margin:0 0 1rem;color:var(--ink-700,#374151);}
.related-section { background: var(--green-50,#f6fef9); padding-top: 2rem; }
.related-heading { font-size: 1.3rem; margin-bottom: .6rem; }
.related-list { line-height: 2; padding-left: 1.2rem; }

/* ── free-whatsapp-audit.php ── */
.audit-wrap{max-width:680px;margin:0 auto;padding:0 20px;}
.audit-head{text-align:center;padding:2.5rem 0 1rem;}
.audit-head h1{font-size:2rem;line-height:1.2;margin:.4rem 0;}
.audit-head p{color:var(--text-muted,#6b7280);font-size:1.05rem;}
.audit-card{background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:28px;box-shadow:0 6px 24px rgba(0,0,0,.05);margin-bottom:3rem;}
.audit-progress{height:8px;background:#eef2f1;border-radius:99px;overflow:hidden;margin-bottom:6px;}
.audit-progress > span{display:block;height:100%;width:0;background:#25D366;transition:width .3s;}
.audit-step-label{font-size:.82rem;color:var(--text-muted,#6b7280);margin-bottom:1.2rem;}
.audit-q{font-size:1.3rem;font-weight:700;margin:0 0 1.2rem;line-height:1.35;}
.audit-opt{display:block;width:100%;text-align:left;padding:14px 18px;margin-bottom:10px;border:2px solid var(--border,#e5e7eb);border-radius:12px;background:#fff;font-size:1rem;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s;}
.audit-opt:hover{border-color:#25D366;background:#f6fef9;}
.audit-back{background:none;border:none;color:var(--text-muted,#6b7280);font-size:.9rem;cursor:pointer;padding:4px 0;}
.audit-field{margin-bottom:14px;}
.audit-field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:4px;}
.audit-field input{width:100%;padding:12px 14px;border:1px solid var(--border,#e5e7eb);border-radius:10px;font-size:1rem;font-family:inherit;}
.audit-fine{font-size:.82rem;color:var(--text-muted,#6b7280);text-align:center;margin-top:.6rem;}
.audit-score-ring{font-size:3.4rem;font-weight:800;color:#25D366;line-height:1;}
.audit-rec{display:flex;flex-direction:column;gap:.3rem;padding:16px 18px;border:1px solid var(--border,#e5e7eb);border-radius:12px;margin-bottom:12px;background:#fbfdfc;}
.audit-rec a{font-weight:600;color:#128C4A;text-decoration:none;}
.audit-final-cta{margin-top:1.6rem;text-align:center;}
.audit-err{color:#b91c1c;font-size:.9rem;margin-top:.4rem;}
.audit-result-center { text-align: center; margin-bottom: 1.4rem; }
.audit-headline-spacing { margin-top: .6rem; }
@media(max-width:600px){.audit-head h1{font-size:1.55rem;}}

/* ── index.php ── */
.u-cycle-visible { color: var(--wg-green); }
.u-cycle-hidden  { color: transparent; }
.hero-audit-teaser { margin-top: .85rem; font-size: .92rem; }
.audit-teaser-link { color: var(--wg-green); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(37,211,102,.5); padding-bottom: 1px; }
.tool-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tool-chip { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #166534; }
.feature-icon-wrap { margin-bottom: 12px; line-height: 1; }
.feature-stat-line { font-size: 14px; color: var(--wg-green); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.star-rating-row { display: inline-flex; gap: 3px; margin-bottom: 16px; }
.final-cta-subtext { color: var(--wg-text-muted); margin: 8px auto 24px; max-width: 520px; }

/* ── pos.php ──
   Note: .pricing-toggle-wrap/.pricing-toggle-pill/.pricing-toggle-active/
   .pricing-save-badge (defined in the "pricing.php" section above) are
   reused here verbatim — pos.php's billing toggle is a byte-for-byte
   copy of pricing.php's. */
.pos-phone-frame { max-width: 320px; margin: 0 auto; }
.pos-invoice-header { background: var(--wg-green); border-radius: 8px; padding: 12px; margin-bottom: 12px; color: #fff; font-size: 13px; }
.pos-invoice-title { font-weight: 700; margin-bottom: 4px; }
.pos-invoice-body { background: var(--wg-off-white); border-radius: 8px; padding: 12px; font-size: 12px; color: var(--wg-text-secondary); }
.pos-invoice-line { display: flex; justify-content: space-between; margin-bottom: 6px; }
.pos-invoice-total { border-top: 1px solid var(--wg-border); margin-top: 8px; padding-top: 8px; display: flex; justify-content: space-between; font-weight: 700; color: var(--wg-text-primary); }
.pos-invoice-actions { margin-top: 10px; display: flex; gap: 8px; }
.pos-feature-desc { font-size: 14px; color: #718096; margin-top: 8px; }
.pos-review-card { padding: 20px; text-align: center; }
.pos-review-name { font-size: 14px; font-weight: 600; }
.pos-review-stars { font-size: 36px; margin-bottom: 12px; }
.pos-footnote { margin-top: 24px; font-size: .92rem; }

/* ── thank-you.php ── */
.ty-hero-section { padding: 80px 0; min-height: 80vh; display: flex; align-items: center; background: var(--off-white); }
.ty-hero-icon { font-size: 64px; margin-bottom: 24px; }
.ty-heading { margin-bottom: 16px; }
.ty-subtext { font-size: 18px; color: #4A5568; margin-bottom: 32px; }
.ty-demo-card { max-width: 400px; margin: 0 auto 32px; text-align: left; }
.ty-signup-card { max-width: 480px; margin: 0 auto 32px; text-align: left; }
.ty-card-heading { margin-bottom: 16px; }
.ty-step-row { display: flex; gap: 14px; margin-bottom: 16px; }
.ty-step-row-last { display: flex; gap: 14px; }
.ty-step-detail { font-size: 14px; color: #718096; }
.ty-share-note { margin-top: 24px; font-size: 14px; color: #718096; }
.ty-share-link { color: #25D366; font-weight: 600; }

/* ── contact.php — nested elements rely on these descendant rules,
   no class needed on the <strong>/<p> themselves ── */
.contact-heading { font-size: 1.5rem; }
.contact-heading-tight { font-size: 1.5rem; margin-bottom: 6px; }
.contact-subtext { font-size: 0.94rem; color: var(--text-muted); margin-bottom: 24px; }
.contact-whatsapp-note { margin-top: 32px; padding: 22px; background: var(--green-50); border-radius: var(--r-lg); border: 1px solid var(--green-100); }
.contact-whatsapp-note strong { color: var(--green-800); display: block; margin-bottom: 6px; }
.contact-whatsapp-note p { font-size: 0.92rem; margin: 0; color: var(--ink-700); }
.contact-form-note { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 0; text-align: center; }

/* ── features.php ── */
.feature-note { margin-top: 1rem; }
.feature-phone-frame { max-width: 380px; margin: 0 auto; }
.features-guides-grid { gap: 1.5rem 2rem; } /* overrides .blog-grid's default gap for this section only */

/* ── 403.php / 404.php / 500.php ── */
.error-code-403 { color: #F6AD55; }
.error-code-500 { color: #FC8181; }
.error-stats-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.error-stat-item { text-align: center; }
.error-stat-label { font-size: 13px; color: #718096; }

/* ── 4xx.php (generic error handler — standalone template, bypasses
   includes/header.php; classes prefixed "ep-" since this page defines
   its own nav/hero/chat-mockup shell and would otherwise collide with
   pages.css's .bubble, layout.css's .chat-time, and the plain
   .error-code used by 403/404/500.php above) ── */
.ep-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(240,253,244,.95), rgba(255,255,255,.98) 42%),
    radial-gradient(circle at top left, rgba(34,197,94,.16), transparent 34%);
}
.ep-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.ep-nav {
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
}
.ep-nav-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ep-nav .logo-img { height: 34px; width: auto; }
.ep-main {
  display: flex;
  align-items: center;
  padding: 64px 0;
}
.ep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: center;
}
.ep-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-dark);
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--r-full);
  padding: 7px 12px;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 22px;
}
.ep-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}
.ep-title {
  max-width: 720px;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  letter-spacing: 0;
  margin-bottom: 18px;
}
.ep-copy {
  max-width: 620px;
  color: var(--ink-600);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 30px;
}
.ep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}
.ep-quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 10px;
}
.ep-quick-links a {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: rgba(255,255,255,.75);
  color: var(--ink-700);
  font-weight: 650;
  font-size: .92rem;
}
.ep-quick-links a:hover {
  border-color: var(--green-200);
  color: var(--primary-dark);
  background: var(--green-50);
}
.ep-phone-card {
  background: #0f1923;
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 24px 64px rgba(15,25,35,.22);
  border: 1px solid rgba(255,255,255,.08);
}
.ep-phone-screen {
  background: #eaf7ef;
  min-height: 520px;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.ep-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15,25,35,.08);
  margin-bottom: 22px;
}
.ep-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
}
.ep-chat-name { font-weight: 800; color: var(--ink-900); }
.ep-chat-status { font-size: .76rem; color: var(--ink-500); }
.ep-bubble {
  max-width: 86%;
  border-radius: 18px;
  padding: 13px 15px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.ep-bubble.in {
  background: #fff;
  border-bottom-left-radius: 4px;
  color: var(--ink-800);
}
.ep-bubble.out {
  margin-left: auto;
  background: #dcf8c6;
  border-bottom-right-radius: 4px;
  color: var(--ink-800);
}
.ep-status-code {
  font-size: 4.8rem;
  line-height: .95;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: 0;
}
.ep-status-code span { color: var(--color-green); }
.ep-chat-time {
  display: block;
  margin-top: 7px;
  font-size: .72rem;
  color: var(--ink-400);
  text-align: right;
}
.ep-footer {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  color: var(--ink-500);
  font-size: .86rem;
  background: rgba(255,255,255,.76);
}
.ep-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .ep-grid { grid-template-columns: 1fr; gap: 34px; }
  .ep-phone-card { max-width: 420px; width: 100%; }
  .ep-main { padding: 44px 0; }
}
@media (max-width: 520px) {
  .ep-nav-inner { height: 64px; }
  .ep-nav .btn { display: none; }
  .ep-quick-links { grid-template-columns: 1fr; }
  .ep-phone-screen { min-height: 430px; }
  .ep-status-code { font-size: 4rem; }
}