/* Fresh.Fleet modules page
 * Page-specific styles only. Global typography, header, footer and shared controls
 * can continue to come from the existing project styles.
 */

.modules-page {
    --ink: var(--color-text, #2E353A);
    --ink2: var(--color-text-secondary, #46535A);
    --muted: var(--color-text-muted, #7B898E);
    --line: var(--color-border, #E7EEEA);
    --green: var(--color-primary, #7ED957);
    --teal: var(--color-secondary, #13B5D5);
    --coral: var(--color-accent, #FF6A3D);
    --corald: var(--color-accent-hover, #F2542D);
    --soft: var(--color-surface-soft, #F4F8F5);
    --soft2: var(--color-surface-alt, #EEF7FA);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.6;
}

.modules-page *,
.modules-page *::before,
.modules-page *::after {
    box-sizing: border-box;
}

.modules-page a {
    text-decoration: none;
}

.modules-page .ff-cta {
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.modules-page .ff-cta:hover {
    background: var(--corald) !important;
    transform: translateY(-1px);
}

.modules-page .ff-mcard,
.modules-page .ff-krow {
    transition: transform .2s ease, box-shadow .2s ease;
}

.modules-page .ff-mcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(12, 34, 38, .12) !important;
}

.modules-page .ff-mcard.is-open {
    grid-column: span 2;
}

.modules-page .ff-krow:hover {
    box-shadow: 0 12px 28px rgba(12, 34, 38, .09) !important;
}

.module-card-toggle {
    user-select: none;
    outline: none;
}

.module-card-toggle:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(19, 181, 213, .28);
}

.module-card-chevron {
    transition: transform .2s ease;
}

.module-card-toggle[aria-expanded="true"] .module-card-chevron {
    transform: rotate(180deg);
}

.module-card-details[hidden] {
    display: none !important;
}

.module-screenshot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    overflow: hidden;
    border: 1px dashed var(--line);
    background:
        linear-gradient(135deg, rgba(126, 217, 87, .07), rgba(19, 181, 213, .09)),
        #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.module-screenshot-placeholder span {
    padding: 12px;
}

.modules-page .modules-style-001 {position:relative;overflow:hidden;background:#fff;}
.modules-page .modules-style-002 {position:absolute;inset:0;background:radial-gradient(58% 48% at 50% -6%,rgba(126,217,87,.18),transparent 60%),radial-gradient(42% 38% at 84% 8%,rgba(19,181,213,.16),transparent 60%);pointer-events:none;}
.modules-page .modules-style-003 {position:relative;max-width:820px;margin:0 auto;padding:78px 40px 60px;text-align:center;}
.modules-page .modules-style-004 {display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(12,34,38,.06);padding:8px 16px;border-radius:100px;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--ink2);margin-bottom:22px;}
.modules-page .modules-style-005 {width:8px;height:8px;border-radius:50%;background:var(--green);}
.modules-page .modules-style-006 {font-weight:900;font-size:52px;line-height:1.08;letter-spacing:-.03em;margin:0 0 20px;color:var(--ink);}
.modules-page .modules-style-007 {background:linear-gradient(120deg,var(--green),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;}
.modules-page .modules-style-008 {font-size:19px;line-height:1.6;color:var(--ink2);margin:0 auto;}
.modules-page .modules-style-009 {background:linear-gradient(180deg,var(--soft2),#fff);}
.modules-page .modules-style-010 {max-width:1200px;margin:0 auto;padding:56px 40px 84px;}
.modules-page .modules-style-011 {max-width:680px;margin:0 auto 40px;text-align:center;}
.modules-page .modules-style-012 {display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:7px 15px;border-radius:100px;font-size:12.5px;font-weight:800;color:var(--ink2);margin-bottom:16px;}
.modules-page .modules-style-013 {width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--teal));}
.modules-page .modules-style-014 {font-weight:900;font-size:36px;line-height:1.1;letter-spacing:-.025em;margin:0 0 12px;color:var(--ink);}
.modules-page .modules-style-015 {font-size:16.5px;line-height:1.6;color:var(--ink2);margin:0;}
.modules-page .modules-style-016 {display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.modules-page .modules-style-017 {background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 14px;text-align:center;box-shadow:0 6px 18px rgba(12,34,38,.05);}
.modules-page .modules-style-018 {width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--teal));display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.modules-page .modules-style-019 {font-weight:900;font-size:14px;color:var(--ink);margin-bottom:4px;}
.modules-page .modules-style-020 {font-size:12px;line-height:1.4;color:var(--ink2);margin:0;}
.modules-page .modules-style-021 {background:var(--soft);}
.modules-page .modules-style-022 {max-width:1200px;margin:0 auto;padding:70px 40px 84px;}
.modules-page .modules-style-023 {max-width:680px;margin:0 auto 44px;text-align:center;}
.modules-page .modules-style-024 {font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;}
.modules-page .modules-style-025 {display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start;}
.modules-page .modules-style-026 {background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(12,34,38,.05);transition:transform .2s,box-shadow .2s;}
.modules-page .modules-style-027 {padding:22px;cursor:pointer;}
.modules-page .modules-style-028 {display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.modules-page .modules-style-029 {width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--teal));display:flex;align-items:center;justify-content:center;}
.modules-page .modules-style-030 {font-weight:900;font-size:16px;color:var(--ink);margin-bottom:6px;}
.modules-page .modules-style-031 {font-size:13.5px;line-height:1.5;color:var(--ink2);margin:0;}
.modules-page .modules-style-032 {padding:0 22px 22px;border-top:1px solid var(--line);}
.modules-page .modules-style-033 {font-size:13px;line-height:1.55;color:var(--ink2);margin:16px 0 14px;}
.modules-page .modules-style-034 {display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.modules-page .modules-style-035 {width:100%;height:170px;}
.modules-page .modules-style-036 {background:#fff;}
.modules-page .modules-style-037 {max-width:1200px;margin:0 auto;padding:88px 40px 20px;}
.modules-page .modules-style-038 {max-width:680px;margin:0 auto 60px;text-align:center;}
.modules-page .modules-style-039 {max-width:1200px;margin:0 auto;padding:0 40px 70px;}
.modules-page .modules-style-040 {display:flex;align-items:baseline;gap:12px;margin-bottom:24px;}
.modules-page .modules-style-041 {font-weight:900;font-size:22px;letter-spacing:-.01em;margin:0;color:var(--ink);}
.modules-page .modules-style-042 {font-size:14px;color:var(--muted);}
.modules-page .modules-style-043 {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.modules-page .modules-style-044 {background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(12,34,38,.06);transition:transform .2s,box-shadow .2s;}
.modules-page .modules-style-045 {width:100%;height:130px;}
.modules-page .modules-style-046 {padding:20px;}
.modules-page .modules-style-047 {font-weight:900;font-size:17px;color:var(--ink);margin-bottom:6px;}
.modules-page .modules-style-048 {font-size:14px;line-height:1.5;color:var(--ink2);margin:0 0 14px;}
.modules-page .modules-style-049 {display:flex;flex-direction:column;gap:8px;}
.modules-page .modules-style-050 {display:flex;align-items:center;gap:9px;}
.modules-page .modules-style-051 {font-size:13.5px;color:var(--ink2);}
.modules-page .modules-style-052 {background:var(--soft2);}
.modules-page .modules-style-053 {max-width:1200px;margin:0 auto;padding:70px 40px;}
.modules-page .modules-style-054 {display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.modules-page .modules-style-055 {background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(12,34,38,.06);transition:transform .2s,box-shadow .2s;display:grid;grid-template-columns:150px 1fr;}
.modules-page .modules-style-056 {width:100%;height:100%;}
.modules-page .modules-style-057 {font-size:14px;line-height:1.5;color:var(--ink2);margin:0 0 12px;}
.modules-page .modules-style-058 {background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(12,34,38,.06);transition:transform .2s,box-shadow .2s;display:grid;grid-template-columns:220px 1fr;}
.modules-page .modules-style-059 {padding:26px 28px;display:flex;flex-direction:column;justify-content:center;}
.modules-page .modules-style-060 {font-weight:900;font-size:18px;color:var(--ink);margin-bottom:6px;}
.modules-page .modules-style-061 {font-size:14.5px;line-height:1.5;color:var(--ink2);margin:0 0 14px;max-width:520px;}
.modules-page .modules-style-062 {display:flex;gap:24px;flex-wrap:wrap;}
.modules-page .modules-style-063 {max-width:1200px;margin:0 auto;padding:70px 40px 90px;}
.modules-page .modules-style-064 {display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.modules-page .modules-style-065 {display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;box-shadow:0 4px 14px rgba(12,34,38,.05);transition:box-shadow .2s;}
.modules-page .modules-style-066 {width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--teal));flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.modules-page .modules-style-067 {font-weight:900;font-size:16px;color:var(--ink);}
.modules-page .modules-style-068 {font-size:13.5px;color:var(--ink2);margin:4px 0 0;}
.modules-page .modules-style-069 {max-width:1200px;margin:0 auto;padding:0 40px 88px;}
.modules-page .modules-style-070 {position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--soft);padding:52px 48px;text-align:center;}
.modules-page .modules-style-071 {font-weight:900;font-size:32px;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink);}
.modules-page .modules-style-072 {font-size:17px;line-height:1.6;color:var(--ink2);margin:0 0 26px;max-width:520px;margin-left:auto;margin-right:auto;}
.modules-page .modules-style-073 {display:inline-flex;align-items:center;gap:9px;background:var(--coral);color:#fff;font-weight:800;font-size:17px;padding:16px 30px;border-radius:13px;box-shadow:0 12px 28px rgba(255,106,61,.3);}

@media (max-width: 1050px) {
    .modules-page .modules-style-016 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .modules-page .modules-style-025,
    .modules-page .modules-style-043 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 820px) {
    .modules-page .ff-mcard.is-open {
        grid-column: auto;
    }

    .modules-page .modules-style-016,
    .modules-page .modules-style-025,
    .modules-page .modules-style-043,
    .modules-page .modules-style-054,
    .modules-page .modules-style-064 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .modules-page h1 {
        font-size: 42px !important;
    }
}

@media (max-width: 620px) {
    .modules-page h1 {
        font-size: 34px !important;
    }

    .modules-page h2 {
        font-size: 30px !important;
    }

    .modules-page .modules-style-016,
    .modules-page .modules-style-025,
    .modules-page .modules-style-034,
    .modules-page .modules-style-043,
    .modules-page .modules-style-054,
    .modules-page .modules-style-064 {
        grid-template-columns: 1fr !important;
    }

    .modules-page .modules-style-055,
    .modules-page .modules-style-058 {
        grid-template-columns: 1fr !important;
    }

    .modules-page .module-screenshot-placeholder {
        min-height: 150px;
    }
}

@media (max-width: 480px) {
    .modules-page .modules-style-003,
    .modules-page .modules-style-010,
    .modules-page .modules-style-022,
    .modules-page .modules-style-037,
    .modules-page .modules-style-039,
    .modules-page .modules-style-053,
    .modules-page .modules-style-063,
    .modules-page .modules-style-069 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .modules-page .modules-style-070 {
        padding: 36px 24px !important;
    }
}