/* ============================================================
   WAITLIST PAGE (index.html) — "Coming Soon"
   Built in NORMAL responsive document flow, the same way as
   resources.html: the branded blue rays/gradient is a full-bleed
   CSS background, and the logo, heading, form, social icons and
   wordmark are real elements in a centred flex column. Every size
   and gap uses rem / % / clamp(), so the whole page reflows
   smoothly on zoom (50–200%) and across screen sizes — no fixed
   overlays pinned to a fixed-ratio image.

   Brand background (no text baked in):
     desktop : bg-desktop.png (1440x1347)
     mobile  : bg-mobile.png  (780x1892)
   ============================================================ */

/* ---------- TRUE FULL-BLEED GUARANTEE ----------
   Kill any user-agent edge margin and clip horizontal overflow. The branded rays
   backdrop + the --wl-letterbox (#000004) base colour now live in the SHARED
   .theme-dark rule (dtii.css) so index and resources render the exact same
   full-bleed background with no seam/border. box-sizing:border-box is global. */
html,body{margin:0;padding:0;}
body.theme-dark{overflow-x:hidden;}

/* ---------- PAGE SHELL (full-bleed branded background) ---------- */
.wl-page{
  position:relative;
  /* full width, edge to edge — no max-width cap, no margin, no border */
  width:100%;
  max-width:none;
  margin:0;
  border:0;
  /* Exactly one viewport tall (svh = the SMALL viewport, so mobile browser UI
     can't push it past the fold) with the children sized in vh/clamp below so the
     whole page fits without a vertical scrollbar. overflow:hidden clips any
     sub-pixel rounding so no scrollbar (H or V) can appear. */
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Transparent: the branded blue rays + glow come from the SHARED fixed backdrop
     (.theme-dark::before in dtii.css) — the exact same artwork resources.html
     uses — so both pages sit in one identical visual world. This single-screen
     page simply lets that backdrop show through. */
  background:transparent;
}

/* Header (logo + top-right pill) now uses the SHARED .site-header / .site-pill
   components in dtii.css, identical to resources.html. */

/* ---------- CENTRED CONTENT (heading + form + socials) ---------- */
.wl-center{flex:1 1 auto;min-height:0;width:100%;max-width:78rem;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,2.4vh,1.8rem);text-align:center;
  padding:clamp(1rem,3vh,2.4rem) clamp(1rem,4vw,3rem);}

.wl-heading{
  font-family:'Ancorli','DM Sans',sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--white);line-height:.92;letter-spacing:-.02em;
  font-size:clamp(2.1rem, 5.7vw, 5.6rem);
  /* Greedy wrap (NOT the inherited text-wrap:balance, which spreads this to 3
     even lines). The wide .wl-center container lets line 1 hold "BUILDING
     INDIA'S TRUST" with "INFRASTRUCTURE." on line 2 — the desktop design's
     two-line break. */
  text-wrap:normal;
  max-width:none;margin:0 auto;
}
/* mobile-only line break inside the heading (see index.html) */
.wl-br-m{display:none;}

/* ---------- WAITLIST FORM (input pill + dark button) ---------- */
.wl-form{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:clamp(.6rem,1vw,.85rem);width:100%;max-width:40rem;}
.wl-input{
  flex:1 1 20rem;min-width:0;
  height:clamp(3rem, 2.7rem + 0.6vw, 3.4rem);padding:0 1.4rem;
  border-radius:999px;border:1px solid rgba(236,236,239,.6);
  background:rgba(236,236,239,.05);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  color:var(--on-dark);font-family:'DM Sans',sans-serif;
  font-size:clamp(.9rem,1vw,1rem);outline:none;transition:.2s;
}
.wl-input::placeholder{color:rgba(236,236,239,.7);}
.wl-input:focus{border-color:rgba(150,190,255,.9);box-shadow:0 0 0 3px rgba(0,93,248,.22);}

