/* ==========================================================================
   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.45rem);
    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 .cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.cta-band h2 {
    max-width: 42rem;
    margin: 0;
    font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
    line-height: 1.18;
}

.cta-band .cta-copy {
    width: 100%;
    max-width: 42rem;
    margin: .85rem 0 1.5rem;
    font-size: clamp(.98rem, .93rem + .2vw, 1.08rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.cta-band .cta-content .btn {
    align-self: center;
    margin: 0;
}

/* 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;
    }
}

/* Keep .btn-primary on brand color during active, focus-visible and disabled
   (loading) states — Bootstrap's defaults otherwise repaint the button blue
   when the submit-button spinner sets disabled=true. */
.btn-primary:active,
.btn-primary:focus-visible,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--fh-primary-600) !important;
    border-color: var(--fh-primary-600) !important;
    color: var(--fh-white);
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, .25) !important;
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
    background-color: var(--fh-primary) !important;
    border-color: var(--fh-primary) !important;
    color: var(--fh-white);
    opacity: .8;
    cursor: progress;
    transform: none;
    box-shadow: 0 6px 16px rgba(16, 185, 129, .25);
}

/* Semantic color refinements — loaded after style.css. */
body { color: var(--color-text-primary); }
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); }
p, .section-sub, .feature-card p, .step-card p { color: var(--color-text-muted); }
.hero .lead { color: var(--color-text-secondary); }
.quote-card p { color: var(--color-text-secondary); }
.accordion-button { color: var(--color-text-primary); }
.accordion-body { color: var(--color-text-muted); }
.cta-band p { color: var(--color-button-text); }

.btn-primary:active,
.btn-primary:focus-visible,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-button-text) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}

@media (max-width: 1199.98px) {
    .hero .lead,
    [data-theme="dark"] .hero .lead { color: var(--color-text-secondary) !important; }
    .navbar-toggler,
    .navbar-toggler .bi,
    [data-theme="dark"] .navbar-toggler,
    [data-theme="dark"] .navbar-toggler .bi { color: var(--color-nav-icon) !important; }
}