/* ============================================================
   LawnBeast V2 — FEATURE DETAIL pages
   /features/<slug>, rendered by views.features_index into
   home_pages/features/index.html inside a .prose wrapper on
   base.html (v1 Bootstrap shell — NOT base_public_v2).

   Everything is scoped under .fd and self-sufficient: this file
   is linked from the fragment itself, so it must not assume any
   V2 token file is present. It falls back to the greens
   features/index.html declares on :root.

   This replaces the beast-forms.html approach of inlining ~800
   lines of <style> into the fragment. New feature pages link
   this file and use these classes; they do not ship their own
   <style> block.

   MOBILE-FIRST: base styles = phone; desktop layered on.
   ============================================================ */

.fd {
    --fd-green: var(--primary-green, #2e7d32);
    --fd-green-dark: var(--primary-dark, #1b5e20);
    --fd-ink: #1a1f1b;
    --fd-muted: #5b6660;
    --fd-line: #e3e9e4;
    --fd-surface: #f6f9f6;
    --fd-radius: 10px;

    color: var(--fd-ink);
    line-height: 1.65;
}

/* The .prose wrapper this renders inside already sets a measure on
   paragraphs; keep headings and blocks aligned to the same edge. */
.fd > section {
    margin: 0 0 3rem;
}

.fd h2 {
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fd-green-dark);
    margin: 0 0 1rem;
}

.fd h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fd-ink);
    margin: 0 0 0.4rem;
}

.fd p {
    margin: 0 0 0.9rem;
}

/* ── Block 1 — hero ─────────────────────────────────────────── */

.fd-hero {
    margin-bottom: 2.5rem;
}

/* The fragment supplies this — features/index.html renders the detail branch into a
   bare `.prose` div with no heading of its own. */
.fd-title {
    font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--fd-green-dark);
    margin: 0 0 1rem;
}

.fd-promise {
    font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
    line-height: 1.45;
    font-weight: 600;
    color: var(--fd-ink);
    max-width: 34em;
    margin: 0 0 1.5rem;
}

.fd-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--fd-radius);
    border: 1px solid var(--fd-line);
}

/* ── Block 2 — personas ─────────────────────────────────────── */

.fd-personas {
    display: grid;
    gap: 1.25rem;
}

.fd-persona {
    padding: 1.15rem 1.25rem;
    background: var(--fd-surface);
    border: 1px solid var(--fd-line);
    border-radius: var(--fd-radius);
}

.fd-persona h3 {
    color: var(--fd-green-dark);
}

.fd-persona p:last-child {
    margin-bottom: 0;
}

/* ── Block 3 — capability list ──────────────────────────────── */

.fd-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.85rem;
}

.fd-list > li {
    position: relative;
    padding-left: 1.75rem;
}

.fd-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fd-green);
}

/* ── Block 4 — outcomes ─────────────────────────────────────── */

.fd-outcomes {
    display: grid;
    gap: 1.25rem;
}

.fd-outcome {
    padding-left: 1rem;
    border-left: 3px solid var(--fd-green);
}

.fd-outcome p:last-child {
    margin-bottom: 0;
}

/* ── Block 5 — plans (rendered from included_in_plans) ──────── */

.fd-plans {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fd-plan {
    padding: 0.35rem 0.85rem;
    background: #fff;
    border: 1px solid var(--fd-green);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fd-green-dark);
}

.fd-plans-note {
    font-size: 0.92rem;
    color: var(--fd-muted);
}

/* ── Block 6 — get started links ────────────────────────────── */

.fd-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}

.fd-links > li {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--fd-line);
    border-radius: var(--fd-radius);
}

.fd-links a {
    font-weight: 700;
    color: var(--fd-green-dark);
    text-decoration: none;
}

.fd-links a:hover,
.fd-links a:focus-visible {
    text-decoration: underline;
}

.fd-link-sub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.92rem;
    color: var(--fd-muted);
}

/* ── Block 7 — shipped ──────────────────────────────────────── */

.fd-section--slim {
    margin-bottom: 2rem;
}

.fd-shipped-link {
    font-weight: 600;
    color: var(--fd-green-dark);
    text-decoration: none;
}

.fd-shipped-link:hover,
.fd-shipped-link:focus-visible {
    text-decoration: underline;
}

/* ── Block 8 — FAQ ──────────────────────────────────────────── */

.fd-faq {
    display: grid;
    gap: 0;
}

.fd-faq-item {
    padding: 1.15rem 0;
    border-top: 1px solid var(--fd-line);
}

.fd-faq-item:last-child {
    border-bottom: 1px solid var(--fd-line);
}

.fd-faq-item h3 {
    margin-bottom: 0.5rem;
}

.fd-faq-item p {
    margin: 0;
    color: var(--fd-muted);
}

/* ── Desktop ────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .fd-personas,
    .fd-outcomes {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .fd-list {
        gap: 1rem;
    }

    .fd > section {
        margin-bottom: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd * {
        transition: none !important;
    }
}