/* Graphican — «Вебсайт хийлгэх үү?» block (markup: .github/scripts/lead_form.py · behaviour: assets/lead.js).
   Light on the home page (paper), .wl-dark on the cosmos pages. */
.wl { --w-ink:#271c40; --w-muted:#6a6178; --w-line:#dfdae4; --w-card:#ffffff; --w-soft:#f3eef8; --w-acc:#6d56fa; --w-on:#ede6ff; --w-bad:#c2410c;
  color:var(--w-ink); font-family:Inter, Arial, sans-serif; }
.wl-dark { --w-ink:#f4f1fb; --w-muted:#b8b1c9; --w-line:rgba(255,255,255,.14); --w-card:rgba(20,16,38,.72); --w-soft:rgba(255,255,255,.05); --w-acc:#9d80ff; --w-on:rgba(157,128,255,.18); --w-bad:#fdba74; }
.wl *, .wl *::before, .wl *::after { box-sizing:border-box; }
.wl-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:34px; border-bottom:1px solid var(--w-line); }
.wl-head > div { min-width:0; }
.wl-eyebrow { display:block; font-size:11px; font-weight:500; letter-spacing:.12em; line-height:1.6; margin-bottom:22px; }
.wl-head h1, .wl-head h2 { margin:0; font-size:clamp(40px, 7vw, 92px); line-height:.98; letter-spacing:-.01em; font-weight:400; }
.wl-head h1:not([lang="en"]), .wl-head h2:not([lang="en"]) { font-family:Inter, Arial, sans-serif; font-weight:800; letter-spacing:-.03em; font-size:clamp(36px, 6vw, 72px); }
.wl-head h2[lang="en"], .wl-head h1[lang="en"] { font-family:iBrand, Arial, sans-serif; letter-spacing:.012em; }
.wl-head p { max-width:360px; margin:0; color:var(--w-muted); font-size:15px; line-height:1.65; }
.wl-head p b { color:var(--w-ink); }
.wl-form { margin-top:30px; }
.wl-kinds { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; margin:0; padding:0; border:0; }
.wl-kinds legend, .wl-when legend { font-size:13px; font-weight:600; margin-bottom:12px; padding:0; }
.wl-kind { position:relative; display:block; cursor:pointer; }
.wl-kind input, .wl-chip input { position:absolute; opacity:0; pointer-events:none; }
.wl-kind span { display:flex; flex-direction:column; gap:6px; height:100%; padding:18px 18px 16px; border:1px solid var(--w-line); border-radius:16px; background:var(--w-card); transition:border-color .15s, background .15s, box-shadow .15s; }
.wl-kind b { font-size:16px; font-weight:700; }
.wl-kind small { font-size:13px; line-height:1.5; color:var(--w-muted); }
.wl-kind em { margin-top:auto; padding-top:10px; font-style:normal; font-size:12px; font-weight:600; color:var(--w-acc); }
.wl-kind:hover span { border-color:var(--w-acc); }
.wl-kind input:checked + span { border-color:var(--w-acc); background:var(--w-on); box-shadow:inset 0 0 0 1px var(--w-acc); }
.wl-kind input:focus-visible + span, .wl-chip input:focus-visible + span { outline:2px solid var(--w-acc); outline-offset:2px; }
.wl-other span { justify-content:flex-start; }
.wl-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(28px, 5vw, 72px); margin-top:40px; align-items:start; }
.wl-h3 { margin:0 0 16px; font-size:18px; font-weight:700; line-height:1.3; }
.wl-perks { list-style:none; margin:0 0 34px; padding:0; display:grid; gap:10px; }
.wl-perks li { position:relative; padding-left:28px; font-size:15px; line-height:1.5; }
.wl-perks li::before { content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--w-on);
  -webkit-mask:none; box-shadow:inset 0 0 0 1px var(--w-acc); }
