@font-face{font-family:"Mukta";src:url(fonts/mukta-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"MuktaB";src:url(fonts/mukta-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Rozha";src:url(fonts/rozha.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --rani:#A8005A;
  --rani-deep:#7E0044;
  --haldi:#F7BE16;
  --haldi-pale:#FFF1B8;
  --ink:#2B0B2E;
  --ink-soft:#5A3F5C;
  --leaf:#0B6B41;
  --paper:#FFFDF6;
  --body:"Mukta","Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif;
  --bold:"MuktaB","Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif;
  --head:"Rozha","Noto Serif Devanagari","Nirmala UI",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:500 1.0625rem/1.55 var(--body)}
html[data-ui=hi] [data-l=en],html[data-ui=en] [data-l=hi]{display:none!important}
b,strong{font-family:var(--bold);font-weight:700}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.22;margin:0}
h2{font-size:1.75rem}
a{color:var(--rani);text-underline-offset:2px}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{max-width:32.5rem;margin:0 auto;padding:0 1.125rem}

/* Top of the page */
.hero{background:var(--rani);color:#fff}
.bar{display:flex;justify-content:space-between;align-items:center;padding:.625rem 0 .25rem}
.brand{font:400 1.375rem/1 var(--head);color:var(--haldi);text-decoration:none}
.toggle{background:none;border:2px solid #fff;color:#fff;border-radius:6px;padding:.25rem .75rem;min-height:40px;font-family:var(--bold);font-weight:700;font-size:.9375rem;cursor:pointer}
.toggle:focus-visible,.hero :focus-visible{outline-color:#fff}
.hero h1{font-size:2rem;color:#fff;padding:.5rem 0 .875rem}
.stage{display:grid;grid-template-columns:minmax(0,58%) minmax(0,1fr);gap:.875rem;align-items:start}
.stage canvas{display:block;width:100%;aspect-ratio:9/16;background:#6E0B20;border-radius:8px;box-shadow:0 0 0 3px var(--haldi)}
.side .price{font:400 3.5rem/1 var(--head);color:var(--haldi);margin:0}
.side p{margin:.5rem 0 0;font-size:1rem;line-height:1.4}
.side .note{font-size:.875rem;opacity:.92;margin-top:.75rem}
.cta{display:block;width:100%;min-height:56px;border:0;border-radius:10px;padding:.75rem 1rem;background:var(--haldi);color:var(--ink);font:700 1.25rem/1.25 var(--bold);text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.hero .cta{margin:1rem 0 1.25rem}
.bandhani{height:26px;background-color:var(--rani);background-image:radial-gradient(circle,#fff 2.5px,transparent 3px),radial-gradient(circle,#fff 2.5px,transparent 3px);background-size:18px 18px;background-position:0 0,9px 9px;border-bottom:4px solid var(--haldi)}

/* What people complain about, and the answer */
.answers{padding:2rem 0 1.25rem}
.answers h2{margin-bottom:.25rem}
.answers .src{color:var(--ink-soft);font-size:.9375rem;margin:0 0 .5rem}
dl{margin:0}
.row{padding:.875rem 0;border-bottom:2px solid var(--haldi-pale)}
.row:last-child{border-bottom:0}
dt{color:var(--ink-soft);font-size:1rem}
dt::before{content:"×";color:var(--rani);font-family:var(--bold);font-weight:700;margin-right:.375rem}
dd{margin:.125rem 0 0;font-size:1.125rem;line-height:1.45}

/* The form */
.make{background:var(--haldi-pale);padding:2rem 0 2.25rem}
.make h2{margin:0 0 .25rem}
.lede{margin:0 0 .75rem}
.typing{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:.75rem;align-items:start}
.mini{position:sticky;top:.5rem;z-index:3;width:104px;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.mini canvas{display:block;width:104px;aspect-ratio:9/16;border-radius:6px;box-shadow:0 0 0 2px var(--ink);background:#6E0B20}
.mini span{display:block;font-size:.8125rem;line-height:1.2;margin-top:.3125rem;text-align:center}
.mini span span{display:inline;margin:0}
.field{margin:0 0 1rem}
.field>label,legend{display:block;font-family:var(--bold);font-weight:700;margin-bottom:.25rem;padding:0;line-height:1.3}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],textarea{display:block;width:100%;min-height:50px;padding:.625rem .75rem;background:#fff;border:2px solid var(--ink);border-radius:8px;font-size:1.125rem;line-height:1.35}
textarea{resize:vertical}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#C4001A;border-width:3px}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none}
fieldset{border:0;margin:0 0 1rem;padding:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.seg label{display:block;background:#fff;border:2px solid var(--ink);border-radius:8px;cursor:pointer;text-align:center;line-height:1.2;overflow:hidden}
.seg label>span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:.25rem .5rem}
.seg input,.designs input{position:absolute;opacity:0;width:1px;height:1px}
.seg input:checked+span{font-family:var(--bold);font-weight:700;background:var(--ink);color:#fff}
.seg input:focus-visible+span,.designs input:focus-visible+canvas{outline:3px solid var(--rani);outline-offset:2px}
.designs{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
.designs label{display:block;cursor:pointer;text-align:center;line-height:1.25;font-size:.9375rem}
.designs canvas{display:block;width:100%;aspect-ratio:9/16;border-radius:6px;box-shadow:0 0 0 2px var(--ink);margin-bottom:.375rem;background:#ddd}
.designs input:checked+canvas{box-shadow:0 0 0 4px var(--rani)}
.designs input:checked~span{font-family:var(--bold);font-weight:700;color:var(--rani)}
.err{display:block;color:#A80016;font-family:var(--bold);font-weight:700;font-size:.9375rem;margin-top:.25rem}
.err:empty{display:none}
.hint{display:block;color:var(--ink-soft);font-size:.9375rem;line-height:1.35;margin-top:.25rem}
.hint:empty{display:none}
.make .cta{background:var(--rani);color:#fff;box-shadow:0 4px 0 var(--ink);margin-top:.25rem}
.make .cta:focus-visible{outline-color:var(--ink)}
.after{font-size:.9375rem;color:var(--ink-soft);margin:.75rem 0 0}

/* Questions */
.faq{padding:2rem 0 1.5rem}
.faq h2{margin-bottom:.5rem}
details{border-bottom:2px solid var(--haldi-pale)}
summary{font-family:var(--bold);font-weight:700;padding:.75rem 0;cursor:pointer;min-height:48px;line-height:1.35}
details p{margin:0 0 .875rem}

footer{background:var(--ink);color:#F3E7F2;padding:1.5rem 0 2rem;font-size:.9375rem}
footer a{color:#FFD23F;display:inline-block;padding:.375rem .75rem .375rem 0;min-height:40px}
footer p{margin:.5rem 0 0}

/* Full-screen preview and order steps */
.sheet{position:fixed;inset:0;z-index:20;overflow:auto;background:var(--ink);color:#fff}
.sheet[hidden]{display:none}
.player{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:100%;padding:.5rem .875rem .875rem}
.player canvas{display:block;height:calc(100vh - 12.75rem);height:calc(100dvh - 12.75rem);min-height:320px;aspect-ratio:9/16;max-width:100%;border-radius:8px;background:#000}
.tools{display:flex;gap:.5rem;width:100%;max-width:26rem}
.tool{flex:1;min-height:44px;background:none;border:2px solid #fff;color:#fff;border-radius:8px;cursor:pointer;font-size:.9375rem;line-height:1.15;padding:.25rem}
.tool[aria-pressed=true]{background:#fff;color:var(--ink);font-family:var(--bold);font-weight:700}
.sheet :focus-visible{outline-color:#fff}
.player .cta{max-width:26rem}
.wmnote{margin:0;font-size:.875rem;text-align:center;line-height:1.3}
.order{background:var(--paper);color:var(--ink)}
.order :focus-visible{outline-color:var(--ink)}
.order .wrap{padding-top:1rem;padding-bottom:2rem}
.back{background:none;border:0;color:var(--rani);font-family:var(--bold);font-weight:700;padding:.5rem 0;min-height:44px;cursor:pointer;text-decoration:underline}
.order h2{margin:.25rem 0 .75rem}
.summary{margin:0 0 1.25rem;padding:.75rem .875rem;background:var(--haldi-pale);border-radius:8px}
.summary p{margin:0 0 .25rem;line-height:1.4}
.summary .total{margin-top:.625rem;font-family:var(--bold);font-weight:700;font-size:1.25rem}
.consent{display:flex;gap:.625rem;align-items:flex-start;margin:0 0 1rem;cursor:pointer;line-height:1.4}
.consent input{width:24px;height:24px;flex:none;margin:.125rem 0 0;accent-color:var(--rani)}
.hp{position:absolute;left:-9999px}
.order .cta{background:var(--rani);color:#fff}
.order .cta[disabled]{opacity:.65}
.alert{background:#FFE3E6;border-left:5px solid #A80016;padding:.625rem .75rem;margin:0 0 1rem}
.alert:empty{display:none}

/* Legal and small pages */
.page{background:var(--rani);color:#fff}
.page .bar{padding-bottom:.625rem}
main.text{padding:1.25rem 0 2.5rem}
main.text h1{font-size:2rem;margin-bottom:.5rem}
main.text h2{font:700 1.1875rem/1.3 var(--bold);margin:1.5rem 0 .25rem}
main.text p,main.text li{max-width:38em}
main.text ul{padding-left:1.25rem}
.draft{background:var(--haldi-pale);border-left:5px solid var(--haldi);padding:.625rem .75rem;margin:0 0 1rem;font-size:.9375rem}

@media (min-width:46rem){
  .wrap{max-width:46rem}
  .hero h1{font-size:2.75rem}
  .stage{grid-template-columns:20rem 1fr;gap:2rem}
  .side p{font-size:1.1875rem}
  .side .price{font-size:4.5rem}
  .hero .cta{max-width:24rem}
  .make form{max-width:32rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.cta:active{transform:none}}
