/* Industry and guide pages (salons, restaurants, fitness, professional services,
   website costs, Wix vs custom, POPIA checklist) in the ZW look: light page,
   dark rounded cards, Poppins headings, no orange text. Loaded after home.css
   and zw-look.css. Classes are prefixed lp- where they would clash with home.css. */

body.lp main { padding-top: 96px; }
body.lp .lp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px; }
body.lp .lp-wrap > section, body.lp article > section { padding: 36px 0; border-top: 0; }
body.lp h1 { font: 700 clamp(30px, 4.6vw, 52px)/1.08 var(--serif, Poppins, sans-serif); letter-spacing: -.02em; margin: 0 0 14px; color: #141414; }
body.lp h1 em { font-style: normal; text-decoration: underline; text-decoration-color: var(--accent, #ff6a00); text-decoration-thickness: 4px; text-underline-offset: 6px; color: inherit; background: none; -webkit-text-fill-color: currentColor; }
body.lp h2 { font: 700 clamp(22px, 2.8vw, 32px)/1.15 var(--serif, Poppins, sans-serif); letter-spacing: -.01em; margin: 0 0 12px; color: #141414; }
body.lp h3 { font: 600 16px/1.3 var(--serif, Poppins, sans-serif); margin: 0 0 6px; color: #141414; }
body.lp p, body.lp ul { color: #4a4d52; }
body.lp ul { padding-left: 20px; }
body.lp strong { color: #141414; }
body.lp a:not(.btn):not([class*=brand]) { color: #141414; text-decoration-color: rgba(0,0,0,.25); }

/* breadcrumb */
body.lp .bc { font-size: 13px; color: #6b6f76; margin: 0 0 14px; }
body.lp .bc a { color: #141414; }

/* hero: the dark inset card from the home page, without the photo */
body.lp .lp-hero { background: var(--night, #0c0c0b); border-radius: 32px; padding: clamp(32px, 5vw, 64px); color: #fff; border-top: 0; margin-bottom: 8px; }
body.lp .lp-hero p, body.lp .lp-hero .lead { color: rgba(244,241,236,.78); max-width: 640px; font-size: 17px; line-height: 1.6; }
body.lp .lp-hero h1 { color: #fff; }
body.lp .eyebrow { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font: 600 12px/1 var(--sans, Inter, sans-serif); letter-spacing: 0; text-transform: none; margin-bottom: 18px; }
body.lp .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
body.lp .lp-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
body.lp .lead { font-size: 17px; }

/* cards */
body.lp .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
body.lp .lp-card, body.lp .vs-col, body.lp .check { background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 22px; padding: 20px 22px; }
body.lp .lp-card h3, body.lp .vs-col h3, body.lp .lp-card strong, body.lp .vs-col strong, body.lp .check strong, body.lp .check-body strong { color: #fff; }
body.lp .lp-card p, body.lp .vs-col p, body.lp .vs-col li, body.lp .check p, body.lp .check-body p { color: var(--card-muted, #a8a39b); margin: 0; font-size: 14px; line-height: 1.55; }
body.lp .vs-col ul { color: var(--card-muted, #a8a39b); }

/* prices */
body.lp .lp-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
body.lp .lp-price-card { background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 26px; padding: 24px; color: #fff; }
body.lp .lp-price-card p { color: var(--card-muted, #a8a39b); font-size: 14px; line-height: 1.55; margin: 0; }
body.lp .lp-price { font: 700 34px/1.1 var(--serif, Poppins, sans-serif); color: #fff; margin: 10px 0; }
body.lp .lp-pill { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font: 600 12px/1 var(--sans, Inter, sans-serif); text-transform: none; letter-spacing: 0; }

/* FAQ */
body.lp .lp-faq details { background: #fff; border: 1px solid #e6e3dd; border-radius: 18px; padding: 16px 20px; margin-bottom: 8px; }
body.lp .lp-faq summary { font-weight: 600; cursor: pointer; list-style: none; color: #141414; }
body.lp .lp-faq summary::-webkit-details-marker { display: none; }
body.lp .lp-faq summary::after { content: "+"; float: right; color: #141414; font-size: 20px; line-height: 1; }
body.lp .lp-faq details[open] summary::after { content: "−"; }
body.lp .lp-faq details[open] summary { margin-bottom: 10px; }
body.lp .lp-faq p { margin: 0; }

/* related links */
body.lp .related { border-top: 0; }
body.lp .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
body.lp .related-grid a { display: block; padding: 14px 16px; background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 18px; color: #fff !important; text-decoration: none; transition: transform .2s, border-color .2s; }
body.lp .related-grid a:hover { transform: translateY(-2px); border-color: rgba(255,106,0,.55); }
body.lp .related-grid a strong { display: block; color: #fff; margin-bottom: 2px; }
body.lp .related-grid a span { font-size: 12px; color: var(--card-muted, #a8a39b); }

/* guide articles (moved from the pages' inline styles) */
body.lp article { max-width: 780px; margin: 0 auto; }
body.lp article h2 { margin-top: 36px; }
body.lp article p { font-size: 17px; line-height: 1.7; }
body.lp article h3 { font-size: 18px; margin-top: 22px; margin-bottom: 4px; }
body.lp .meta { color: #6b6f76; font-size: 13px; margin-bottom: 28px; }
body.lp .tldr { background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 22px; padding: 22px 24px; margin: 22px 0; color: var(--card-text, #f4f1ec); }
body.lp .tldr p, body.lp .tldr li { color: var(--card-text, #f4f1ec); }
body.lp .tldr strong { color: #fff; }
body.lp table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0; }
body.lp table th, body.lp table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e6e3dd; vertical-align: top; }
body.lp table th { color: #6b6f76; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
body.lp.lp-cost table td:last-child, body.lp.lp-cost table th:last-child { text-align: right; font-weight: 600; color: #141414; white-space: nowrap; }
body.lp blockquote { border-left: 3px solid #141414; padding: 8px 0 8px 20px; margin: 22px 0; color: #4a4d52; font-style: italic; }
body.lp .vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
body.lp .check { margin: 8px 0; display: flex; gap: 12px; align-items: flex-start; }
body.lp .check-num { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #141414; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
body.lp .warn { background: #fff4f2; border: 1px solid #f3c4bc; border-radius: 18px; padding: 16px 20px; margin: 16px 0; color: #8a2a1c; font-size: 15px; }
body.lp .warn strong { color: #6d1f14; }

@media (max-width: 760px) {
  body.lp .grid-3, body.lp .lp-pricing, body.lp .vs-row { grid-template-columns: 1fr; }
  body.lp .lp-hero { border-radius: 24px; }
}
body.lp .lp-wrap > section.lp-hero { padding: clamp(32px, 5vw, 64px); margin-top: 4px; }
body.lp .lp-hero .btn:not(.btn-ghost) { background: var(--accent, #ff6a00); border-color: var(--accent, #ff6a00); color: #fff; }