.wl-btn{
  flex:0 0 auto;height:clamp(3rem, 2.7rem + 0.6vw, 3.4rem);
  padding:0 clamp(1.5rem,2.2vw,2.1rem);
  border:0;border-radius:999px;color:var(--on-dark);
  /* subtle top-lit gradient + soft depth + inner highlight = tactile, premium */
  background:linear-gradient(180deg,#262523 0%,var(--wl-btn) 100%);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:clamp(.9rem,1vw,1rem);letter-spacing:.01em;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.wl-btn:hover{background:linear-gradient(180deg,#2f2d2b 0%,#1f1e1d 100%);transform:translateY(-2px);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.1);}
.wl-btn:active{transform:translateY(-1px);}
.wl-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}

/* ---------- VALIDATION + THANK-YOU (driven by assets/js/main.js) ---------- */
.wl-error{display:none;color:#ffb4b4;font-family:'DM Sans',sans-serif;font-size:.9rem;
  background:rgba(6,16,46,.6);border-radius:999px;padding:.4em .9em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.wl-error.show{display:inline-block;}

.wl-thanks{display:none;width:min(100%,34rem);text-align:center;color:#fff;
  font-family:'DM Sans',sans-serif;
  background:rgba(6,16,46,.7);border:1px solid rgba(150,190,255,.5);border-radius:1rem;
  padding:clamp(1rem,2vw,1.5rem) clamp(1.25rem,3vw,2rem);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.wl-thanks.show{display:block;}
.wl-thanks b{display:block;font-family:'Ancorli',sans-serif;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1rem,1.6vw,1.25rem);margin-bottom:.35rem;}
.wl-thanks span{color:rgba(236,236,239,.78);font-size:clamp(.85rem,1.1vw,1rem);}

/* ---------- SOCIAL ICONS (translucent brand pills) ---------- */
.wl-social{display:flex;justify-content:center;gap:clamp(.7rem,1.2vw,1.1rem);}
.wl-social a{width:clamp(2.6rem, 2rem + 1.6vw, 3.05rem);height:clamp(2.6rem, 2rem + 1.6vw, 3.05rem);
  border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(236,236,239,.55);background:rgba(8,18,48,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
    transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.wl-social a:hover{border-color:rgba(150,190,255,.85);background:rgba(0,93,248,.22);
  transform:translateY(-3px) scale(1.04);box-shadow:0 12px 26px -12px rgba(0,93,248,.55);}
.wl-social a:active{transform:translateY(-1px) scale(1);}
.wl-social img{width:42%;height:auto;display:block;transition:transform var(--dur) var(--ease);}
.wl-social a:hover img{transform:scale(1.06);}

/* ---------- WAITLIST CTA (standalone button that opens the modal) ---------- */
/* Visuals come from .wl-btn above; this just keeps it from stretching and gives
   it a comfortable min-width now that it's no longer paired with the input. */
.wl-cta{min-width:min(16rem,80vw);justify-content:center;}

/* ---------- WAITLIST MODAL ---------- */
/* Centered popup over a dark overlay; brand dark-blue surface, #005df8 accents,
   Ancorli heading + DM Sans body, pill inputs/buttons — built from the shared
   tokens in dtii.css. Mirrors the gated-download modal on resources.html. */
.wl-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.25rem;}
.wl-modal[hidden]{display:none;}
.wl-overlay{position:absolute;inset:0;background:rgba(0,6,22,.78);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}

.wl-dialog{position:relative;z-index:1;width:100%;max-width:30rem;
  /* Scroll INSIDE the dialog on short/mobile screens rather than the page. */
  max-height:calc(100vh - 2.5rem);max-height:calc(100svh - 2.5rem);overflow-y:auto;
  background:var(--brand-blue-2);border:1px solid var(--dark-line);border-radius:18px;
  padding:clamp(1.5rem,4vw,2.25rem);color:var(--on-dark);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85);
  animation:wlIn .2s ease both;}
@keyframes wlIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.wl-dialog{animation:none;}}

.wl-close{position:absolute;top:.85rem;right:.85rem;width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-size:1.35rem;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid var(--dark-line);color:var(--on-dark);transition:.2s;}
.wl-close:hover{background:rgba(255,255,255,.13);color:var(--white);}
.wl-close:focus-visible{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(0,93,248,.22);}

.wl-modal-title{font-family:'Ancorli','DM Sans',sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--white);letter-spacing:-.01em;font-size:clamp(1.4rem,3.5vw,1.75rem);
  margin:0 1.6rem .35rem 0;line-height:1;}
.wl-modal-sub{color:var(--on-dark-60);font-family:'DM Sans',sans-serif;
  font-size:.9rem;line-height:1.45;margin-bottom:1.2rem;}

/* .wl-field / .wl-field label / .wl-field input now come from the SHARED pill-input
   rule in dtii.css (identical to resources' download modal). */
