/* Homepage-only styles for OurPDFPal */

.hero{
  padding:56px 0 28px;
  background:linear-gradient(180deg,#f7faff,transparent);
  border-bottom:1px solid var(--border);
}
.hero-grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns:1.2fr .8fr;
}
.hero h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.1; margin:0 0 10px; font-weight:800; color:var(--ink);
}
.sub{ color:var(--muted); max-width:52ch; margin-bottom:14px; }
.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff;
  border:0; padding:12px 16px; border-radius:10px; font-weight:700; text-decoration:none }
.btn:hover{ background:var(--blue-600) }
.btn-light{ background:#eef3ff; color:var(--blue); }
.btn-light:hover{ background:#e2ebff }

.hero-art{ display:grid; place-items:center }
.doc-card{
  width:280px; height:180px; border-radius:16px; background:#fff;
  border:1px solid var(--border); box-shadow:0 10px 24px rgba(0,0,0,.05);
  position:relative; overflow:hidden;
}
.doc-icon{
  position:absolute; top:18px; left:18px; font-weight:800; color:#6b7cff;
  border:2px solid #6b7cff; border-radius:8px; padding:4px 8px;
}
.doc-lines{
  position:absolute; bottom:16px; left:16px; right:16px; height:70px;
  background:repeating-linear-gradient(#eef1f7 0 8px, transparent 8px 14px);
  border-radius:10px;
}

.ad{ display:grid; place-items:center; color:var(--muted);
  border:1px dashed #cfd6e4; border-radius:12px; background:#fafcff }
.ad-wide{ min-height:90px; margin-top:18px }
.ad-rect{ min-height:250px; margin-top:16px }

/* Sections */
.section{ padding:34px 0 }
h2{ font-size:clamp(20px,3vw,28px); margin:0 0 12px; color:var(--ink) }

/* Tools */
.tools-grid{
  display:grid; gap:12px; grid-template-columns:repeat(4,1fr);
}
.tools-grid.all{ grid-template-columns:repeat(4,1fr) }
.tool-card{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:16px; background:#fff; border:1px solid var(--border); border-radius:12px;
  text-decoration:none; color:var(--ink); transition:.15s ease-in-out;
}
.tool-card:hover{ border-color:#cdd5e3; background:#f8faff; transform:translateY(-1px) }
.tool-ic{ font-size:18px }
.tool-title{ font-weight:700 }
.tool-arrow{ opacity:.6 }

.tools-cta{ margin-top:12px }

/* Why choose us */
.why-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr) }
.card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px }
.muted{ color:var(--muted) }

/* Steps */
.steps{ background:#fff }
.steps-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr) }
.step{ text-align:left }
.step-num{
  width:34px; height:34px; border-radius:999px; background:#e6efff; color:#1f4fff;
  display:grid; place-items:center; font-weight:800; margin-bottom:8px;
}

/* SEO + FAQ */
.seo-grid{
  display:grid; gap:18px; grid-template-columns:1.2fr .8fr
}
.prose{ color:var(--text); line-height:1.7 }
.prose h3{ margin:16px 0 6px }
.faq-list h3{ margin-top:0 }
.faq-list ul{ list-style:none; padding:0; margin:0 }
.faq-list li + li{ margin-top:10px }
.faq-list a{ color:var(--blue); text-decoration:none }
.faq-list a:hover{ text-decoration:underline }

/* Responsive */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr }
  .tools-grid, .tools-grid.all{ grid-template-columns:repeat(2,1fr) }
  .why-grid, .steps-grid, .seo-grid{ grid-template-columns:1fr }
  .doc-card{ width:240px; height:160px }
}
@media (max-width:560px){
  .tools-grid, .tools-grid.all{ grid-template-columns:1fr }
}