: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;
  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,
.landing-root .land-nav#nav,
#nav.land-nav{
  background: transparent !important;
  box-shadow: none !important;
  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{ margin-bottom:16px; }
.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;
  /* FIX: text/content right under the nav bar was getting covered
     because the nav sits on top of the hero (fixed/overlapping) with
     nothing reserving space for its height. Extra top padding pushes
     the hero content down so nothing hides behind the nav anymore. */
  padding: 110px 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;
  }
  /* Guaranteed breathing room between the nav bar and the hero content
     on desktop — bumped up from the base 110px since the nav can render
     taller than expected (logo + inner spacing), which was eating into
     that clearance and leaving little to no visible gap. */
  .landing-root .hero{
    padding-top: 150px !important;
  }
  .landing-root .hero-badge{
    margin-top: 0 !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:48px;
}
.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;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dt-card .pw-toggle:hover{ color:var(--dt-blue); }
.dt-card .input-group input{ padding-right:38px !important; }

/* password toggle icon visibility */
.pw-toggle .icon-eye-off{ display:none; }
.pw-toggle[aria-pressed="true"] .icon-eye{ display:none; }
.pw-toggle[aria-pressed="true"] .icon-eye-off{ display:block; }

.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;
}

/* ── FORGOT PASSWORD MODAL ──────────────────────────────
   FIX: the modal had no "hidden by default" rule anywhere in the
   stylesheets, so #forgotModal rendered on the page at all times
   instead of only after "Forgot Password?" is clicked. It is now
   hidden by default and only shown when JS marks it active — covers
   every common toggle pattern (class or aria-hidden) so it works no
   matter which one login.js uses. */
.modal,
#forgotModal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:1000 !important;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal.active, .modal.show, .modal.open, .modal[aria-hidden="false"],
#forgotModal.active, #forgotModal.show, #forgotModal.open, #forgotModal[aria-hidden="false"]{
  display:flex !important;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,32,70,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.modal-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  padding:32px 28px 28px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 60px rgba(10,32,70,.28);
  animation:fp-pop .18s ease-out;
}
@keyframes fp-pop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.modal-close{
  position:absolute;
  top:14px; right:14px;
  width:32px; height:32px;
  border:none;
  border-radius:50%;
  background:var(--dt-pill);
  color:var(--dt-blue);
  font-size:.95rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--trans);
}
.modal-close:hover{ background:var(--dt-blue); color:#fff; }

.modal-panel .modal-title{
  text-align:center;
  color:var(--dt-navy);
  font-weight:800;
  font-size:1.3rem;
  margin:0 0 4px;
}

.fp-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0;
  color:var(--dt-gray);
  font-size:.82rem;
}
.fp-divider hr{
  flex:1;
  border:none;
  border-top:1px solid var(--dt-border);
}

.fp-back{ text-align:center; font-size:.88rem; }
.fp-back a{ color:var(--dt-blue); font-weight:700; text-decoration:none; }
.fp-back a:hover{ text-decoration:underline; }

@media (max-width:480px){
  .modal-panel{ padding:26px 20px 22px; border-radius:16px; }
}

/* ── 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;
  }

  /* Per updated mobile design: keep the nav bar visible (white background)
     on mobile too — the hero section below still shows its own
     logo+title as well. */
  .landing-root .land-nav{
    display: flex !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(10,32,70,.06) !important;
    padding: 18px 20px !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 isn't part of the mobile design — everything else (nav,
     logo+title, description, accent line, stat cards, login) shows. */
  .landing-root .hero-badge {
    display: none !important;
  }
  .landing-root .hero-accent-line{
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    height: auto;
    background: none;
    margin: 0 auto clamp(14px, 3vw, 20px) auto !important;
  }
  .landing-root .hero-accent-line::before{
    content: "";
    display: block;
    width: clamp(40px, 10vw, 60px);
    height: 6px;
    border-radius: 99px;
    background: var(--dt-blue);
  }
  .landing-root .hero-accent-line::after{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange, #F5A623);
  }

  .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(28px, 6vw, 40px);
    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; }

  /* dotted divider is no longer used on mobile — the accent line below
     serves as the single divider under the description */
  .landing-root .hero-dots{
    display: none !important;
  }

  /* 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: calc(70px + 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: calc(64px + 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: calc(56px + 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; }
}

/* Footer stays in normal document flow at all breakpoints — sits after
   the hero content, at the true bottom of the page. Avoids overlap with
   the login card/stats that a position:fixed footer caused on tablet-ish
   widths where the hero hadn't stacked yet. */
@media (max-width:900px){
  .landing-root .land-footer.dt-footer{
    position:relative;
    margin-top: clamp(12px, 3vw, 20px) !important;
    padding:14px 16px max(14px, env(safe-area-inset-bottom)) !important;
    background:transparent;
  }
  .landing-root .land-footer.dt-footer p{
    font-size: clamp(.7rem, 2.6vw, .85rem) !important;
  }
}