.wl-field-error{color:#ff9b9b;font-family:'DM Sans',sans-serif;font-size:.78rem;padding-left:.4rem;}
.wl-field-error[hidden]{display:none;}

.wl-modal-error{color:#ff9b9b;font-family:'DM Sans',sans-serif;font-size:.85rem;margin:.2rem 0 .6rem;}
.wl-modal-error[hidden]{display:none;}

/* Submit — premium #005df8 pill: top-lit gradient + soft brand glow (matches the
   shared .btn-pill.solid so every primary button feels identical). */
.wl-submit{width:100%;justify-content:center;height:3rem;margin-top:.5rem;
  border:1px solid rgba(120,170,255,.55);
  background:linear-gradient(180deg,#1f72ff 0%,var(--blue) 55%,#0053e0 100%);
  box-shadow:var(--glow-blue),inset 0 1px 0 rgba(255,255,255,.22);}
.wl-submit:hover{transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(0,93,248,.7),inset 0 1px 0 rgba(255,255,255,.28);}
.wl-submit:active{transform:translateY(-1px);}
.wl-submit:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}

/* Inline success — replaces the form inside the modal (no Google redirect). */
.wl-modal-thanks{text-align:center;color:#fff;font-family:'DM Sans',sans-serif;
  background:rgba(0,93,248,.12);border:1px solid rgba(0,93,248,.3);border-radius:1rem;
  padding:clamp(1.1rem,3vw,1.6rem) clamp(1rem,3vw,1.5rem);}
.wl-modal-thanks[hidden]{display:none;}
.wl-modal-thanks b{display:block;font-family:'Ancorli','DM Sans',sans-serif;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1.05rem,2vw,1.3rem);margin-bottom:.4rem;}
.wl-modal-thanks span{color:rgba(236,236,239,.82);font-size:clamp(.85rem,1.1vw,1rem);}

/* ---------- BIG WORDMARK + SUBTITLE (full-bleed, bottom) ---------- */
/* Constrained, centred — matches the reference (Coming Soon Web 1440): the
   wordmark spans ~95% of the frame with a clear gap each side, it does NOT bleed
   to the screen edges. The side gap is a responsive padding (≈2.6vw ≈ 37px at
   1440 ≈ the design's ~36px), and the image is capped + auto-centred so it never
   grows unbounded on wide screens. The branded background stays full-bleed
   because only THIS wordmark block (not .wl-page) gets the side padding. */
.wl-wordmark{width:100%;flex:0 0 auto;margin-top:clamp(0.5rem,2vh,1.5rem);
  padding-inline:clamp(1rem,2.6vw,3rem);}
/* width drives the size on tall screens; max-height (vh) lets the wordmark shrink
   on short screens so the page never overflows. object-fit:contain keeps the
   aspect ratio when the height cap kicks in (no distortion — it just letterboxes
   into the transparent PNG, which is invisible against the dark page). */
.wl-wordmark img{width:100%;max-width:85rem;height:auto;max-height:clamp(7rem,26vh,17rem);
  object-fit:contain;display:block;margin-inline:auto;}

/* ---------- MOBILE (<=768px): match the mobile design (Coming Soon Mob 390) ---------- */
/* (the mobile rays-art swap now lives in the shared .theme-dark::before backdrop) */
@media(max-width:768px){
  /* The full-bleed mobile background (cover, bottom-anchored, no border/seam) now
     lives in the SHARED .theme-dark::before rule in dtii.css, so index + resources
     match. Here we just keep the hero itself truly full-width with no edge strip or
     border line. */
  .wl-page{overflow:visible;min-height:100svh;height:auto;
    width:100%;max-width:none;margin:0;border:0;outline:0;box-shadow:none;
    padding-bottom:clamp(1.6rem,4.4vh,2.6rem);}

  /* HEADER: centre the DTII logo like the mobile design (override the shared
     logo-left / pill-right phone layout). The Resources pill becomes a small
     floating top-right control again — the design shows only the centred logo, so
     it's kept compact and clear of the logo (verified no overlap at 360–414). */
  .wl-page .site-header{justify-content:center;}
  .wl-page .site-pill{position:absolute;
    top:clamp(0.8rem,2.6vw,1.2rem);right:clamp(0.8rem,3vw,1.1rem);}

  /* comfortable phone gutters + vertical rhythm */
  .wl-center{gap:clamp(1.5rem,3.6vh,2.3rem);padding:clamp(1.6rem,5vh,3rem) clamp(1.25rem,6vw,2rem);}
  /* enable the mobile line break -> BUILDING / INDIA'S TRUST / INFRASTRUCTURE. */
  .wl-br-m{display:inline;}
  /* three-line heading whose longest line ~84% width, like the design */
  .wl-heading{font-size:clamp(2.05rem,9.8vw,3rem);line-height:.96;}

  /* CTA: contained dark pill ~78% width, ~52px tall, ~16px label — matches the
     design's button (NOT full-width / oversized). */
  .wl-cta{width:min(20rem,78vw);min-width:0;flex:0 0 auto;height:3.25rem;font-size:1rem;}

  /* social: ~44px circles with the design's wider spacing */
  .wl-social{gap:1.4rem;}
  .wl-social a{width:2.75rem;height:2.75rem;}

  /* bottom wordmark: ~88% width with clear side margins (design proportion) */
  .wl-wordmark{margin-top:clamp(1.2rem,3.5vh,2.2rem);padding-inline:clamp(1.25rem,5.6vw,2rem);}
}

/* ---------- SMALL PHONES (<=480px): fine-tune sizes so nothing overflows ---------- */
@media(max-width:480px){
  .wl-heading{font-size:clamp(1.95rem,9.6vw,2.6rem);}
  .wl-cta{width:min(18.5rem,80vw);}
}

/* ---------- VERY NARROW (<=360px): shrink the floating pill so it clears the logo ---------- */
@media(max-width:360px){
  .wl-page .site-pill.nav-pill{font-size:0.7rem;padding:0.34rem 0.62rem;}
}