/*
 * MDL FINAL LAYOUT STABILIZATION V1
 *
 * Final presentation override loaded after all
 * existing website styles.
 *
 * Responsibilities:
 * - stabilise wide-screen Hero dimensions,
 * - prevent RTL overflow and clipping,
 * - make the Pre-Launch block span the Hero safely,
 * - preserve readable proportions,
 * - add a restrained decorative MDL watermark,
 * - protect desktop/tablet/mobile layouts.
 *
 * No runtime/business behaviour exists in this file.
 */


/* =========================================================
   GLOBAL DIMENSION SAFETY
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;

  overflow-x: hidden;
  overflow-x: clip;
}

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

.mdl-home-v1,
.mdl-home-v1 section,
.mdl-home-v1 article,
.mdl-home-v1 div {
  min-width: 0;
}

.mdl-home-v1 img,
.mdl-home-v1 svg {
  max-width: 100%;
}


/* =========================================================
   HERO STABILISATION
   ========================================================= */

#home {
  position: relative;

  isolation: isolate;

  width: 100%;
  max-width: 1600px;

  margin-inline: auto;

  overflow: hidden;
  overflow: clip;
}

#home > * {
  min-width: 0;
}


/*
 * The Pre-Launch block lives inside the Home/Hero section.
 * On desktop grids it must occupy the complete row rather
 * than behave like an additional Hero column.
 */

#home > .mdl-prelaunch-banner {
  grid-column: 1 / -1 !important;

  flex-basis: 100% !important;

  width: 100% !important;
  max-width: none !important;

  justify-self: stretch !important;

  margin:
    0
    0
    clamp(30px, 3.5vw, 58px)
    0 !important;
}

#home .mdl-prelaunch-banner {
  min-width: 0;

  padding:
    clamp(22px, 2.5vw, 38px);

  gap:
    clamp(22px, 3vw, 46px);
}

#home .mdl-prelaunch-copy,
#home .mdl-early-benefits {
  min-width: 0;
}

#home h1,
#home h2,
#home h3,
#home p,
#home span {
  overflow-wrap: break-word;
  word-break: normal;
}

#home .btn {
  max-width: 100%;

  white-space: normal;

  text-align: center;
}


/* =========================================================
   RTL STABILITY
   ========================================================= */

html[dir="rtl"] #home,
html[dir="rtl"] #home .mdl-prelaunch-banner,
html[dir="rtl"] #home .mdl-prelaunch-copy,
html[dir="rtl"] #home .mdl-early-benefits {
  direction: rtl;
}

html[dir="rtl"] #home .mdl-prelaunch-copy,
html[dir="rtl"] #home .mdl-early-benefits {
  text-align: right;
}

html[dir="rtl"] #home .mdl-prelaunch-banner {
  justify-items: stretch;
}


/* =========================================================
   DECORATIVE MDL WATERMARK
   ========================================================= */

.mdl-hero-watermark {
  position: absolute;

  z-index: 0;

  top: 54%;

  inset-inline-end:
    clamp(20px, 4vw, 84px);

  width:
    clamp(260px, 24vw, 520px);

  height: auto;

  opacity: .035;

  pointer-events: none;
  user-select: none;

  filter:
    saturate(.7)
    brightness(1.25);
}

#home > *:not(.mdl-hero-watermark) {
  position: relative;
  z-index: 1;
}


/*
 * In RTL the watermark moves to the opposite side.
 * This uses logical properties rather than hard-coded
 * left/right positioning.
 */

html[dir="rtl"] .mdl-hero-watermark {
  inset-inline-end:
    clamp(20px, 4vw, 84px);
}


/* =========================================================
   PRE-LAUNCH CONTENT PROPORTION
   ========================================================= */

@media (min-width: 1101px) {

  #home > .mdl-prelaunch-banner {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(320px, .9fr) !important;
  }

  #home .mdl-prelaunch-copy {
    max-width: 760px;
  }

  #home .mdl-early-benefits {
    width: 100%;
  }
}


