/* landing.css — shared styles for Paavya marketing landing pages (FAQ, industry,
   competitor). Mirrors the look of index.html / privacy.html. */
:root {
  --brand:#1D6E6B; --brand-dark:#145350; --brand-deeper:#0D3C3A; --brand-mid:#2A8480;
  --brand-light:#EAF4F3; --brand-tint:#F2F9F8;
  --ink:#121A26; --ink-2:#2B323B; --ink-3:#556377; --ink-4:#8896AA; --ink-5:#A6B0BF;
  --surface:#F3F4F7; --surface-card:#FFFFFF; --border:#E1E2E8; --border-sub:#F0F5F9;
  --font:'Manrope',sans-serif;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:20px; --r-f:9999px;
  --shadow-s:0 2px 6px rgba(28,39,49,0.08); --shadow-m:0 4px 20px rgba(28,39,49,0.10);
  --shadow-brand:0 8px 24px rgba(29,110,107,0.22);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:#fff; color:var(--ink-2); -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* Nav */
nav { position:fixed; top:0; left:0; right:0; z-index:200; height:64px; padding:0 48px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow-s); }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:32px; width:auto; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { font-size:14px; font-weight:500; color:var(--ink-3); text-decoration:none;
  padding:8px 14px; border-radius:var(--r-s); transition:background .15s,color .15s; }
.nav-links a:hover { background:var(--surface); color:var(--ink); }
.btn-nav { display:inline-block; background:var(--brand); color:#fff; font-family:var(--font);
  font-weight:700; font-size:14px; padding:10px 20px; border-radius:var(--r-m); border:none;
  cursor:pointer; text-decoration:none; margin-left:8px; transition:background .2s,box-shadow .2s,transform .15s; }
.btn-nav:hover { background:var(--brand-dark); box-shadow:var(--shadow-brand); transform:translateY(-1px); }

/* Hero */
.lp-hero { padding:120px 48px 56px; background:var(--brand-tint); border-bottom:1px solid var(--border); }
.lp-hero-inner { max-width:880px; margin:0 auto; text-align:center; }
.lp-eyebrow { font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--brand); margin-bottom:16px; }
.lp-h1 { font-size:clamp(32px,5vw,50px); font-weight:800; letter-spacing:-0.035em; color:var(--ink); line-height:1.06; margin-bottom:18px; text-wrap:balance; }
.lp-sub { font-size:clamp(16px,2.2vw,19px); line-height:1.65; color:var(--ink-3); max-width:680px; margin:0 auto 28px; text-wrap:pretty; }
.lp-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-primary { display:inline-block; background:var(--brand); color:#fff; font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:var(--r-m); text-decoration:none; transition:background .2s,box-shadow .2s,transform .15s; }
.btn-primary:hover { background:var(--brand-dark); box-shadow:var(--shadow-brand); transform:translateY(-1px); }
.btn-ghost { display:inline-block; background:#fff; color:var(--ink-2); font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:var(--r-m); text-decoration:none; border:1px solid var(--border); transition:all .15s; }
.btn-ghost:hover { border-color:var(--brand-mid); color:var(--brand); }
.lp-trust { font-size:13px; color:var(--ink-4); margin-top:18px; }

/* Sections */
.lp-section { max-width:960px; margin:0 auto; padding:56px 48px; }
.lp-section.alt { background:var(--surface); max-width:none; }
.lp-section.alt .lp-section-inner { max-width:960px; margin:0 auto; }
.lp-h2 { font-size:clamp(24px,3.5vw,32px); font-weight:800; letter-spacing:-0.025em; color:var(--ink); line-height:1.15; margin-bottom:14px; text-wrap:balance; }
.lp-lead { font-size:16.5px; line-height:1.7; color:var(--ink-3); max-width:680px; margin-bottom:28px; text-wrap:pretty; }
.lp-prose p { font-size:15.5px; line-height:1.75; color:var(--ink-3); margin-bottom:14px; max-width:720px; text-wrap:pretty; }
.lp-prose strong { color:var(--ink-2); font-weight:700; }
.lp-prose a { color:var(--brand); font-weight:600; text-decoration:none; }
.lp-prose a:hover { text-decoration:underline; }

/* Feature grid */
.lp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:12px; }
.lp-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-l); padding:24px; box-shadow:var(--shadow-s); }
.lp-card h3 { font-size:17px; font-weight:800; color:var(--ink); margin-bottom:8px; letter-spacing:-0.01em; }
.lp-card p { font-size:14.5px; line-height:1.6; color:var(--ink-3); }

/* Comparison table */
.lp-compare { width:100%; border-collapse:collapse; margin-top:18px; font-size:14.5px; }
.lp-compare th, .lp-compare td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
.lp-compare th { font-weight:800; color:var(--ink); background:var(--brand-tint); }
.lp-compare td:first-child { font-weight:700; color:var(--ink-2); }
.lp-compare .yes { color:var(--brand); font-weight:700; }

