/* Digital Dawat — Free Demo maker page (/free)
   Brand: ivory #f8f1e4, maroon #4a1030, gold #A67D2B / #c49a56.
   Fonts: Cinzel + Cormorant Garamond + Jost. Zero emoji, SVG icons only. */
:root{
  --ivory:#f8f1e4; --paper:#fffdf8; --maroon:#4a1030; --maroon2:#5A0F1B;
  --gold:#A67D2B; --gold2:#c49a56; --line:#e3d5bd; --ink:#33241a; --muted:#7a6753;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:Jost,Arial,sans-serif;font-size:16.5px;line-height:1.55}
.container{max-width:1060px;margin:0 auto;padding:0 18px}
a{color:var(--maroon)}
h1,h2,h3{font-family:Cinzel,Georgia,serif;color:var(--maroon);margin:0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}

/* top bar (landing wali shakal) */
.topbar{position:sticky;top:0;z-index:50;background:rgba(248,241,228,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px}
.wordmark{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:2.5px;color:var(--maroon);text-decoration:none;font-size:17px}
.wordmark .diamond{display:inline-block;width:8px;height:8px;background:var(--gold2);transform:rotate(45deg);margin:0 3px;vertical-align:middle}
.topbar-actions{display:flex;align-items:center;gap:10px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1.5px solid var(--line);border-radius:50%;color:var(--maroon)}
.icon-btn svg{width:19px;height:19px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font:inherit;font-weight:600;letter-spacing:.3px;border-radius:999px;padding:12px 22px;font-size:15px;text-decoration:none;justify-content:center}
.btn svg{width:18px;height:18px}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;box-shadow:0 8px 20px rgba(166,125,43,.28)}
.btn-line{border:1.5px solid var(--gold);color:var(--maroon);background:transparent}
.btn-bar{padding:10px 18px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:default}

/* hero */
.fd-hero{padding:44px 0 8px;text-align:center}
.fd-hero h1{font-size:clamp(30px,6.4vw,46px);font-weight:600;line-height:1.16}
.fd-hero .shimmer{color:var(--gold)}
.fd-sub{max-width:62ch;margin:14px auto 0;font-size:17.5px;color:#5d4632}
.fd-points{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.fd-points span{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;color:var(--maroon)}
.fd-points svg{width:16px;height:16px;stroke:var(--gold)}

/* steps */
.fd-main{padding:26px 0 54px}
.fd-step-head{display:flex;align-items:center;gap:13px;margin:30px 0 16px}
.fd-step-num{font-family:Cinzel,Georgia,serif;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--gold2),var(--gold));border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.fd-step-head h2{font-size:clamp(20px,4.4vw,26px);letter-spacing:.6px}
.fd-loading{color:var(--muted);font-size:15px}

/* theme grid */
.fd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fd-card{position:relative;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);cursor:pointer;padding:0;text-align:left;font:inherit;transition:border-color .18s,box-shadow .18s}
.fd-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.fd-card .nm{display:block;padding:10px 12px;font-family:Cormorant Garamond,Georgia,serif;font-size:17.5px;font-weight:600;color:var(--maroon);line-height:1.25}
.fd-card .tick{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.fd-card .tick svg{width:15px;height:15px}
.fd-card.sel{border-color:var(--gold);box-shadow:0 10px 26px rgba(74,16,48,.16)}
.fd-card.sel .tick{display:inline-flex}
.fd-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:760px){.fd-grid{grid-template-columns:repeat(2,1fr)}}

/* form */
.fd-form{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 20px;box-shadow:0 8px 28px rgba(74,16,48,.07)}
.fd-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.fd-row{grid-template-columns:1fr}}
.fd-field label{display:block;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--maroon);margin:8px 0 7px}
.fd-opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.fd-field input{width:100%;padding:13px 14px;border:1px solid rgba(0,0,0,.18);border-radius:12px;background:#fff;font:inherit;font-size:16.5px;color:var(--ink)}
.fd-field select{width:100%;padding:13px 14px;border:1px solid rgba(0,0,0,.18);border-radius:12px;background:#fff;font:inherit;font-size:16.5px;color:var(--ink)}
.fd-field input:focus{outline:2px solid var(--gold2);outline-offset:1px;border-color:var(--gold)}
.fd-field select:focus{outline:2px solid var(--gold2);outline-offset:1px;border-color:var(--gold)}
.fd-rel-note-cell{display:flex;align-items:flex-end}
.fd-rel-note{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 4px}
.fd-err{margin:14px 0 0;padding:11px 13px;border-radius:10px;background:#fdecec;color:#8c1d18;font-size:14.5px;text-align:center}
.fd-make{width:100%;margin-top:18px;padding:15px;font-size:16.5px}
.fd-honest{font-size:13.5px;color:var(--muted);line-height:1.55;text-align:center;margin:14px auto 0;max-width:64ch}

/* result */
.fd-result{margin-top:26px}
.fd-result-card{background:linear-gradient(180deg,#fffdf8,#faf3e3);border:1.5px solid var(--gold2);border-radius:20px;padding:26px 22px;text-align:center;box-shadow:0 16px 40px rgba(74,16,48,.12)}
.fd-result-card h2{font-size:clamp(21px,5vw,27px);margin-bottom:14px}
.fd-link-lab{display:block;text-align:left;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--maroon);margin:10px 0 7px}
.fd-link-row{display:flex;gap:9px}
.fd-link-row input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--gold2);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--maroon)}
.fd-link-row .btn{flex:none;padding:11px 18px}
.fd-result-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.fd-dm{margin-top:24px;border-top:1px dashed var(--gold2);padding-top:20px}
.fd-dm-head{font-size:16px;color:var(--maroon);font-weight:600;margin:0 0 12px}
.fd-dm-btn{margin-top:14px}
.fd-fine{font-size:13px;color:var(--muted);line-height:1.55;margin:12px auto 0;max-width:58ch}

/* compare */
.fd-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
@media (max-width:640px){.fd-compare{grid-template-columns:1fr}}
.fd-col{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--paper)}
.fd-col h3{font-size:16px;letter-spacing:1px;margin-bottom:10px}
.fd-col ul{margin:0;padding-left:19px;color:#5d4632;font-size:15px;line-height:1.65}
.fd-col-real{border-color:var(--gold2);background:linear-gradient(180deg,#fffdf8,#faf3e3)}
.fd-foot-note{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}

/* footer */
.fd-footer{background:var(--maroon);color:#e9dcc4;text-align:center;padding:34px 0 28px;margin-top:10px}
.fd-footer .footer-wordmark{font-family:Cinzel,Georgia,serif;letter-spacing:3px;font-size:19px;color:#f3d894;margin:0}
.fd-footer .copyright{font-size:13px;opacity:.85;margin:10px 0 0}
.fd-footer a{color:#f3d894}