.wl-perks li::after { content:""; position:absolute; left:6px; top:7px; width:6px; height:9px; border:solid var(--w-acc); border-width:0 2px 2px 0; transform:rotate(45deg); }
.wl-steps { list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:wl; }
.wl-steps li { position:relative; padding-left:46px; counter-increment:wl; display:grid; gap:2px; }
.wl-steps li::before { content:counter(wl); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--w-acc); border:1px solid var(--w-line); background:var(--w-card); }
.wl-steps b { font-size:15px; } .wl-steps span { font-size:14px; color:var(--w-muted); line-height:1.5; }
.wl-card { padding:clamp(22px, 3vw, 34px); border:1px solid var(--w-line); border-radius:22px; background:var(--w-card); box-shadow:0 24px 60px -36px rgba(39,28,64,.35); }
.wl-dark .wl-card { -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 30px 80px -40px rgba(109,86,250,.55); }
.wl-f { display:grid; gap:7px; margin:0 0 16px; padding:0; border:0; }
.wl-f > span, .wl-f legend { font-size:13px; font-weight:600; }
.wl-f i { font-style:normal; color:var(--w-acc); } .wl-f small { font-weight:400; color:var(--w-muted); }
.wl-f input, .wl-f textarea { width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--w-line); border-radius:12px; background:var(--w-soft); color:var(--w-ink); font:15px/1.4 Inter, Arial, sans-serif; outline:none; transition:border-color .15s, box-shadow .15s; }
.wl-f textarea { resize:vertical; min-height:104px; }
.wl-f input::placeholder, .wl-f textarea::placeholder { color:var(--w-muted); opacity:.75; }
.wl-f input:focus, .wl-f textarea:focus { border-color:var(--w-acc); box-shadow:0 0 0 3px var(--w-on); }
.wl-f [aria-invalid="true"] { border-color:var(--w-bad); }
.wl-when > div { display:flex; flex-wrap:wrap; gap:8px; }
.wl-chip { position:relative; cursor:pointer; }
.wl-chip span { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid var(--w-line); border-radius:999px; font-size:14px; background:var(--w-soft); }
.wl-chip input:checked + span { border-color:var(--w-acc); background:var(--w-on); color:var(--w-ink); font-weight:600; }
.wl-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.wl-go { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:54px; margin-top:6px; border:0; border-radius:999px; background:var(--w-ink); color:#fff; font:600 15px/1 Inter, Arial, sans-serif; cursor:pointer; transition:transform .2s, background .2s; }
.wl-go span { font-size:20px; }
.wl-go:hover { transform:translateY(-2px); background:#4e3683; }
.wl-dark .wl-go { background:linear-gradient(135deg, #9d80ff 0%, #6d56fa 48%, #4b33d9 100%); }
.wl-go:disabled { opacity:.6; cursor:default; transform:none; }
.wl-msg { min-height:20px; margin:10px 0 0; font-size:14px; color:var(--w-muted); }
.wl-msg.bad { color:var(--w-bad); font-weight:600; }
.wl-note, .wl-direct { margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--w-muted); }
.wl-direct a { color:var(--w-acc); font-weight:600; text-decoration:none; }
.wl-done { padding:28px 4px; text-align:center; }
.wl-done b { display:block; font-size:22px; margin-bottom:10px; }
.wl-done p { margin:0; color:var(--w-muted); line-height:1.6; }
.wl-done p b { display:inline; font-size:inherit; margin:0; color:var(--w-ink); }
@media (max-width:1100px) { .wl-kinds { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:820px) {
  .wl-head { flex-direction:column; align-items:flex-start; gap:18px; }
  .wl-grid { grid-template-columns:1fr; }
  .wl-card { order:-1; }
  .wl-kinds { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .wl-kind span { padding:14px; } .wl-kind small { font-size:12.5px; }
}
@media (max-width:380px) { .wl-kinds { grid-template-columns:1fr; } }

/* example websites (lead_form.examples) */
.wx { margin-top:34px; }
.wx .wl-h3 small { font-weight:400; font-size:14px; color:var(--w-muted); }
.wx-g { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.wx-c { display:block; color:inherit; text-decoration:none; }
.wx-v { position:relative; display:block; aspect-ratio:16/10; border-radius:16px; overflow:visible; }
.wx-v img:first-child { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:16px; box-shadow:0 0 0 1px var(--w-line), 0 24px 50px -28px rgba(20,10,50,.55); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.wx-m { position:absolute; right:-6px; bottom:-14px; width:28%; height:auto; aspect-ratio:390/844; object-fit:cover; object-position:top; border-radius:10px; border:3px solid #111; box-shadow:0 14px 30px -10px rgba(0,0,0,.5); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.wx-c:hover .wx-v img:first-child { transform:translateY(-4px); } .wx-c:hover .wx-m { transform:translateY(-10px) rotate(-2deg); }
.wx-t { display:grid; grid-template-columns:1fr auto; gap:2px 10px; margin-top:22px; }
.wx-t b { font-size:16px; } .wx-t small { grid-column:1; font-size:13px; color:var(--w-muted); } .wx-t em { grid-row:1 / 3; grid-column:2; align-self:center; font-style:normal; font-weight:700; font-size:14px; color:var(--w-acc); }
@media (max-width:1100px) { .wx-g { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:30px; } }
@media (max-width:520px) { .wx-g { grid-template-columns:1fr; } }