/* ============================================================
   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.4rem,2.2vw,2rem);
  border:0;border-radius:999px;background:var(--wl-btn);color:var(--on-dark);
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:clamp(.9rem,1vw,1rem);
  cursor:pointer;white-space:nowrap;transition:.2s;
}
.wl-btn:hover{background:#262625;transform:translateY(-1px);}
.wl-btn:disabled{opacity:.6;cursor:default;transform: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:.2s;}
.wl-social a:hover{border-color:rgba(150,190,255,.85);background:rgba(0,93,248,.22);transform:translateY(-2px);}
.wl-social img{width:42%;height:auto;display:block;}

/* ---------- 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 — pill button with the #005df8 brand accent. */
.wl-submit{width:100%;justify-content:center;height:3rem;margin-top:.5rem;
  background:var(--blue);}
.wl-submit:hover{background:var(--blue-700);}
.wl-submit:disabled{opacity:.65;cursor:default;transform: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){
  /* Header: keep the DTII logo CENTRED like the mobile design (the shared
     .site-header drops to logo-left at <=560px; index overrides back to centre).
     The Resources pill stays floating top-right and is narrow enough not to clash. */
  .wl-page .site-header{justify-content:center;}
  .wl-page .site-header .brand-logo{height:clamp(1.55rem,7vw,1.95rem);}

  /* tighter phone gutters + comfortable vertical rhythm */
  .wl-center{gap:clamp(1.3rem,3.2vh,2rem);padding:clamp(1rem,3vh,2rem) clamp(1.25rem,6vw,2rem);}
  /* enable the mobile line break -> BUILDING / INDIA'S TRUST / INFRASTRUCTURE. */
  .wl-br-m{display:inline;}
  /* bigger, three-line heading that nearly spans the width, like the design */
  .wl-heading{font-size:clamp(2.1rem,9.6vw,3rem);line-height:.95;}

  /* CTA: a CONTAINED pill (NOT full-width) matching the design's button
     proportion — ~80% of the screen, centred, with clear side margins. */
  .wl-cta{width:min(19rem,80vw);min-width:0;flex:0 0 auto;}

  /* social row: slightly larger touch targets + a touch more breathing room */
  .wl-social{gap:1rem;}
}

/* ---------- SMALL PHONES (<=480px): fine-tune sizes so nothing overflows ---------- */
@media(max-width:480px){
  .wl-heading{font-size:clamp(2rem,9.8vw,2.55rem);}
  .wl-cta{width:min(17.5rem,82vw);}
}