/* FAQ */
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:#fff; border:1px solid var(--border); border-radius:var(--r-m); padding:20px 24px; }
.faq-item h3 { font-size:17px; font-weight:800; color:var(--ink); margin-bottom:8px; letter-spacing:-0.01em; }
.faq-item p { font-size:15px; line-height:1.7; color:var(--ink-3); text-wrap:pretty; }
.faq-item p a { color:var(--brand); font-weight:600; text-decoration:none; }

/* CTA band */
.lp-cta { background:var(--brand-deeper); color:#fff; text-align:center; padding:64px 48px; }
.lp-cta h2 { font-size:clamp(26px,3.5vw,34px); font-weight:800; letter-spacing:-0.025em; margin-bottom:12px; color:#fff; }
.lp-cta p { font-size:16px; color:rgba(255,255,255,.78); max-width:560px; margin:0 auto 26px; line-height:1.6; }
.lp-cta .btn-primary { background:#fff; color:var(--brand-deeper); }
.lp-cta .btn-primary:hover { background:var(--brand-light); }

/* Footer */
footer { padding:28px 48px; border-top:1px solid var(--border); }
.footer-inner { max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-left { display:flex; align-items:center; gap:16px; }
.footer-logo img { height:22px; width:auto; }
.footer-copy { font-size:13px; color:var(--ink-5); }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a { font-size:13px; color:var(--ink-4); text-decoration:none; transition:color .15s; }
.footer-links a:hover { color:var(--ink); }

/* Blog index */
.blog-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.blog-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--r-l); padding:26px; box-shadow:var(--shadow-s); text-decoration:none; transition:transform .15s,box-shadow .15s,border-color .15s; }
.blog-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--brand-mid); }
.blog-card .tag { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:10px; }
.blog-card h2 { font-size:19px; font-weight:800; color:var(--ink); line-height:1.25; letter-spacing:-0.02em; margin-bottom:10px; }
.blog-card p { font-size:14.5px; line-height:1.6; color:var(--ink-3); margin-bottom:14px; flex:1; }
.blog-card .meta { font-size:12.5px; color:var(--ink-4); }

/* Article */
.article-head { padding:120px 24px 40px; background:var(--brand-tint); border-bottom:1px solid var(--border); }
.article-head-inner { max-width:760px; margin:0 auto; }
.article-tag { font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--brand); margin-bottom:14px; }
.article-h1 { font-size:clamp(29px,4.4vw,42px); font-weight:800; letter-spacing:-0.03em; color:var(--ink); line-height:1.12; margin-bottom:16px; text-wrap:balance; }
.article-meta { font-size:14px; color:var(--ink-4); font-weight:500; }
.article-body { max-width:720px; margin:0 auto; padding:46px 24px 64px; }
.article-body .lead { font-size:19px; line-height:1.7; color:var(--ink-3); margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid var(--border); text-wrap:pretty; }
.article-body p { font-size:16.5px; line-height:1.8; color:var(--ink-2); margin-bottom:20px; text-wrap:pretty; }
.article-body h2 { font-size:25px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin:44px 0 16px; line-height:1.2; }
.article-body h3 { font-size:19px; font-weight:700; color:var(--ink); margin:30px 0 10px; }
.article-body ul, .article-body ol { margin:6px 0 22px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.article-body ul li { position:relative; padding-left:24px; font-size:16px; line-height:1.7; color:var(--ink-2); }
.article-body ul li::before { content:''; position:absolute; left:3px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--brand-mid); }
.article-body ol { counter-reset:n; }
.article-body ol li { position:relative; padding-left:36px; font-size:16px; line-height:1.7; color:var(--ink-2); counter-increment:n; }
.article-body ol li::before { content:counter(n); position:absolute; left:0; top:1px; width:23px; height:23px; border-radius:50%; background:var(--brand-light); color:var(--brand-dark); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.article-body strong { color:var(--ink); font-weight:700; }
.article-body a { color:var(--brand); font-weight:600; text-decoration:none; }
.article-body a:hover { text-decoration:underline; }
.article-body .pullquote { margin:26px 0; padding:18px 24px; background:var(--brand-tint); border-left:3px solid var(--brand); border-radius:0 var(--r-m) var(--r-m) 0; font-size:17px; line-height:1.6; color:var(--ink); font-weight:500; }
.article-body .note { margin:24px 0; padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-m); font-size:14.5px; line-height:1.6; color:var(--ink-3); }
.article-cta { max-width:720px; margin:8px auto 60px; padding:30px 32px; background:var(--brand-deeper); border-radius:var(--r-l); text-align:center; }
.article-cta h3 { color:#fff; font-size:21px; font-weight:800; margin-bottom:8px; }
.article-cta p { color:rgba(255,255,255,.8); font-size:15px; margin-bottom:18px; }
.article-cta .btn-primary { background:#fff; color:var(--brand-deeper); }

@media (max-width:900px) {
  nav { padding:0 20px; }
  .article-head { padding:100px 20px 32px; }
  .article-body { padding:36px 20px 52px; }
  .blog-list { grid-template-columns:1fr; }
  .nav-links a:not(.btn-nav):not(.nav-login) { display:none; }
  .lp-hero { padding:100px 20px 44px; }
  .lp-section { padding:44px 20px; }
  .lp-cta { padding:52px 20px; }
  footer { padding:24px 20px; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:12px; }
}