/*
 * Move to one column earlier than before.
 * This prevents Arabic/French/Spanish copy from becoming
 * unnaturally narrow on laptop and tablet widths.
 */

@media (max-width: 1100px) {

  #home > .mdl-prelaunch-banner {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .mdl-hero-watermark {
    width:
      clamp(220px, 31vw, 390px);

    opacity: .025;
  }
}


/* =========================================================
   PARTNER SECTION DIMENSION SAFETY
   ========================================================= */

.mdl-partner-section {
  width:
    min(
      1440px,
      calc(100% - 40px)
    ) !important;

  max-width: 1440px !important;

  margin-inline: auto !important;
}

.mdl-partner-grid,
.mdl-partner-card,
.mdl-partner-action {
  min-width: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {

  #home {
    overflow: visible;
  }

  #home > .mdl-prelaunch-banner {
    width: 100% !important;

    margin-bottom:
      30px !important;
  }

  .mdl-hero-watermark {
    display: none;
  }

  .mdl-partner-section {
    width:
      min(
        100% - 24px,
        1440px
      ) !important;
  }
}


@media (max-width: 520px) {

  #home .mdl-prelaunch-banner {
    padding: 18px;
  }

  #home h1 {
    max-width: 100%;
  }

  #home .btn {
    width: 100%;
  }
}

/* === MDL REAL HERO GRID FINAL V1 START === */

/*
 * FINAL OWNERSHIP
 *
 * Desktop:
 *   preserve accepted 50 / 50 Hero.
 *
 * <=1060px:
 *   page + main + #home + real Hero grid have one
 *   explicit full-viewport ownership model.
 *
 * <=620px:
 *   Header reflows instead of expanding document width.
 *
 * No typography is changed.
 */


/* =========================================================
   DESKTOP — PRESERVED
   ========================================================= */

.v1-hero-grid.v1-shell {
  width:
    min(
      calc(100% - 64px),
      1500px
    ) !important;

  max-width:
    1500px !important;

  margin-inline:
    auto !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap:
    clamp(
      40px,
      3.6vw,
      64px
    ) !important;

  align-items:
    center !important;
}


.v1-hero-grid
> .v1-hero-copy,

.v1-hero-grid
> .v1-intelligence-preview {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  margin-inline:
    0 !important;
}


html[dir="ltr"]
.v1-hero-grid.v1-shell {
  direction:
    ltr !important;
}


html[dir="rtl"]
.v1-hero-grid.v1-shell {
  direction:
    rtl !important;
}


/* =========================================================
   MOBILE ROOT OWNERSHIP
   ========================================================= */

@media (max-width: 1060px) {

  html {
    width:
      100% !important;

    max-width:
      100% !important;

    overflow-x:
      hidden !important;
  }


  body.mdl-public-launch {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;
  }


  /*
   * This is the outer public-page wrapper.
   */

  #site-shell {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin-inline:
      0 !important;

    overflow-x:
      hidden !important;

    box-sizing:
      border-box !important;
  }


  /*
   * Critical:
   * the homepage itself may not participate in a
   * horizontal desktop flex/grid allocation on mobile.
   */

  main.mdl-home-v1 {
    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;
  }


  /*
   * #home is a section owner, not a mobile flex column.
   */

  main.mdl-home-v1
  #home {
    display:
      block !important;

    position:
      relative !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;
  }


  /*
   * Decorative glows never participate in sizing.
   */

  main.mdl-home-v1
  #home
  > .v1-glow {
    position:
      absolute !important;

    pointer-events:
      none !important;
  }


  /*
   * One mobile Hero grid owner.
   */

  main.mdl-home-v1
  #home
  .v1-hero-grid.v1-shell {
    display:
      grid !important;

    position:
      relative !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    padding-inline:
      clamp(
        16px,
        4.5vw,
        28px
      ) !important;

    box-sizing:
      border-box !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      34px !important;
  }


  main.mdl-home-v1
  #home
  .v1-hero-grid
  > .v1-hero-copy,

  main.mdl-home-v1
  #home
  .v1-hero-grid
  > .v1-intelligence-preview {
    display:
      block !important;

    position:
      relative !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    box-sizing:
      border-box !important;

    justify-self:
      stretch !important;
  }


  main.mdl-home-v1
  #home
  .v1-hero-copy *,

  main.mdl-home-v1
  #home
  .v1-intelligence-preview * {
    min-width:
      0;

    max-width:
      100%;
  }


  main.mdl-home-v1
  #home
  .v1-hero-title,

  main.mdl-home-v1
  #home
  .v1-hero-tagline,

  main.mdl-home-v1
  #home
  .v1-hero-lead,

  main.mdl-home-v1
  #home
  .v1-decision-line,

  main.mdl-home-v1
  #home
  .v1-actions,

  main.mdl-home-v1
  #home
  .v1-trust-row {
    width:
      100% !important;

    max-width:
      100% !important;
  }


  html[dir="ltr"]
  main.mdl-home-v1
  #home
  .v1-hero-grid.v1-shell {
    direction:
      ltr !important;
  }


  html[dir="rtl"]
  main.mdl-home-v1
  #home
  .v1-hero-grid.v1-shell {
    direction:
      rtl !important;
  }
}


