@import url('/css/card-system.css');

/* =========================================================
   LYMPHAWARE HOMEPAGE SECTION SYSTEM

   One consistent rule throughout the homepage:
   - each major section background runs full browser width
   - the content inside is constrained to the same 1180px width as the hero
   - subtle full-width borders / background changes separate each section
   ========================================================= */


/* HERO
   Membership now has its own dedicated homepage section, so the compact
   membership summary is removed from the hero. The card and phone positioning
   rules in home.css are deliberately left untouched. */

.home-page .home-membership-summary {
  display: none !important;
}

/* Keep enough desktop hero height for the existing phone/card composition
   after removing the membership summary, without changing their coordinates. */
@media (min-width: 681px) {
  .home-page .home-hero-grid {
    min-height: 570px !important;
  }
}


/* =========================================================
   CONSISTENT SECTION TYPOGRAPHY
   The hero remains intentionally larger. All major homepage sections below
   the hero use one consistent heading scale and eyebrow-label size.
   ========================================================= */

.home-page .home-understanding-copy h2,
.home-page .how-heading h2,
.home-page .help-scenarios-heading h2,
.home-page .home-demo-copy h2,
.home-page .home-membership-copy h2,
.home-page .home-language-copy h2,
.home-page .home-control-copy h2,
.home-page .home-professionals-copy h2,
.home-page .home-story-panel h2,
.home-page .home-privacy-panel h2 {
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -1px !important;
}

.home-page .home-understanding-eyebrow,
.home-page .home-demo-eyebrow,
.home-page .home-membership-eyebrow,
.home-page .home-language-eyebrow,
.home-page .home-control-eyebrow,
.home-page .home-professionals-eyebrow,
.home-page .home-story-eyebrow {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
}

/* Additional language packages now follows the same green section-label
   convention as the other principal homepage sections. */
.home-page .home-language-eyebrow {
  color: #247a24 !important;
}


/* =========================================================
   CONSISTENT CARD DEPTH
   Use one restrained shadow across content cards. The physical ID-card and
   phone imagery keep their stronger photographic shadows in home.css.
   ========================================================= */

.home-page .home-understanding-panel,
.home-page .how-step,
.home-page .help-scenario-card,
.home-page .home-membership-price-card,
.home-page .home-language-card,
.home-page .home-control-item,
.home-page .home-professional-card,
.home-page .home-story-panel,
.home-page .home-privacy-panel {
  box-shadow: 0 8px 24px rgba(31, 47, 66, 0.06) !important;
}


/* =========================================================
   HEADER NAVIGATION
   Keep About, For Professionals and Privacy & Security visible together in
   the PC/tablet top navigation. Compact the tablet header rather than hiding
   the navigation; smaller screens continue to use the mobile menu.
   ========================================================= */

@media (min-width: 761px) and (max-width: 980px) {
  .home-page .main-nav.home-nav {
    display: flex !important;
    gap: 12px !important;
    font-size: 0.82rem !important;
  }

  .home-page .main-nav.home-nav a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .home-page .home-header .header-logo {
    width: 230px !important;
    max-width: 230px !important;
  }

  .home-page .home-header .header-inner {
    width: min(100% - 28px, 1180px) !important;
    gap: 12px !important;
  }

  .home-page .home-header .header-actions .button,
  .home-page .home-account-button {
    width: auto !important;
    min-width: 116px !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 0.88rem !important;
  }
}

@media (min-width: 681px) and (max-width: 760px) {
  .home-page .mobile-menu {
    display: block !important;
  }

  .home-page .header-actions {
    display: none !important;
  }
}


/* FULL-WIDTH SECTION BANDS */

.home-page .home-understanding-section,
.home-page .home-demo-section,
.home-page .home-control-section,
.home-page .home-professionals-section,
.home-page .home-story-section {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}


/* SAME INNER CONTENT WIDTH AS THE HERO */

.home-page .home-understanding-grid,
.home-page .home-demo-grid,
.home-page .home-control-grid,
.home-page .home-professionals-grid,
.home-page .home-story-grid {
  width: min(1180px, calc(100% - 40px));
  margin-left: auto !important;
  margin-right: auto !important;
}


/* WHY LYMPHAWARE? */

.home-page #about.home-understanding-section {
  padding: 72px 0 !important;
  background: #ffffff;
  border-top: 1px solid #e7edf1 !important;
  border-bottom: 1px solid #e7edf1 !important;
}


/* HOW LYMPHAWARE WORKS */

.home-page #how-it-works {
  padding-top: 72px !important;
  padding-bottom: 0 !important;
  background: #f7fafc;
}


