/* Argenta public LANDING pages (explore / nonprofit / impact).
   Ported from the WebForms _landing.css, SCOPED under .landing-page so the aggressive,
   near-global rules (body font, link colors, heading sizes) can NEVER leak into the rest
   of the Blazor app. Every landing page wraps its content in <div class="landing-page">. */

.landing-page {
    --la-blue: #00A1BE;
    --la-blue-light: #8DC3C9;
    --la-blue-lighter: #B1D9D7;
    --la-orange: #FF4A11;
    --la-pink: #F37468;
    --la-gray: #464646;
    --la-red: #CC3333;
    --la-gold: #F8C364;
    --la-navy: #072326;
    --mont: 'Montserrat', sans-serif;
    --muli: 'Mulish', sans-serif;
    font-family: var(--muli);
    color: var(--la-gray);
    overflow-x: hidden;
}

/* color utilities */
.landing-page .argenta-blue { color: var(--la-blue); }
.landing-page .blue { color: var(--la-blue); }
.landing-page .blue-light { color: var(--la-blue-light); }
.landing-page .orange { color: var(--la-orange); }
.landing-page .red { color: var(--la-red); }
.landing-page .gray { color: var(--la-gray); }
.landing-page .gold,
.landing-page .yellow { color: var(--la-gold); }
.landing-page .navy { color: var(--la-navy); }
.landing-page .white { color: #FFF; }
.landing-page .black { color: #000; }

.landing-page .font-90 { font-size: 90%; }
.landing-page .font-120 { font-size: 120%; }
.landing-page .bold { font-weight: bold; }
.landing-page .no-underline { text-decoration: none !important; }
.landing-page .text-align-center { text-align: center; }

/* links + base typography */
.landing-page a,
.landing-page a:visited { color: var(--la-blue-light); }
.landing-page a:hover { color: var(--la-pink); }
.landing-page img { max-width: 100%; }

.landing-page h1,
.landing-page h2,
.landing-page h3 { font-family: var(--mont); }
.landing-page h4,
.landing-page h5,
.landing-page h6 { font-family: var(--muli); }
.landing-page h1 { font-size: 2.5em !important; font-weight: 800; color: #464646 !important; }
.landing-page h2 { font-size: 1.75em !important; font-weight: 800; }
.landing-page h3 { font-size: 1.5em !important; }
.landing-page h4 { font-size: 1.25em !important; }

.landing-page .section-title { font-size: 2rem !important; font-weight: 800; }
.landing-page .section-subtitle { font-size: 1.25rem !important; font-weight: 700; }
@media (min-width: 992px) { .landing-page .section-title { font-size: 2.5rem !important; } }

/* logo + CTA buttons */
.landing-page .logo { max-width: 250px; }
.landing-page .demo-button,
.landing-page .demo-button:hover,
.landing-page .demo-button:visited { background-image: linear-gradient(to right, #05AABD, #02BBAA); color: #FFF; border-radius: 30px; border: 0; font-size: 1.3rem; font-weight: 700; padding: .75rem 2.5rem 1rem 2.5rem; text-decoration: none; cursor: pointer; display: inline-block; }
.landing-page .trial-button,
.landing-page .trial-button:hover,
.landing-page .trial-button:visited { background-color: var(--la-orange); color: #FFF; border-radius: 30px; border: 0; font-size: 1.3rem; font-weight: 700; padding: .75rem 2.5rem 1rem 2.5rem; text-decoration: none; cursor: pointer; display: inline-block; }
.landing-page .btn-orange,
.landing-page .btn-orange:hover,
.landing-page .btn-orange:visited { background: #FF4A11; color: #FFF; }

.landing-page .pill-box { background-color: var(--la-blue-lighter); border-radius: 60px; width: 100%; padding: 0 5%; font-weight: 600; }

/* hero — main (explore) + nonprofit */
/* Dated filename is deliberate: overwriting the old name left the CDN serving a stale hero for
   hours after deploy (2026-07-24). Give every new hero a new name so the swap is immediate. */
.landing-page #hero-landing { background-image: url('/images/landing/landing-hero-2026-07-24.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; min-height: 50vh; }
@media (max-width: 767px) { .landing-page #hero-landing { background-position: 45% center; } }
@media (min-width: 768px) { .landing-page #hero-landing { background-position: center center; min-height: 0; } }
@media (min-width: 992px) { .landing-page #hero-landing { background-position: center center; background-size: contain; min-height: 0; } }
@media (min-width: 1280px) { .landing-page #hero-landing { background-position: center center; background-size: cover; min-height: 75vh; } }

/* Soft gradient behind the hero copy so white text reads over a BRIGHT photo (Christine 2026-07-24).
   Deliberately a ::before overlay rather than a second background layer: #hero-landing changes
   background-size and background-position at four breakpoints above, and a gradient layer would
   inherit all of it. The overlay fades out before the subject on the right, so the photo stays lit. */
.landing-page #hero-landing { position: relative; }
.landing-page #hero-landing::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 28%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 70%);
}
.landing-page #hero-landing > .container { position: relative; z-index: 1; }
/* On a phone the copy spans the full width, so wash the whole hero instead of just the left. */
@media (max-width: 767px) {
    .landing-page #hero-landing::before {
        background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.35) 100%);
    }
}

/* hero copy sits over the photo: white + a subtle shadow so it reads over both sky and foliage (Christine 2026-07-23) */
.landing-page #hero-landing,
.landing-page #hero-landing h1,
.landing-page #hero-landing h4,
.landing-page #hero-landing h6,
.landing-page #hero-landing .small,
.landing-page #hero-landing .review-text { color: #fff !important; }
.landing-page #hero-landing .orange { color: #fff !important; }
.landing-page #hero-landing h1,
.landing-page #hero-landing h4,
.landing-page #hero-landing h6,
.landing-page #hero-landing .small,
.landing-page #hero-landing .review-text,
.landing-page #hero-landing .container .col-md-8 > div:first-child { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }

/* featured customer pull-quote right below the hero (Christine 2026-07-23) */
.landing-page .hero-testimonial { background-color: #F4FEFE; }
.landing-page .hero-testimonial-quote { font-size: 1.7em; line-height: 1.35; max-width: 820px; margin: 0 auto; }

/* "Everything In One Place" feature cards (Christine 2026-07-24, replaces the centred 2-up rows).
   Even 4-up grid on desktop, 2-up on tablet, stacked on phone. Left-aligned copy, sentence case,
   one consistent icon tile instead of four mismatched line drawings. */
.landing-page .feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1199px) { .landing-page .feature-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .landing-page .feature-cards { grid-template-columns: 1fr; gap: 1rem; } }

.landing-page .feature-card {
    background: #fff; border: 1px solid #E7EDEE; border-radius: 14px; padding: 1.75rem 1.5rem;
    text-align: left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.landing-page .feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(7,35,38,.10); border-color: #D5E7EA; }
.landing-page .feature-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 12px;
    background: #E8F7F9; color: var(--la-blue); font-size: 1.35rem; margin-bottom: 1rem;
}
/* beats .landing-page h4 { font-size: 1.25em !important } */
.landing-page .feature-card__title { font-size: 1.15rem !important; font-weight: 800; color: var(--la-navy); margin-bottom: .5rem; }
.landing-page .feature-card__body { font-size: .95rem; line-height: 1.6; color: #5A6668; margin: 0; }

/* The "what argenta means" card (Christine 2026-07-24): coin icon, the Latin origin, then how the
   company is run. Sits on the pale teal band, so it takes a soft white card to lift off it. */
.landing-page .argenta-origin-note {
    background: rgba(255,255,255,.72); border-radius: 12px;
    padding: 1.75rem 2rem; text-align: left; font-size: 1.05rem; line-height: 1.6;
    color: var(--la-gray);
}
.landing-page .argenta-origin-note__lead { font-size: 1.25em; margin-top: .75rem; }
.landing-page .argenta-origin-note p:last-child { margin-bottom: 0; }
@media (max-width: 575px) { .landing-page .argenta-origin-note { padding: 1.25rem 1.1rem; font-size: 1rem; } }

/* "Custom forms" capability list (Christine 2026-07-24). Two columns so the full set of form
   types stays scannable in the side column instead of running down the page as one long ribbon.
   Single column until 1200px: below that the side column is too narrow for two, and every item
   wrapped onto a second line (checked at 820px). Two columns only where they actually fit. */
.landing-page .form-list { display: grid; grid-template-columns: 1fr; gap: .6rem 1.4rem; margin-top: 1.25rem; }
@media (min-width: 1200px) { .landing-page .form-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.landing-page .form-list__item { display: flex; align-items: flex-start; gap: .55rem; font-size: .95rem; line-height: 1.45; }
.landing-page .form-list__item i { color: var(--la-orange); margin-top: .22rem; flex: 0 0 auto; }
.landing-page .form-list-more { margin-top: 1.5rem; background: #F4FEFE; border-left: 3px solid var(--la-blue); border-radius: 8px; padding: .9rem 1.1rem; font-size: .95rem; line-height: 1.5; }

/* hero — political (impact) */
.landing-page #hero-political { background-image: url('/images/heros/hero-political.jpg'); background-size: cover; background-repeat: no-repeat; background-position: bottom center; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
@media (min-width: 768px) { .landing-page #hero-political { background-position: bottom center; min-height: 0; } }
@media (min-width: 992px) { .landing-page #hero-political { background-position: 0% top; min-height: 0; } }

/* social proof */
.landing-page .profile-images img { width: 35px; height: 35px; border-radius: 50%; }
.landing-page .stars { font-size: 24px; color: #FFD700; margin-bottom: 5px; }
.landing-page .review-text { font-size: 12px; color: #000; margin-top: -3px; }

/* collapsible "View Full List of Features" section */
.landing-page .features-list-wrap { max-height: 680px; transition: all .5s ease-in-out; overflow: hidden; }
.landing-page .features-list-wrap--open { max-height: none; overflow: initial; }
.landing-page .features-list-toggle { position: relative; cursor: pointer; }
.landing-page .features-list-toggle::before { content: ''; height: 100px; width: 100%; display: block; position: absolute; z-index: 2; background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,1) 100%); top: -100px; }
.landing-page .features-list-toggle--text { color: #00A1BE; font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; font-family: 'Mulish', sans-serif !important; }