/* =========================================================
   PHONE HEADER + HERO INTERNAL REFLOW
   ========================================================= */

@media (max-width: 620px) {

  /*
   * Header must never create document width > viewport.
   */

  #site-shell
  header {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;
  }


  /*
   * The immediate header layout container becomes a
   * wrapping mobile row regardless of its desktop layout.
   */

  #site-shell
  header
  > * {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

    display:
      flex !important;

    flex-wrap:
      wrap !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      10px 12px !important;

    padding-inline:
      14px !important;
  }


  /*
   * Known header controls from live Safari overflow report.
   */

  #site-shell
  header
  .header-language-switcher,

  #site-shell
  header
  .language-switcher {
    position:
      static !important;

    flex:
      1 1 100% !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    display:
      flex !important;

    flex-wrap:
      wrap !important;

    justify-content:
      center !important;

    box-sizing:
      border-box !important;
  }


  #site-shell
  header
  button,

  #site-shell
  header
  .btn,

  #site-shell
  header
  .mdl-dashboard-button {
    position:
      static !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    white-space:
      normal !important;

    box-sizing:
      border-box !important;
  }


  /*
   * Pre-register and Dashboard can share the control row,
   * but must be allowed to wrap naturally.
   */

  #site-shell
  header
  .js-open-registration,

  #site-shell
  header
  .mdl-dashboard-button {
    flex:
      1 1 140px !important;
  }


  /*
   * Hero mobile edges.
   */

  main.mdl-home-v1
  #home
  .v1-hero-grid.v1-shell {
    padding-inline:
      14px !important;

    gap:
      28px !important;
  }


  /*
   * CTA buttons become usable rows,
   * never narrow vertical buttons.
   */

  main.mdl-home-v1
  #home
  .v1-actions {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      12px !important;
  }


  main.mdl-home-v1
  #home
  .v1-actions
  .btn {
    display:
      flex !important;

    width:
      100% !important;

    max-width:
      100% !important;

    justify-content:
      center !important;
  }


  /*
   * Intelligence Preview internals.
   */

  main.mdl-home-v1
  #home
  .v1-intel-topline {
    display:
      flex !important;

    flex-wrap:
      wrap !important;

    gap:
      8px 14px !important;
  }


  main.mdl-home-v1
  #home
  .v1-intel-heading {
    display:
      grid !important;

    width:
      100% !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      14px !important;
  }


  main.mdl-home-v1
  #home
  .v1-state-pill {
    width:
      fit-content !important;

    max-width:
      100% !important;
  }


  main.mdl-home-v1
  #home
  .v1-intel-grid {
    display:
      grid !important;

    width:
      100% !important;

    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  main.mdl-home-v1
  #home
  .v1-intel-card {
    width:
      100% !important;

    min-width:
      0 !important;
  }


  main.mdl-home-v1
  #home
  .v1-trust-row {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      12px !important;
  }
}

/* === MDL REAL HERO GRID FINAL V1 END === */