/* ═══════════════════════════════════════════════════════════
   features.css — layout for the dedicated SEO feature pages.
   Reuses the palette + navbar/footer/buttons from landing.css;
   this file only adds the long-form article styling.
   ═══════════════════════════════════════════════════════════ */

.fp-hero{
  position:relative;overflow:hidden;
  padding:140px 0 70px;
  border-bottom:1px solid var(--border);
}
.fp-hero .hero-bg{position:absolute;inset:0;z-index:0}
.fp-hero .container{position:relative;z-index:1}
.fp-breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.82rem;color:var(--text-4);margin-bottom:22px;
}
.fp-breadcrumb a{color:var(--text-3);text-decoration:none}
.fp-breadcrumb a:hover{color:var(--accent-bright)}
.fp-breadcrumb span{color:var(--text-4)}
.fp-hero h1{
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;
  letter-spacing:-.02em;max-width:18ch;margin-bottom:20px;
}
.fp-lead{
  font-size:1.1rem;line-height:1.7;color:var(--text-3);
  max-width:60ch;margin-bottom:30px;
}
.fp-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Article body */
.fp-body{padding:64px 0}
.fp-wrap{max-width:760px;margin:0 auto}
.fp-section + .fp-section{margin-top:52px}
.fp-section h2{
  font-size:1.6rem;letter-spacing:-.01em;margin-bottom:16px;
}
.fp-section h3{font-size:1.12rem;margin:26px 0 8px}
.fp-section p{
  font-size:1rem;line-height:1.8;color:var(--text-3);margin-bottom:14px;
}
.fp-section ul{list-style:none;padding:0;margin:14px 0}
.fp-section li{
  position:relative;padding-left:30px;margin-bottom:12px;
  font-size:1rem;line-height:1.7;color:var(--text-3);
}
.fp-section li::before{
  content:"";position:absolute;left:0;top:9px;
  width:16px;height:16px;border-radius:5px;
  background:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.fp-section strong{color:var(--text-2);font-weight:600}

/* Callout card */
.fp-callout{
  margin:30px 0;padding:24px 26px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border-strong);
}
.fp-callout p{margin:0;color:var(--text-2)}

/* Steps inside an article */
.fp-steps{display:grid;gap:14px;margin:22px 0}
.fp-step{
  display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start;
  padding:18px 20px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);
}
.fp-step-n{
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.1rem;
  background:var(--accent-soft);color:var(--accent-bright);
}
.fp-step h3{margin:0 0 4px;font-size:1.02rem}
.fp-step p{margin:0;font-size:.92rem;color:var(--text-3)}

/* FAQ */
.fp-faq{display:grid;gap:12px;margin-top:20px}
.fp-faq details{
  border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2);padding:0;overflow:hidden;
}
.fp-faq summary{
  cursor:pointer;list-style:none;padding:18px 20px;
  font-weight:600;font-size:1rem;color:var(--text-1);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.fp-faq summary::-webkit-details-marker{display:none}
.fp-faq summary::after{content:"+";font-size:1.3rem;color:var(--accent-bright);font-weight:400}
.fp-faq details[open] summary::after{content:"–"}
.fp-faq details p{padding:0 20px 18px;margin:0;color:var(--text-3);line-height:1.7;font-size:.95rem}

/* Related features */
.fp-related{padding:60px 0;border-top:1px solid var(--border);background:var(--surface-1)}
.fp-related h2{text-align:center;font-size:1.5rem;margin-bottom:28px}
.fp-related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1000px;margin:0 auto;
}
@media(max-width:860px){.fp-related-grid{grid-template-columns:repeat(2,1fr);max-width:640px}}
@media(max-width:520px){.fp-related-grid{grid-template-columns:1fr;max-width:380px}}
.fp-related-card{
  display:block;text-decoration:none;color:inherit;
  padding:20px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);
  transition:all .2s ease;
}
.fp-related-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.fp-related-card strong{display:block;font-size:.98rem;color:var(--text-1);margin-bottom:6px}
.fp-related-card span{font-size:.85rem;color:var(--text-4);line-height:1.5}

/* Final CTA reuse cta-section from landing.css */
@media(max-width:768px){
  .fp-hero{padding:120px 0 54px}
  .fp-body{padding:48px 0}
}