/* =============================================================
   Landing Redesign — phase 8 (Home / front-page.php only)
   Loaded conditionally on is_front_page() from functions.php.
   Reuses tokens defined site-wide in auth-redesign.css (--auth-*).
   Salient's parent stylesheet loads after this file via wp_head(),
   so heading rules need !important to win the cascade.
   ============================================================= */

.lp {
    font-family: var(--auth-font-sans);
    font-weight: 500;
    color: var(--auth-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Salient's parent stylesheet injects a bare `p { padding-bottom: 27px }`,
   which stacks on top of our margin to produce a ~39px gap between
   consecutive paragraphs. Zero the padding here and use margin alone so
   inter-paragraph spacing is consistent across the whole landing page. */
.lp p {
    margin: 0 0 14px;
    padding: 0;
    color: var(--auth-text-secondary);
}

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

/* ---------- Buttons ---------- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--auth-radius);
    font-family: var(--auth-font-sans);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s, color 0.15s, transform 0.05s;
    border: 1px solid transparent;
    cursor: pointer;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn:focus-visible {
    outline: none;
    box-shadow: var(--auth-focus-ring);
}
.lp-btn-chev { font-size: 16px; line-height: 1; }

.lp-btn-primary {
    background: var(--auth-navy);
    color: var(--auth-white) !important;
}
.lp-btn-primary:hover { background: var(--auth-navy-mid); color: var(--auth-white) !important; }

.lp-btn-onlight {
    background: var(--auth-teal);
    color: var(--auth-white) !important;
}
.lp-btn-onlight:hover { background: var(--auth-navy); color: var(--auth-white) !important; }

/* ---------- Section 1 — Hero ----------
   Image is the section's full background (left side of the source is white
   wall, right side is the nurse — so cover+center naturally places the
   subject on the right). A ::before overlay paints a white→transparent
   gradient over the left half: the white covers the text column and
   feathers into the image so there's no hard vertical boundary.
   Empty grid column 2 just lets the image read through the overlay. */
.lp-hero {
    position: relative;
    background-image: url(../images/landing/section-1-hero.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #dfdad4;
    min-height: 540px;
    padding: 0 24px;
}
.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #dfdad4 0%, #dfdad4 35%, rgba(223,218,212,0) 65%);
    pointer-events: none;
}
.lp-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 84px 0 96px;
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: 48px;
    align-items: center;
}
.lp-hero-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 56px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: var(--auth-navy) !important;
    margin: 0 0 16px !important;
    letter-spacing: -0.01em;
}
/* Guarantee the hero headline breaks into two lines at the intended point.
   Inline on desktop is a no-op because the natural wrap also falls there;
   on narrow screens the <br> keeps the break consistent. */
.lp-hero-br { display: inline; }
.lp .lp-hero-body {
    font-family: var(--auth-font-sans);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--auth-teal);
    max-width: 560px;
}
.lp .lp-hero-lead { color: var(--auth-navy); }
.lp-hero-checks {
    list-style: none;
    margin: 28px 0 24px;
    padding: 0;
}
.lp-hero-checks li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--auth-font-sans);
    font-size: 14.5px;
    color: var(--auth-navy);
    margin-bottom: 8px;
    line-height: 1.4;
}
.lp-hero-checks li:last-child { margin-bottom: 0; }
.lp-check-icon { flex-shrink: 0; }

/* ---------- Section 2 — Role split ----------
   PSD + user: title and subtitle are left-aligned and both white.
   Tile grid stays centered as a max-width container below the heading block. */