/* WHEN COULD LYMPHAWARE HELP?
   This block sits inside the How section in the HTML, so the wide background
   is extended to the edges of the viewport while the content remains aligned. */

.home-page .help-scenarios {
  position: relative;
  margin-top: 64px !important;
  padding: 64px 0 72px !important;
  border-top: 0 !important;
  background: #ffffff;
  box-shadow: 0 0 0 100vmax #ffffff;
  clip-path: inset(0 -100vmax);
}

.home-page .help-scenarios::before,
.home-page .help-scenarios::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid #e7edf1;
  pointer-events: none;
}

.home-page .help-scenarios::before {
  top: 0;
}

.home-page .help-scenarios::after {
  bottom: 0;
}


/* SEE LYMPHAWARE IN ACTION */

.home-page .home-demo-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e7edf1 !important;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(0, 83, 183, 0.08),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #f9fcfa 0%,
      #f7fbfd 100%
    ) !important;
}


/* PATIENT CONTROLLED */

.home-page .home-control-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 0 !important;
  border-top: 1px solid #e7edf1 !important;
  border-bottom: 1px solid #e7edf1 !important;
  background:
    linear-gradient(
      135deg,
      #f8faf9 0%,
      #f6fafc 100%
    ) !important;
}


/* FOR PROFESSIONALS */

.home-page .home-professionals-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e7edf1 !important;
  background: #ffffff !important;
}


/* PATIENT LED + PRIVACY */

.home-page .home-story-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e7edf1 !important;
  background: #f7fafc;
}


/* MOBILE / SMALL SCREENS */

@media (max-width: 680px) {

  .home-page .home-understanding-grid,
  .home-page .home-demo-grid,
  .home-page .home-control-grid,
  .home-page .home-professionals-grid,
  .home-page .home-story-grid {
    width: min(100% - 28px, 1180px);
  }

  .home-page #about.home-understanding-section,
  .home-page .home-demo-section,
  .home-page .home-control-section,
  .home-page .home-professionals-section,
  .home-page .home-story-section {
    padding: 52px 0 !important;
  }

  .home-page #how-it-works {
    padding-top: 52px !important;
  }

  .home-page .help-scenarios {
    margin-top: 48px !important;
    padding: 52px 0 !important;
  }

  .home-page .home-understanding-copy h2,
  .home-page .how-heading h2,
  .home-page .help-scenarios-heading h2,
  .home-page .home-demo-copy h2,
  .home-page .home-membership-copy h2,
  .home-page .home-language-copy h2,
  .home-page .home-control-copy h2,
  .home-page .home-professionals-copy h2,
  .home-page .home-story-panel h2,
  .home-page .home-privacy-panel h2 {
    font-size: 2rem !important;
  }
}

/* Signed-in members already have an account and direct access to the Patient Portal,
   so hide every homepage registration call-to-action. */
.home-page:has(#desktop-account-link[href="/portal/"]) a[href="/register/"] {
  display: none !important;
}

/* The original homepage header size is the master LymphAware header standard. */
.home-page .home-header .header-logo {
  width: 390px !important;
  max-width: 100% !important;
  height: auto !important;
}

.home-page .home-header .header-inner {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  min-height: 92px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 761px) and (max-width: 980px) {
  .home-page .home-header .header-logo {
    width: 230px !important;
    max-width: 230px !important;
  }

  .home-page .home-header .header-inner {
    width: min(100% - 28px, 1180px) !important;
  }
}

@media (max-width: 680px) {
  .home-page .home-header .header-logo {
    width: 300px !important;
    max-width: calc(100vw - 150px) !important;
  }

  .home-page .home-header .header-inner {
    width: min(100% - 28px, 1180px) !important;
    min-height: 74px !important;
  }
}


/* PRIVATE TRIAL NOTICE */
.home-page .home-trial-notice {
  max-width: 720px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #b8cee0;
  border-left: 5px solid #0053b7;
  border-radius: 10px;
  background: #f1f7fb;
  color: #344b60;
  font-size: 0.94rem;
  line-height: 1.5;
}

.home-page .home-membership-actions .home-trial-notice-membership {
  width: 100%;
  max-width: none;
  margin: 0 0 6px;
}

/* MOBILE TRIAL NOTICE POSITION */
@media (max-width: 680px) {
  /* Mobile hero sequence: heading, copy, product graphic, trial notice, actions. */
  .home-page .home-trial-notice:not(.home-trial-notice-membership) {
    order: 4;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
  }

  .home-page .home-hero-product {
    margin-bottom: -10px;
  }

  .home-page .home-hero-actions {
    order: 5;
    margin-top: 0;
  }
}