/* ==========================================================================
   App landing pages (/applications/<alias>) -- shared design system.

   The page body for each app is stored as markup in the database
   (website_content_details.fulltext) and rendered by
   application/modules/apps/views/app_modules/application_feature.php, which
   already defines the palette variables used here (--ink, --muted, --line,
   --surface, --surface-2, --shadow-color, --brand-orange) plus this app's own
   accent color (--daynamic_color_one, from app_modules.icon_background).
   Keeping the CSS here (not repeated inside every page's stored HTML) means a
   design change is one edit, and CMS editors only manage content.

   All rules are scoped under .al_landing. The theme's global stylesheet sets
   `p { margin-bottom: 0 !important }` and a global heading color meant for dark
   sections, so spacing on <p> uses !important and every heading level is
   re-colored here.
   ========================================================================== */

.al_landing {
    /* accent variants: the raw app color can be too light for text on white or
       for white text on top of it (e.g. amber, lime), so text/fills use darkened mixes */
    --al_text: color-mix(in srgb, var(--daynamic_color_one) 72%, #000);
    --al_deep: color-mix(in srgb, var(--daynamic_color_one) 68%, #000);
    font-family: 'Inter', -apple-system, sans-serif; color: var(--muted); line-height: 1.6; }
.al_landing *, .al_landing *::before, .al_landing *::after { box-sizing: border-box; }
.al_landing h1, .al_landing h2, .al_landing h3, .al_landing h4, .al_landing h5, .al_landing h6 {
    font-family: 'Space Grotesk', 'Montserrat', sans-serif;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.al_landing a { text-decoration: none; }
.al_landing ul { padding: 0; margin: 0; list-style: none; }
.al_landing img { max-width: 100%; height: auto; }
.al_landing .al_wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.al_section { padding: 72px 0; }
/* the sticky app menu is ~106px tall: keep anchor targets (Features/Overview/Pricing/FAQ) clear of it */
.al_section, .al_landing [id], .pos_landing [id] { scroll-margin-top: 120px; }
.al_section.tight { padding: 48px 0; }
.al_soft { background: var(--surface-2); }

.al_eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: color-mix(in srgb, var(--daynamic_color_one) 12%, transparent);
    color: var(--al_text);
    font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 999px; margin-bottom: 16px !important;
}
.al_head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.al_head h2 { font-size: 32px; line-height: 1.25; margin-bottom: 12px !important; }
.al_head p { font-size: 16.5px; margin: 0 !important; }

/* buttons */
.al_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px; border-radius: 999px; font-weight: 700; font-size: 15px;
    border: 2px solid transparent; white-space: nowrap; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.al_btn:hover { transform: translateY(-2px); }
.al_btn_primary { background: var(--brand-orange); color: #fff; box-shadow: 0 10px 22px rgba(247,112,11,.25); }
.al_btn_primary:hover { color: #fff; }
.al_btn_ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.al_btn_ghost:hover { border-color: var(--al_text); color: var(--al_text); }
.al_btn_light { background: #fff; color: var(--ink); }
.al_btn_light:hover { color: var(--ink); }

/* hero */
.al_hero { padding: 60px 0 80px; }
.al_hero_grid { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.al_hero_text { flex: 1 1 460px; min-width: 0; }
.al_hero_art { flex: 1 1 420px; min-width: 0; position: relative; }
.al_hero h1 { font-size: 40px; line-height: 1.18; margin-bottom: 18px !important; }
.al_hero h1 span { color: var(--al_text); }
.al_hero_sub { font-size: 17px; margin-bottom: 14px !important; max-width: 560px; }
.al_hero_sub2 { font-size: 15px; margin-bottom: 24px !important; max-width: 560px; }
.al_hero_cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 24px 0 20px !important; }
.al_trust { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; font-weight: 600; }
.al_trust li { display: flex; align-items: center; gap: 6px; }
.al_trust i { color: var(--al_text); }

.al_browser { background: #fff; border-radius: 16px; box-shadow: 0 26px 60px var(--shadow-color); border: 1px solid var(--line); overflow: hidden; }
.al_browser_bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.al_browser_bar span { width: 9px; height: 9px; border-radius: 50%; background: #d8d2cf; }
.al_browser img { display: block; width: 100%; }

/* hero visual when the app has no screenshot: brand panel */
.al_panel {
    border-radius: 24px; padding: 40px 32px; color: #fff; text-align: center;
    background: linear-gradient(140deg, var(--al_deep), color-mix(in srgb, var(--daynamic_color_one) 45%, #000));
    box-shadow: 0 26px 60px var(--shadow-color);
}
.al_panel_icon {
    width: 92px; height: 92px; border-radius: 26px; margin: 0 auto 20px;
    background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center;
    font-size: 40px; overflow: hidden;
}
.al_panel_icon img { width: 56px; height: 56px; object-fit: contain; }
.al_panel h3 { color: #fff; font-size: 24px; margin-bottom: 8px !important; }
.al_panel p { color: rgba(255,255,255,.85); font-size: 14.5px; margin: 0 !important; }
.al_panel_chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.al_panel_chips span { background: rgba(255,255,255,.16); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; }

/* card grids */
.al_grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.al_grid.c2 { grid-template-columns: repeat(2, 1fr); }
.al_grid.c4 { grid-template-columns: repeat(4, 1fr); }
.al_card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; }
.al_card_icon {
    width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
    background: color-mix(in srgb, var(--daynamic_color_one) 12%, transparent);
    color: var(--al_text);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.al_card h5 { font-size: 15.5px; margin-bottom: 4px !important; }
.al_card .al_card_sub { font-size: 12.5px; font-weight: 700; color: var(--al_text); margin-bottom: 8px !important; }
.al_card p { font-size: 13.8px; margin: 0 !important; }
.al_card.problem .al_card_icon { background: #fdeee3; color: var(--brand-orange); }

/* about */
.al_about { max-width: 820px; margin: 0 auto; text-align: center; }
.al_about p { font-size: 16px; line-height: 1.8; margin-bottom: 16px !important; }
.al_about p:last-child { margin-bottom: 0 !important; }

/* screenshots */
.al_shot img { width: 100%; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 14px; display: block; }

/* platform benefits */
.al_platform { background: var(--ink); border-radius: 24px; padding: 48px; }
.al_platform .al_head h2 { color: #fff; }
.al_platform .al_head p { color: rgba(255,255,255,.7); }
.al_platform .al_eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.al_platform_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.al_platform_item i { color: var(--brand-orange); font-size: 22px; margin-bottom: 12px; display: block; }
.al_platform_item h5 { color: #fff; font-size: 15px; margin-bottom: 6px !important; }
.al_platform_item p { color: rgba(255,255,255,.7); font-size: 13.5px; margin: 0 !important; }

/* pricing */
.al_price_wrap { display: flex; justify-content: center; }
.al_price { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 38px; text-align: center; box-shadow: 0 22px 50px var(--shadow-color); position: relative; }
.al_price_badge { position: absolute; top: -14px; right: 26px; background: var(--brand-orange); color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.al_price h4 { font-size: 20px; margin-bottom: 14px !important; }
.al_price_now { font-size: 42px; font-weight: 800; color: var(--al_text); font-family: 'Space Grotesk', sans-serif; line-height: 1.1; }
.al_price_now span { font-size: 15px; color: var(--muted); font-weight: 500; }
.al_price_note { font-size: 12.5px; color: var(--muted); margin-top: 14px !important; }
.al_price hr { border-color: var(--line); margin: 22px 0; }
.al_price .al_btn { width: 100%; }

/* testimonial */
.al_testi { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 40px; display: flex; gap: 30px; align-items: center; }
.al_testi img { flex: none; width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 10px 26px var(--shadow-color); }
.al_testi_stars { color: var(--brand-orange); font-size: 14px; margin-bottom: 10px; }
.al_testi_quote { font-size: 17px; color: var(--ink); line-height: 1.65; margin-bottom: 14px !important; }
.al_testi_name { font-weight: 700; color: var(--ink); font-size: 15px; }
.al_testi_role { font-size: 13px; color: var(--muted); }

/* faq */
.al_faq { max-width: 800px; margin: 0 auto; }
.al_faq details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.al_faq summary { list-style: none; padding: 16px 20px; font-weight: 700; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.al_faq summary::-webkit-details-marker { display: none; }
.al_faq summary i { color: var(--al_text); flex: none; margin-left: 12px; transition: transform .2s ease; }
.al_faq details[open] summary i { transform: rotate(180deg); }
.al_faq .al_faq_a { padding: 0 20px 18px; font-size: 13.8px; line-height: 1.7; }

/* contact + closing bands */
.al_contact { background: var(--al_deep); border-radius: 22px; padding: 46px; text-align: center; }
.al_contact h3 { color: #fff; font-size: 24px; margin-bottom: 10px !important; }
.al_contact p { color: rgba(255,255,255,.88); margin-bottom: 22px !important; }
.al_contact .al_btn_ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.al_final { background: var(--ink); border-radius: 22px; padding: 54px; text-align: center; }
.al_final h2 { color: #fff; font-size: 28px; margin-bottom: 10px !important; }
.al_final p { color: rgba(255,255,255,.75); margin: 0 auto 24px !important; max-width: 620px; }

@media (max-width: 991px) {
    .al_grid, .al_grid.c4 { grid-template-columns: repeat(2, 1fr); }
    .al_platform_grid { grid-template-columns: repeat(2, 1fr); }
    .al_hero h1 { font-size: 32px; }
    .al_platform { padding: 36px 26px; }
}
@media (max-width: 575px) {
    .al_section { padding: 52px 0; }
    .al_grid, .al_grid.c2, .al_grid.c4, .al_platform_grid { grid-template-columns: 1fr; }
    .al_hero h1 { font-size: 28px; }
    .al_head h2 { font-size: 26px; }
    .al_hero_cta { flex-direction: column; align-items: stretch; }
    .al_hero_cta .al_btn { width: 100%; }
    .al_contact, .al_final { padding: 32px 22px; }
    .al_price { padding: 28px 20px; }
    .al_testi { flex-direction: column; text-align: center; padding: 28px 22px; }
}