.lp-role-split {
    background: var(--auth-teal);
    padding: 64px 24px 72px;
    color: var(--auth-white);
}
.lp-role-split-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.lp-role-split-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    color: var(--auth-white) !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.005em;
    text-align: center !important;
}
.lp .lp-role-split-sub {
    font-size: 15.5px;
    color: var(--auth-white) !important;
    margin: 0 auto 48px;
    max-width: 720px;
    line-height: 1.55;
    text-align: center;
}
.lp-role-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.lp-role-tile {
    background: var(--auth-white);
    border-radius: var(--auth-radius-lg);
    padding: 32px 28px;
    text-decoration: none;
    color: var(--auth-text);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(11,31,58,0.06);
}
.lp-role-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11,31,58,0.15);
}
.lp-role-tile:focus-visible {
    outline: none;
    box-shadow: var(--auth-focus-ring);
}
.lp-role-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--auth-teal-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.lp-role-tile-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--auth-navy) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
.lp-role-tile p {
    font-size: 14px;
    color: var(--auth-text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* ---------- Section 3 — MedMerity Difference ----------
   Mirror of .lp-hero. Source has team on the LEFT and white wall on the
   right; cover+center naturally puts the subject on the left. The gradient
   overlay covers the right (text) side and feathers into the image. */
.lp-difference {
    position: relative;
    background-image: url(../images/landing/section-3-team.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #dfdad4;
    min-height: 540px;
    padding: 0 24px;
}
.lp-difference::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, #dfdad4 0%, #dfdad4 35%, rgba(223,218,212,0) 65%);
    pointer-events: none;
}
.lp-difference-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 84px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.lp-difference-text { grid-column: 2; }
.lp-difference-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    color: var(--auth-navy) !important;
    margin: 0 0 16px !important;
    letter-spacing: -0.005em;
}
.lp .lp-difference-intro {
    font-size: 14.5px;
    color: var(--auth-teal);
    line-height: 1.65;
    margin: 0 0 28px;
}
.lp-difference-points {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-difference-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--auth-border);
}
.lp-difference-point:last-child { border-bottom: none; }
.lp-difference-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-block;
    background-color: var(--auth-teal);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.lp-difference-icon--privacy {
    -webkit-mask-image: url(../images/landing/icon-privacy.png);
    mask-image: url(../images/landing/icon-privacy.png);
}
.lp-difference-icon--compensation {
    -webkit-mask-image: url(../images/landing/icon-compensation.png);
    mask-image: url(../images/landing/icon-compensation.png);
}
.lp-difference-icon--verified {
    -webkit-mask-image: url(../images/landing/icon-verified.png);
    mask-image: url(../images/landing/icon-verified.png);
}
.lp-difference-point-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--auth-navy) !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}
.lp-difference-point p {
    font-size: 13.5px;
    color: var(--auth-navy);
    margin: 0;
    line-height: 1.55;
}

/* ---------- Section 4 — Mission ---------- */
.lp-mission {
    background: var(--auth-navy);
    padding: 80px 24px;
    text-align: center;
}
.lp-mission-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.lp .lp-mission p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.lp-mission-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 42px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--auth-white) !important;
    margin: 0 0 24px !important;
    letter-spacing: -0.005em;
}
.lp-mission p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
}

/* ---------- Section 5 — Privacy ---------- */
.lp-privacy {
    padding: 84px 24px 0;
    background-color: var(--auth-surface);
    background-image: url(../images/landing/section-5-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}
.lp-privacy-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.lp-privacy-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    color: var(--auth-navy) !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.005em;
}
.lp .lp-privacy-intro {
    font-size: 15px;
    color: var(--auth-navy);
    margin: 0 auto 48px;
    max-width: 720px;
    line-height: 1.6;
    text-align: center !important;
}
.lp-privacy-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 44px;
    text-align: left;
}
.lp-privacy-card {
    background: var(--auth-white);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-lg);
    padding: 28px 26px;
    box-shadow: 0 1px 2px rgba(11,31,58,0.04);
}
.lp-privacy-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--auth-teal-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.lp-privacy-card-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: var(--auth-navy) !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
}
.lp-privacy-card p {
    font-size: 13.5px;
    color: var(--auth-navy);
    line-height: 1.6;
    margin: 0;
}

.lp-privacy-cta {
    background: var(--auth-navy);
    border-radius: var(--auth-radius-lg);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 0;
    position: relative;
    transform: translateY(48px);
}
.lp-privacy-cta-title {
    font-family: var(--auth-font-serif) !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--auth-white) !important;
    margin: 0 0 12px !important;
}
.lp-privacy-cta p {
    font-size: 14.5px;
    color: rgba(255,255,255,0.82);
    max-width: 720px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

/* spacer so the translated CTA doesn't collide with the patent band */
.lp-privacy::after {
    content: "";
    display: block;
    height: 80px;
}

/* ---------- Section 6 — Patent / Made in USA band ---------- */
.lp-patent-band {
    background: var(--auth-teal-light);
    padding: 28px 24px;
    text-align: center;
}
.lp-patent-band-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}
.lp-patent-text {
    font-family: var(--auth-font-sans);
    font-size: 14px;
    color: var(--auth-navy);
    font-weight: 500;
}
.lp-patent-text em {
    font-style: italic;
    font-weight: 500;
}
.lp-patent-flag {
    display: inline-flex;
    line-height: 0;
    border: 1px solid rgba(11,31,58,0.12);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .lp-hero-inner { padding: 56px 0 64px; gap: 32px; }
    .lp-hero-title { font-size: 54px !important; }

    .lp-difference-inner { padding: 64px 0; gap: 32px; }
    .lp-difference-title { font-size: 32px !important; }

    .lp-role-split-title { font-size: 30px !important; }
    .lp-mission-title { font-size: 36px !important; }
    .lp-privacy-title { font-size: 32px !important; }
}

