/* ==========================================================================
   Polish — typography refinements + scroll-reveal animations
   Layers on top of style.css. Keeps existing colors & design intact.
   ========================================================================== */

/* ---------- Typography refinements ---------- */
body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--fh-ink);
    text-rendering: optimizeLegibility;
}

p {
    line-height: 1.7;
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.03em; }

/* Hero text refinement */
.hero h1 {
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.hero .lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--fh-ink-2);
    max-width: 580px;
    font-weight: 400;
}

.hero .eyebrow {
    margin-bottom: 1.5rem;
    font-size: .78rem;
}

/* Section headings */
.section-eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(1.85rem, 3.2vw, 2.65rem);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 1rem !important;
}

.section-sub {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--fh-muted);
    max-width: 640px;
    margin: 0 auto;
}

/* Feature cards — better contrast */
.feature-card h5 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .65rem;
}

.feature-card p {
    color: var(--fh-muted);
    font-size: .95rem;
    line-height: 1.65;
}

/* Step cards */
.step-card h5 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .65rem;
}

.step-card p {
    font-size: .95rem;
    line-height: 1.65;
}

/* Quote cards */
.quote-card p {
    font-size: 1.0rem;
    line-height: 1.7;
    color: var(--fh-ink-2);
    font-weight: 400;
}

.quote-author .name {
    font-size: .95rem;
}

/* Pricing card text */
.price-card h5 {
    font-size: 1.2rem;
    font-weight: 700;
}

.feat-list li {
    font-size: .92rem;
    line-height: 1.5;
}

/* FAQ accordion */
.accordion-button {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--fh-ink);
    padding: 1.15rem 1.25rem;
}

.accordion-body {
    color: var(--fh-muted);
    line-height: 1.7;
    font-size: .98rem;
    padding: 0 1.25rem 1.25rem;
}

/* CTA */
.cta-band h2 {
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: .65rem;
}

.cta-band p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* Footer headings + spacing */
footer h6 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 1.15rem;
    letter-spacing: .015em;
}

footer p, footer li, footer .footer-bottom { font-size: .92rem; line-height: 1.65; }

/* Buttons — slightly more polished */
.btn-lg {
    font-size: 1rem;
    padding: .85rem 1.5rem;
    border-radius: 12px;
}

/* Trust chips */
.trust-chip {
    font-size: .82rem;
    padding: .55rem 1rem;
}

/* Section padding refinement on small screens */
@media (max-width: 768px) {
    section { padding: 4.25rem 0; }
    .hero { padding: 5.5rem 0 3.5rem; }
}

/* ---------- Scroll-reveal animations ----------
   Drives by JS: when [data-reveal] enters viewport, the .is-visible
   class is added. The reveal direction is set via data-reveal value.
   ---------------------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
    transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="fade-up"]    { transform: translate3d(0, 28px, 0); }
[data-reveal="fade-down"]  { transform: translate3d(0, -28px, 0); }
[data-reveal="fade-left"]  { transform: translate3d(28px, 0, 0); }
[data-reveal="fade-right"] { transform: translate3d(-28px, 0, 0); }
[data-reveal="fade"]       { transform: none; }
[data-reveal="zoom-in"]    { transform: scale(.94); }

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}