:root{
  --dt-blue:#1B4AA6;
  --dt-blue-dark:#123778;
  --dt-navy:#0A2046;
  --dt-pill:#E1E7F8;
  --dt-border:#E3E7F0;
  --dt-gray:#8A93A8;
}

html, body { height: 100%; }
body.landing-root{
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  /* allow the page to use flex layout so footer stays pinned and hero fills remaining space */
  display: flex;
  flex-direction: column;
  background-image: url('../IMAGES/index_bg.png');
  /* slightly zoom the background image for a fuller look */
  background-size: 105% 105%;
  background-position: center center;
  background-repeat: no-repeat;
}

.landing-root .hero{
  background: transparent;
}

/* ── NAV ─────────────────────────────────────────────── */
.landing-root .land-nav{
  background: transparent;
  box-shadow: none;
  padding:14px 60px;
  margin-bottom: 0;
  /* FIX: lock the nav's height so it can never grow taller than expected
     (e.g. if a logo image fails to load and its alt text tries to render
     at full size) and overlap the hero content below it. */
  min-height: 64px;
  align-items: center;
  overflow: hidden;
}
.landing-root .land-nav.sticky{ padding:12px 60px; }
.landing-root .land-brand strong{ color:var(--txt); }
.landing-root .land-brand span{ color:var(--orange); }
.landing-root .land-links{ gap:8px; }
.landing-root .land-links a{ color:var(--txt-2); }
.landing-root .land-links a:hover{ background:var(--bg); color:var(--blue); }
.landing-root .land-links .nav-pill{
  background:var(--dt-blue);
  color:#fff !important;
  padding:9px 22px;
  border-radius:99px;
  font-weight:700;
}
.landing-root .land-links .nav-pill:hover{ background:var(--dt-blue-dark); color:#fff !important; }
.landing-root .menu-toggle{ color:var(--dt-blue); }

/* ── HERO SHELL ──────────────────────────────────────── */
.landing-root .hero{
  /* let hero fill available space between nav and footer without creating overflow */
  flex: 1 1 auto !important;
  min-height: 0 !important; /* allow flex children to shrink if needed */
  background: transparent !important;
  /* FIX: index.css has an UNSCOPED ".hero{overflow:hidden;align-items:center;
     min-height:100vh}" rule that was centering the content and clipping
     anything taller than the viewport (login button, footer). Forcing
     these here guarantees this scoped rule wins no matter what else
     loads or how anything gets cached. */
  overflow: visible !important;
  display: flex !important;
  align-items: flex-start !important;
  padding: 20px 0 10px !important;
}
.landing-root .hero-bg{ display:none; } /* old dark-theme circles not needed */

/* decorative blue wave: thin strip along the right edge that
   bulges out behind the login card, then flares to full width
   at the very bottom (flowing straight into the footer bar) */
.hero-blue-blob{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-blue-blob svg{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  display:block;
}
.hero-blue-blob .dt-dots{
  position:absolute;
  top:6%; right:2%;
  width:150px; height:150px;
  background-image:radial-gradient(rgba(255,255,255,.35) 1.6px, transparent 1.6px);
  background-size:14px 14px;
  opacity:.5;
  border-radius:16px;
}
@media (max-width:900px){
  .hero-blue-blob{ display:none; }
}

.landing-root .hero-in{
  position:relative; z-index:1; width:100%; padding-bottom:20px !important;
  background:transparent; display:flex !important; align-items:center;
  gap: clamp(16px, 4vw, 40px);
  max-width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  /* FIX: index.css likely sets an unscoped justify-content:space-between
     on .hero-in for the desktop row layout (text left / login card
     right). That same rule bleeds into the mobile column layout below
     and stretches the two blocks to the top/bottom of the whole hero,
     creating a big empty gap in between. Force it here so "gap" above
     is the only thing controlling the spacing. */
  justify-content: flex-start !important;
}
@media (min-width:901px){
  .landing-root .hero-in{
    /* keep the whole row from stretching edge-to-edge on wide screens,
       and center the (now closer-together) text+login group */
    max-width: 1180px !important;
    margin: 0 auto !important;
  }
  .landing-root .end-left{
    /* FIX: index.css likely gives .end-left flex:1, which lets it grow
       to fill all the remaining row width and shoves the login card
       all the way to the far edge. Capping it here keeps the text
       block and the login card close together. */
    flex: 0 1 560px !important;
    max-width: 560px !important;
  }
  .landing-root .hero-login{
    flex: 0 0 auto !important;
  }
}

/* decorative hills / clouds / duck silhouettes behind the left column,
   tucked between the description and the stat cards */
.landing-root .hero-scenery{
  position:absolute;
  top:250px;
  left:-10px;
  width:560px;
  max-width:56%;
  height:230px;
  z-index:0;
  pointer-events:none;
}
.landing-root .hero-scenery svg{ width:100%; height:100%; display:block; }
@media (max-width:900px){
  .landing-root .hero-scenery{ display:none; }
}

/* ── LEFT COLUMN ─────────────────────────────────────── */
.landing-root .end-left{
  position:relative;
  z-index:1;
  margin-top: 0;
  padding-top: 0;
}
.landing-root .hero-login{ z-index:2; }

.landing-root .hero-badge{
  background:var(--dt-pill);
  border:none;
}
.landing-root .hero-badge span{ color:var(--dt-blue); font-weight:800; display:inline-flex; align-items:center; gap:6px; }
.landing-root .hero-badge svg{ flex-shrink:0; }

/* brand-row pairs the logo with the title. On desktop the logo lives in
   the nav bar, so it stays hidden here — this row only springs into
   action on mobile (see the responsive block below), where the nav bar
   is hidden and the logo relocates next to the title instead. */
.landing-root .brand-row{
  display:block;
  margin-top:16px;
}
.landing-root .mobile-top-spacer{
  display:none;
}
.landing-root .hero-logo{
  display:none !important;
  height:1px !important;
  width:1px !important;
  max-width:1px !important;
  max-height:1px !important;
  overflow:hidden;
  object-fit:contain;
}
.landing-root .hero-dots{
  display:none; /* mobile-only decorative divider under the description */
}

.landing-root .hero-h1{
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:clamp(2.2rem,3.8vw,3.2rem);
  color:var(--dt-navy);
  letter-spacing:-.01em;
  margin-bottom:14px;
}
.landing-root .hero-h1 .accent{ color:var(--orange); }

.landing-root .hero-desc{
  color:var(--dt-navy);
  font-weight:800;
  font-size:1.05rem;
  line-height:1.5;
  max-width:520px;
  margin-bottom:16px;
}

.hero-accent-line{
  width:52px; height:5px; border-radius:99px;
  background:var(--dt-blue);
  margin-bottom:24px;
}

.landing-root .hero-stats-container{
  display:flex;
  gap:10px;
  margin-top:0;
  flex-wrap:wrap;
  
}
.landing-root .hs-card{
  background:#ffffff;
  border:1px solid var(--dt-border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15,38,96,0.06);
  padding:10px 6px;
  flex:1 1 90px;
  min-width:90px;
  max-width:120px;
  text-align:center;
  color:var(--dt-navy);
}
.landing-root .hs-ic{
  width:30px; height:30px; margin:0 auto 6px;
  border-radius:50%;
  background:var(--dt-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--dt-blue);
}
.landing-root .hs-ic svg{ width:18px; height:18px; }
.landing-root .hs-value{
  font-size:1.15rem;
  font-weight:900;
  color:var(--dt-blue);
  line-height:1;
  margin-bottom:3px;
}
.landing-root .hs-label{
  font-size:.7rem;
  color:var(--dt-gray);
  font-weight:700;
  line-height:1.3;
}

/* ── LOGIN CARD ──────────────────────────────────────── */
.landing-root .hero-login{ position:relative; z-index:2; }

.landing-root .login-container.dt-card{
  background:#fff;
  border-radius:22px;
  box-shadow:0 24px 56px rgba(10,32,70,.2);
  padding:32px 34px;
  width:100%;
  max-width:440px;
  margin:0 auto;
}

.dt-title{
  font-family:'Nunito',sans-serif;
  font-size:1.5rem;
  font-weight:800;
  color:var(--dt-navy);
  text-align:center;
  margin:0 0 6px;
  line-height:1.05;
}
.dt-subtitle{
  text-align:center;
  color:var(--dt-gray);
  font-size:.94rem;
  margin:0;
  line-height:1.2;
}

.landing-root .dt-card .input-group{
  margin-bottom:18px;
  position:static;
}
.dt-card .input-group label{
  position:static;
  display:block;
  font-size:.85rem;
  font-weight:800;
  color:var(--dt-navy);
  margin-bottom:8px;
  pointer-events:auto;
  top:auto; left:auto; transform:none;
}
.dt-input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1.5px solid var(--dt-border);
  border-radius:11px;
  padding:0 14px;
  transition:var(--trans);
  position:relative;
}
.dt-input-wrap:focus-within{
  border-color:var(--dt-blue);
  box-shadow:0 0 0 3px rgba(27,74,166,.12);
}
.dt-card .input-group.invalid .dt-input-wrap{
  border-color:var(--red);
  background:rgba(192,57,43,.04);
}
.dt-ic{
  display:flex; align-items:center; justify-content:center;
  color:var(--dt-gray);
  flex-shrink:0;
}
.dt-card .input-group input{
  border:none !important;
  background:transparent !important;
  padding:13px 0 !important;
  font-size:.95rem;
  color:var(--dt-navy);
  flex:1;
  min-width:0;
  height:auto;
}
.dt-card .input-group input:focus{ box-shadow:none; }
.dt-card .input-group input::placeholder{ color:#A3ACC2; opacity:1; }

.dt-card .pw-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:var(--dt-gray);
  flex-shrink:0;
  z-index:1;
}
.dt-card .pw-toggle:hover{ color:var(--dt-blue); }
.dt-card .input-group input{ padding-right:38px !important; }

.dt-options{
  display:flex;
  justify-content:flex-start;
  margin:-6px 0 22px;
}
.dt-options .open-forgot{
  color:var(--dt-blue);
  font-size:.87rem;
  font-weight:800;
}
.dt-options .open-forgot:hover{ text-decoration:underline; }

.dt-login-btn{
  width:100%;
  background:var(--dt-blue);
  color:#fff;
  font-weight:800;
  font-size:1.02rem;
  padding:16px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(27,74,166,.32);
  transition:var(--trans);
}
.dt-login-btn:hover{ background:var(--dt-blue-dark); transform:translateY(-2px); box-shadow:0 18px 36px rgba(27,74,166,.38); }
.dt-login-btn:disabled{ opacity:.7; cursor:not-allowed; transform:none; }

.dt-register-hint{
  text-align:center;
  margin-top:20px;
  font-size:.86rem;
  color:var(--dt-gray);
}
.dt-register-hint a{ color:var(--dt-blue); font-weight:800; }
.dt-register-hint a:hover{ text-decoration:underline; }

/* error banner keeps working with the new card look */
.dt-card .login-error{
  display:block;
  margin:-6px 0 16px;
  color:var(--red);
  font-size:.82rem;
  font-weight:700;
}

/* forgot-password lock icon badge */
.dt-card .fp-illustration,
.modal-panel .fp-illustration{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  background:var(--dt-pill);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ── FOOTER ──────────────────────────────────────────── */
.landing-root .land-footer.dt-footer{
  background: transparent;
  justify-content:center;
  text-align:center;
  padding:20px 20px;
  position:relative;
  z-index:1;
  /* FIX: was "top: 40px" — on a position:relative element that only
     visually shifts the box without reserving the extra space, so the
     footer ended up clipped by the viewport/phone nav bar. margin-top
     actually reserves the space, so the whole footer is visible. */
  margin-top: 40px;
}
.dt-footer p{
  color:rgba(255,255,255,.9);
  font-size:.85rem;
  margin:0;
  font-weight:600;
}

/* ── TABLET (fills the gap between full desktop and the stacked
   mobile layout below, so the login card shrinks gradually instead
   of jumping straight to full width at 900px) ──────────────────── */
@media (min-width:901px) and (max-width:1180px){
  .landing-root .login-container.dt-card{
    max-width: 400px;
    padding: 28px 26px;
  }
  .landing-root .hero-stats-container{ gap:6px; }
  .landing-root .hs-card{ min-width:80px; max-width:106px; padding:8px 5px; }
}

/* ── RESPONSIVE (fluid — scales smoothly across ALL Android/iOS phones,
   not just fixed breakpoints, e.g. 320px SE, 360px Galaxy, 390px iPhone,
   412px Pixel, 430px Pro Max) ──────────────────────────────────────── */
@media (max-width:900px){
  body.landing-root{
    background-image: url('../IMAGES/indexMobile.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 0;
  }

  /* The nav bar's logo and "DUCKTRACK" text move down into the hero
     title (.brand-row) on mobile, so the nav bar itself is hidden
     rather than shown empty. */
  .landing-root .land-nav{
    display: none !important;
  }

  .landing-root .hero-in{
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(16px, 4vw, 22px) !important;
    /* nav bar is hidden on mobile now (its logo/title moved into the
       hero itself), so this only needs to clear the safe-area/notch. */
    padding-top: clamp(22px, 5vh, 32px) !important;
    padding-bottom: clamp(12px, 3vh, 18px) !important;
    padding-left: max(clamp(14px, 5vw, 22px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(14px, 5vw, 22px), env(safe-area-inset-right)) !important;
    width: 100%;
    max-width: 100%;
  }
  .landing-root .hero-in .end-left{
    text-align:center;
    width:100%;
  }

  /* badge pill + solid accent line aren't part of the mobile design —
     everything else (logo+title, description, dots, stats, login) shows. */
  .landing-root .hero-badge,
  .landing-root .hero-accent-line {
    display: none !important;
  }

  .landing-root .hero-in .end-left {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .landing-root .hero-login,
  .landing-root .hero-stats-container {
    width: 100% !important;
  }

  /* logo (relocated from the now-hidden nav bar) + title, side by side */
  .landing-root .mobile-top-spacer{
    display: block !important;
    width: 100%;
    height: clamp(14px, 4vw, 24px);
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
  }
  .landing-root .brand-row{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 12px);
    margin-top: clamp(6px, 2vw, 12px);
    margin-bottom: clamp(10px, 2.5vw, 14px);
  }
  .landing-root .hero-logo{
    display: block !important;
    height: clamp(30px, 8vw, 40px) !important;
    width: clamp(30px, 8vw, 40px) !important;
    max-height: 40px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    flex-shrink: 0;
  }
  .landing-root .hero-h1{
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    margin-bottom: 0;
  }
  .landing-root .hero-h1 .h1-colon{
    display: none;
  }

  .landing-root .hero-desc{
    display: block !important;
    font-size: clamp(.78rem, 3vw, .9rem);
    font-weight: 700;
    max-width: 360px;
    line-height: 1.5;
    margin: 0 auto clamp(14px, 3vw, 18px);
  }
  /* let the description wrap naturally on narrow screens instead of the
     desktop-authored hard line breaks */
  .landing-root .hero-desc br{ display:none; }

  /* small dotted divider under the description */
  .landing-root .hero-dots{
    display: block !important;
    width: clamp(60px, 20vw, 90px);
    height: 4px;
    margin: 0 auto clamp(16px, 3.5vw, 22px);
    background-image: radial-gradient(circle, var(--dt-blue) 1.4px, transparent 1.5px);
    background-size: 9px 4px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: .5;
  }

  /* stat cards: tight 3-across row on every phone width */
  .landing-root .hero-stats-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 3px;
    width:100%;
    margin-top:0;
    margin-bottom: 2px !important;
    flex-wrap:unset;
    justify-content:stretch;
    align-items: stretch;
  }
  .landing-root .hs-card{
    width:auto;
    min-width:0;
    max-width:none;
    flex:none;
    padding: clamp(5px, 1.4vw, 7px) clamp(2px, 0.8vw, 4px);
    border-radius: clamp(8px, 2vw, 10px);
  }
  .landing-root .hs-ic{
    width: clamp(18px, 5vw, 22px);
    height: clamp(18px, 5vw, 22px);
    margin: 0 auto clamp(3px, 1vw, 5px);
  }
  .landing-root .hs-ic svg{
    width: clamp(10px, 2.4vw, 12px);
    height: clamp(10px, 2.4vw, 12px);
  }
  .landing-root .hs-value{ font-size: clamp(.7rem, 2.6vw, .92rem); margin-bottom:2px; }
  .landing-root .hs-label{ font-size: clamp(.48rem, 1.7vw, .6rem); line-height:1.15; }

  .landing-root .hero-login{ width:100%; margin-top: clamp(20px, 5vw, 28px) !important; max-width:100vw; box-sizing:border-box; }
  .landing-root .login-container.dt-card{
    max-width:100%;
    width:100%;
    box-sizing:border-box;
    margin: 0 auto 6px auto;
    padding: 22px 20px 24px;
    border-radius: 16px;
    box-shadow: 0 10px 18px rgba(10,32,70,.12);
    overflow: hidden;
    min-height: auto;
    max-width: min(100%, 380px);
  }
  .landing-root .dt-title{ font-size: clamp(1.15rem, 4vw, 1.45rem); margin-bottom: 6px; }
  .landing-root .dt-subtitle{ font-size: clamp(.78rem, 2.6vw, .9rem); margin-bottom: 18px; }
  .landing-root .dt-card .input-group{ margin-bottom: 16px; }
  .dt-card .input-group label{ font-size: clamp(.74rem, 2.4vw, .8rem); margin-bottom:6px; }
  .dt-card .input-group input{ font-size: clamp(.85rem, 2.6vw, .9rem); padding:10px 0 !important; }
  .landing-root .dt-login-btn{
    padding: 13px;
    font-size: clamp(.86rem, 2.6vw, .96rem);
  }
  .dt-options{ margin: 2px 0 16px; }

  .landing-root .land-footer.dt-footer{
    /* FIX: same "top" → "margin-top" swap as the desktop rule above */
    margin-top: clamp(10px, 2vw, 16px);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .landing-root .land-footer.dt-footer p{ font-size: clamp(.7rem, 2.6vw, .85rem); }
}

/* Strong landing-specific mobile overrides to prevent login.css/index.css from breaking the layout */
@media (max-width:900px){
  body.landing-root {
    display: block !important;
    min-height: auto !important;
  }
  .landing-root .hero {
    flex: 0 0 auto !important;
    min-height: auto !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: 4px !important;
  }
  .landing-root .hero-in {
    max-width: 100% !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 8px !important;
    padding-left: max(clamp(12px, 5vw, 18px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(12px, 5vw, 18px), env(safe-area-inset-right)) !important;
  }
  .landing-root .hero-login {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 0 auto !important;
    padding: 0 !important;
  }
  .landing-root .login-container,
  .landing-root .login-container.dt-card {
    background: #ffffff !important;
    border: 1px solid rgba(27,74,166,.12) !important;
    box-shadow: 0 16px 34px rgba(10,32,70,.12) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 auto 10px auto !important;
    padding: 22px 20px 24px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    max-width: min(100%, 380px) !important;
  }
  .landing-root .login-container h2,
  .landing-root .dt-title {
    text-align: center !important;
  }
  .landing-root .dt-card .input-group {
    margin-bottom: clamp(16px, 3.5vw, 20px) !important;
  }
  .landing-root .dt-card .input-group input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .landing-root .dt-input-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }
  .landing-root .dt-login-btn {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .landing-root .hero {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: 4px !important;
  }
  .landing-root .land-nav .land-links,
  .landing-root .land-nav .menu-toggle {
    display: none !important;
  }
  .landing-root .hero-in {
    gap: 8px !important;
    padding-top: 0 !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  .landing-root .hero-stats-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }
  .landing-root .login-container,
  .landing-root .login-container.dt-card {
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }
  .landing-root .dt-card .input-group {
    margin-bottom: 14px !important;
  }
  .landing-root .dt-login-btn {
    padding: 13px !important;
  }
}

@media (max-width: 600px) and (max-height: 700px) {
  .landing-root .hero-stats-container,
  .landing-root .hero-accent-line,
  .landing-root .hero-badge {
    display: none !important;
  }
  .landing-root .hero-desc {
    max-width: 100% !important;
    margin-bottom: 14px !important;
  }
  .landing-root .dt-title {
    margin-bottom: 6px !important;
  }
  .landing-root .login-container,
  .landing-root .login-container.dt-card {
    padding: 18px 16px 20px !important;
  }
  .landing-root .dt-card .input-group {
    margin-bottom: 12px !important;
  }
  .landing-root .dt-login-btn {
    padding: 12px !important;
  }
  .landing-root .land-footer.dt-footer {
    margin-top: 8px !important;
  }
}

/* Very short viewports (iPhone SE 1st-gen @568px tall, older Android
   phones, or landscape mode) — the vh-based clamp() above already pulls
   things up automatically, this just sets a firm floor. */
@media (max-width:900px) and (max-height:620px){
  .landing-root .hero {
    padding-top: env(safe-area-inset-top) !important;
  }
  .landing-root .hero-in{ padding-top:24px !important; gap:8px !important; }
  .landing-root .hero-stats-container{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom:4px !important; }
  .landing-root .hero-badge, .landing-root .hero-accent-line{ margin-bottom:6px; }
}

/* Landscape phones — avoid excessive top padding eating the viewport */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .landing-root .hero-in{ padding-top:24px; padding-bottom:24px; }
  .landing-root .hero-badge,
  .landing-root .hero-accent-line{ margin-bottom:8px; }
}