/* ============================================
   WritingNepal — Sign-up gate (homepage for logged-out visitors)
   Loads on top of auth.css, only when wn_is_signup_gate() is true.
   See inc/signup-gate.php.
   ============================================ */

/* sketch colours that follow the light/dark theme */
.signup-gate .gs{ stroke:var(--ink); }
.signup-gate .gsf{ fill:var(--paper); }
.signup-gate .ginkf{ fill:var(--ink); }

/* the page scrolls past the card now, so drop the tall bottom padding */
.signup-gate .auth-shell{ flex:none; padding-bottom:0; }

/* ---- headline above the card ---- */
.gate-head{
  text-align:center;
  margin:0 auto 4px;
  padding:0 20px;
}
.gate-head h1{
  font-family:'Noto Serif Devanagari',serif;
  font-weight:900;
  font-size:clamp(1.5rem, 3.6vw, 2.1rem);
  line-height:1.3;
  margin:0;
  text-wrap:balance;
}
.gate-head h1 span{ color:var(--clay); }
.gate-head p{ margin:6px 0 0; color:var(--ink-soft); }

/* ---- scroll cue under the card ---- */
.gate-scroll-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:max-content;
  max-width:100%;
  margin:26px auto 0;
  color:var(--ink-soft);
  font-size:.88rem;
  text-align:center;
}
.gate-scroll-cue:hover{ color:var(--clay-deep); }
.gate-scroll-cue svg{ animation:gate-bob 1.8s ease-in-out infinite; }
@keyframes gate-bob{ 50%{ transform:translateY(4px); } }

/* ---- explainer ---- */
.gate-explain{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:56px 20px 64px;
  scroll-margin-top:16px;
}
.gate-explain-head{
  text-align:center;
  max-width:40rem;
  margin:0 auto 28px;
}
.gate-eyebrow{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clay-deep);
}
.gate-explain h2{
  font-family:'Noto Serif Devanagari',serif;
  font-weight:900;
  font-size:clamp(1.6rem, 3.8vw, 2.3rem);
  line-height:1.3;
  margin:6px 0 10px;
  text-wrap:balance;
}
.gate-explain-head p{
  font-family:'Noto Sans Devanagari','Work Sans',sans-serif;
  font-size:1.05rem;
  color:var(--ink-soft);
  margin:0;
}

/* loop: four circles in a row with dashed arrows; 2 × 2 on phones */
.gate-loop{ max-width:760px; margin:8px auto 40px; }
.gate-cycle{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.gate-cycle li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
.gate-cycle b{
  font-family:'Noto Sans Devanagari','Work Sans',sans-serif;
  font-size:.95rem;
  line-height:1.4;
}
.gate-node{
  width:76px;
  height:76px;
  border-radius:50%;
  border:2px solid var(--ink);
  display:grid;
  place-items:center;
}
.gate-node svg{ width:40px; height:40px; }
.gate-node--sky{ background:#E4EFF9; }
.gate-node--cream{ background:#FBEBC8; }
.gate-node--gold{ background:var(--gold); }
.gate-node--leaf{ background:#E6F2E9; }
.gate-node--sky .gs, .gate-node--cream .gs{ stroke:#120A08; } /* pale fills stay pale in dark mode, so keep the ink dark on them */
.gate-node--cream .gsf{ fill:#FBF8F2; }
.gate-ak{ font:700 1.6rem 'Noto Serif Devanagari',serif; color:#120A08; }
.gate-cycle li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:38px;
  left:calc(50% + 46px);
  right:calc(-50% + 46px);
  border-top:2px dashed var(--ink-soft);
}
.gate-cycle li:not(:last-child)::before{
  content:"";
  position:absolute;
  top:33px;
  right:calc(-50% + 44px);
  border:6px solid transparent;
  border-left:9px solid var(--ink-soft);
  border-right:0;
}
.gate-loop figcaption{
  text-align:center;
  color:var(--ink-soft);
  font-size:.9rem;
  margin-top:14px;
}

/* four step cards, picture alternating sides */
.gate-steps{ display:grid; gap:18px; }
.gate-step{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  align-items:center;
  background:var(--white);
  border:2px solid var(--line);
  border-radius:22px;
  padding:20px 24px;
}
.gate-step:nth-child(even){ grid-template-columns:1fr 150px; }
.gate-step:nth-child(even) .gate-pic{ order:2; }
.gate-pic{
  background:var(--paper-deep);
  border-radius:16px;
  aspect-ratio:1;
  max-width:100%;
  display:grid;
  place-items:center;
}
.gate-pic svg{ width:78%; height:auto; }
.gate-step-body{ min-width:0; }
.gate-step h3{
  font-family:'Noto Serif Devanagari',serif;
  font-weight:700;
  font-size:1.3rem;
  margin:0 0 6px;
  display:flex;
  gap:10px;
  align-items:baseline;
}
.gate-step h3 .n{ font-size:.9rem; color:var(--clay-deep); font-weight:800; }
.gate-step p{
  margin:0 0 8px;
  font-family:'Noto Sans Devanagari','Work Sans',sans-serif;
  font-size:1rem;
  line-height:1.8;
  max-width:58ch;
}
.gate-fact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--paper-deep);
  border-radius:999px;
  padding:4px 12px;
  font-size:.85rem;
  font-weight:600;
  margin:4px 6px 0 0;
}
.gate-fact i{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; }

.gate-final{
  margin-top:32px;
  text-align:center;
  border:2px dashed var(--line);
  border-radius:22px;
  padding:26px 18px;
}
.gate-final p{
  margin:0 0 14px;
  font-family:'Noto Serif Devanagari',serif;
  font-size:1.2rem;
  font-weight:700;
}
.gate-final-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

@media (max-width:640px){
  .gate-cycle{ grid-template-columns:1fr 1fr; row-gap:22px; }
  .gate-cycle li::after, .gate-cycle li::before{ display:none; }
  .gate-step, .gate-step:nth-child(even){
    grid-template-columns:84px 1fr;
    gap:14px;
    padding:16px;
    align-items:start;
  }
  .gate-step:nth-child(even) .gate-pic{ order:0; }
  .gate-step h3{ font-size:1.12rem; }
  .gate-explain{ padding:44px 16px 48px; }
}

@media (prefers-reduced-motion: reduce){
  .gate-scroll-cue svg{ animation:none; }
}