/* Landing-page sections below the hero (index.php): divider, features grid,
   how-it-works, CTA band. On the parchment system — tokens from
   tokens-parchment.css. The hero itself lives in landing-intro.css. */

/* DIVIDER */
.section-divider{
  display:flex;align-items:center;gap:1.5rem;
  max-width:800px;margin:0 auto;padding:0 2rem;
}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border-hairline)}
.section-divider span{font-family:var(--font-display);font-size:18px;color:var(--text-muted)}

/* ABOUT / FEATURES */
.features{padding:6rem 2rem;max-width:900px;margin:0 auto}
.features-header{text-align:center;margin-bottom:4rem}
.features-header h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500;color:var(--text-strong);letter-spacing:var(--track-title);margin-bottom:0.75rem}
.features-header p{font-family:var(--font-prose);font-size:17px;font-style:italic;color:var(--text-muted);max-width:480px;margin:0 auto;line-height:1.7}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
/* Frame from .ag-panel --tight in components.css. */
.feature-card{
  padding:1.75rem 1.5rem;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
.feature-card:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm)}
.feature-icon{font-family:var(--font-display);font-size:24px;color:var(--text-faint);margin-bottom:1rem;display:block}
.feature-title{font-family:var(--font-display);font-size:12px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent);margin-bottom:0.6rem}
.feature-desc{font-family:var(--font-prose);font-size:var(--fs-md);color:var(--text-body);line-height:1.65}

/* HOW IT WORKS */
.how{padding:4rem 2rem 6rem;max-width:700px;margin:0 auto}
.how h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500;color:var(--text-strong);letter-spacing:var(--track-title);text-align:center;margin-bottom:3rem}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:1.5rem;padding:1.75rem 0;border-bottom:1px solid var(--border-hairline);position:relative}
.step:last-child{border-bottom:none}
.step-num{font-family:var(--font-display);font-size:28px;font-weight:500;color:var(--text-faint);min-width:40px;line-height:1}
.step-content h3{font-family:var(--font-display);font-size:13px;letter-spacing:var(--track-title);text-transform:uppercase;color:var(--text-accent);margin-bottom:0.5rem}
.step-content p{font-family:var(--font-prose);font-size:var(--fs-md);color:var(--text-body);line-height:1.65}

/* CTA BAND */
.cta-band{
  padding:5rem 2rem;text-align:center;
  border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);
  background:var(--surface-raised);
}
.cta-band h2{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;color:var(--text-strong);letter-spacing:var(--track-title);margin-bottom:0.75rem}
.cta-band p{font-family:var(--font-prose);font-size:17px;font-style:italic;color:var(--text-muted);margin-bottom:2rem}

@media(max-width:560px){
  .features,.how{padding-left:1.25rem;padding-right:1.25rem}
}