@media (max-width: 820px) {
    /* Stack: single column. Keep the desktop section-background treatment,
       but anchor each image to the subject side (right for hero, left for
       the difference section) so the figure stays in frame on narrow
       viewports. The ::before gradient is widened so text remains legible
       over the bleed. */
    .lp-hero,
    .lp-difference {
        min-height: auto;
    }
    .lp-hero { background-position: 69% center; }
    .lp-difference { background-position: 9% center; }
    .lp-hero::before {
        background: linear-gradient(to right, #dfdad4 0%, #dfdad4 55%, rgba(223,218,212,0.85) 75%, rgba(223,218,212,0) 100%);
    }
    .lp-difference::before {
        background: linear-gradient(to left, #dfdad4 0%, #dfdad4 55%, rgba(223,218,212,0.85) 75%, rgba(223,218,212,0) 100%);
    }
    .lp-hero-inner,
    .lp-difference-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .lp-difference-text { grid-column: 1; }

    .lp-hero-title { font-size: 46px !important; }
    .lp-hero-body { max-width: none; }

    .lp-role-tiles {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .lp-privacy-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .lp-mission { padding: 64px 24px; }
    .lp-privacy {
        padding: 64px 24px 0;
        /* iOS Safari ignores background-attachment:fixed and crops awkwardly,
           so force scroll here even though the desktop rule doesn't set it. */
        background-attachment: scroll;
    }
    .lp-privacy-cta { padding: 32px 24px; }
}

@media (max-width: 560px) {
    .lp-hero { padding: 48px 20px 56px; }
    .lp-hero-title { font-size: 38px !important; }
    .lp-hero-body { font-size: 14.5px; }

    .lp-role-split { padding: 56px 20px 60px; }
    .lp-role-split-title { font-size: 26px !important; }
    .lp-role-tile { padding: 26px 22px; }

    .lp-difference { padding: 56px 20px; }
    .lp-difference-title { font-size: 28px !important; }

    .lp-mission { padding: 56px 20px; }
    .lp-mission-title { font-size: 30px !important; }
    .lp-mission p { font-size: 14.5px; }

    .lp-privacy { padding: 56px 20px 0; }
    .lp-privacy-title { font-size: 28px !important; }
    .lp-privacy-cta-title { font-size: 22px !important; }

    .lp-patent-band-inner { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-role-tile,
    .lp-btn { transition: none !important; }
    .lp-role-tile:hover { transform: none !important; }
}

/* Defensive: sub-headings inside the Difference and Privacy sections must
   stay in brand navy regardless of cascade order. The individual rules
   above already set this, but Salient's parent stylesheet sometimes
   overrides untargeted h3/h4 colors. */
.lp .lp-difference-point-title,
.lp .lp-privacy-card-title { color: var(--auth-navy) !important; }

/* About Us — full rebuild lives in about-redesign.css + page-about-us.php
   (Phase 9). The earlier `.page-id-11` quick-brand-pass rules were never
   reached anyway because this file only loads on is_front_page(). */

/* Terms of Service — design-system typography.
   Page is still WPBakery. Section headings use Georgia normal at body
   weight; everything else inherits Poppins medium from .public-redesign.
   Overrides the .privacyPageBox h2 42px/57px rule that towered over a
   40-section doc. */
.page-id-418 .privacySection h1 {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-weight: 400 !important;
    color: #00345C !important;
    font-size: 42px;
    line-height: 1.18;
    margin: 0 0 8px;
}
.page-id-418 .privacySection p {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    color: #4A5568;
    margin: 0;
}
.page-id-418 .tosPageBox h2 {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-weight: 400 !important;
    color: #00345C !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin: 28px 0 8px !important;
}
.page-id-418 .tosPageBox p,
.page-id-418 .tosPageBox li {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    color: #4A5568;
    font-size: 15px;
    line-height: 1.7;
}
.page-id-418 .tosPageBox ol[type="a"] { margin: 4px 0 12px 24px; }
.page-id-418 .tosPageBox ol[type="a"] li { margin-bottom: 8px; }