/* app.css: the look of every page. The biodata itself is drawn by draw.js, not styled here. */
:root{--maroon:#7A1F3D;--maroon-d:#5A1430;--gold:#C9A227;--gold-l:#F3E3B0;--cream:#FBF5E9;--ink:#2B2320;--line:#E8DFCF;--muted:#6B6259;--green:#1E8E5A;
  --serif:"BD Serif","BD Devanagari","BD Telugu",Georgia,"Times New Roman",serif;--shadow:0 1px 2px #5a14300d,0 8px 24px #5a143012}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.5}
a{color:var(--maroon)}
img{max-width:100%;height:auto}
.wrap{max-width:1240px;margin:0 auto}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* top bar */
.top{background:var(--maroon-d);color:#fff;padding:10px 16px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font:700 20px var(--serif);letter-spacing:.3px;color:#fff;text-decoration:none}
.mark{width:13px;height:13px;background:linear-gradient(135deg,#F0CF73,#B8860B);transform:rotate(45deg);border-radius:2px;box-shadow:0 0 0 2px #ffffff30}
.top nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.top nav a{color:var(--gold-l);text-decoration:none;font-size:14px;padding:4px 11px;border-radius:16px;border:1px solid #ffffff40}
.top nav a.on{background:#fff;color:var(--maroon);border-color:#fff;font-weight:700}
.top small{color:var(--gold-l)}

/* heading area: what the tool does, one button, and three finished biodatas */
.hero{background:radial-gradient(90% 120% at 88% 0%,#A23057 0%,#7A1F3D00 62%),linear-gradient(165deg,#7A1F3D,#4C0F27);color:#fff;padding:34px 16px 40px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.hero.plain{padding:26px 16px 28px}
.hero.plain .wrap{display:block}
.hero h1{font:700 44px/1.12 var(--serif);color:#fff;margin:0 0 12px;letter-spacing:.2px}
.hero.plain h1{font-size:32px}
.hero p{margin:0;color:#F1E2D0;font-size:18px;max-width:600px}
.hero a{color:var(--gold-l)}
.cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:22px 0 0!important}
.ghost{font-weight:600;text-underline-offset:3px}
.promises{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:20px 0 0;font-size:14px;font-weight:600;color:var(--gold-l)}
.promises li::before{content:"\2713";color:#F0CF73;margin-right:6px}
.fan{position:relative;height:0;padding-bottom:calc(62.2% + 30px)}
.fan img{position:absolute;width:44%;height:auto;border:3px solid #fff;border-radius:5px;box-shadow:0 14px 34px #0008;background:#fff}
.fan img:nth-child(1){left:3%;top:24px;transform:rotate(-8deg)}
.fan img:nth-child(2){right:3%;top:24px;transform:rotate(8deg)}
.fan img:nth-child(3){left:28%;top:0}
/* a visitor who has already typed details gets straight to the form */
body.back .hero{padding:16px 16px 18px}
body.back .hero .wrap{display:block}
body.back .hero h1{font-size:24px;margin:0}
body.back .fan,body.back .cta,body.back .herotext p,body.back .promises{display:none}

/* the tool */
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:22px 16px 16px;align-items:start;scroll-margin-top:8px}
#app{scroll-margin-top:0}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.card h2{display:flex;align-items:center;gap:10px;font:700 19px/1.2 var(--serif);color:var(--maroon);margin:0 0 14px}
.num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--maroon);color:#fff;font:700 14px system-ui,sans-serif}
/* the detail sections fold */
.sec{padding:0;scroll-margin-top:12px}
.sec h2{margin:0}
.sechead{display:flex;align-items:center;gap:10px;width:100%;padding:16px 18px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:16px}
.sechead:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sec:not(.open) .num{background:#fff;color:var(--maroon);box-shadow:inset 0 0 0 1.5px var(--maroon)}
.count{margin-left:auto;font:600 12px system-ui,sans-serif;color:var(--muted);background:#F4EEE2;border-radius:12px;padding:3px 9px;white-space:nowrap}
.count.some{background:#E3F3EA;color:#1B6B3F}
.chev{flex:none;width:9px;height:9px;border-right:2px solid var(--maroon);border-bottom:2px solid var(--maroon);transform:rotate(45deg);margin:0 5px 4px 4px;transition:transform .15s}
.sec.open .chev{transform:rotate(-135deg);margin-bottom:-4px}
.secbody{display:none;padding:0 18px 18px}
.sec.open .secbody{display:block}
.nextrow{display:flex;justify-content:flex-end;margin-top:16px}
.lastnext{display:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.wide,.wide{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
input[type=text],textarea,select{font:inherit;font-size:16px;padding:11px 12px;border:1px solid #D9CDB8;border-radius:10px;background:#FFFDF9;color:var(--ink);width:100%}
input::placeholder,textarea::placeholder{color:#B9AE9E}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);background:#fff}
textarea{min-height:84px;resize:vertical}
.check{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--muted);font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--maroon)}
.btn{display:inline-block;font:inherit;font-weight:700;border-radius:10px;border:1.5px solid var(--maroon);background:#fff;color:var(--maroon);padding:11px 16px;cursor:pointer;text-align:center;text-decoration:none}
.btn.primary{background:var(--maroon);color:#fff}
.btn.send{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 4px 12px #1e8e5a40}
.btn.gold{background:linear-gradient(#EDCB62,#C9A227);border-color:#B48C17;color:#3A2A00}
.btn.big{font-size:18px;padding:14px 28px;border-radius:12px;box-shadow:0 8px 22px #0005}
.btn.small{font-size:13px;padding:6px 11px;font-weight:600;border-width:1px}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.rowbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.card.rowbtns{background:none;border:0;box-shadow:none;padding:0 2px;justify-content:center}
.card.rowbtns .btn{border-color:#CFC4B2;color:var(--muted);font-weight:600;font-size:14px;padding:8px 14px;background:#fff9}
.seg{display:flex;border:1px solid #D9CDB8;border-radius:10px;overflow:hidden}
.seg button{flex:1;font:inherit;font-size:15px;padding:10px 4px;border:0;border-right:1px solid #D9CDB8;background:#FFFDF9;color:var(--ink);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--maroon);color:#fff;font-weight:700}
.custom{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;grid-column:1/-1}
.custom button{border:0;background:none;color:#9C1C1C;font-size:22px;cursor:pointer;padding:0 6px}
.quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;font-size:13px;color:var(--muted)}
.chip{font:inherit;font-size:13px;border:1px dashed #B9A98F;background:#FFFCF5;color:#5b4a3a;border-radius:14px;padding:5px 11px;cursor:pointer}
.chip::before{content:"+ "}
.templates{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-height:470px;overflow-y:auto;padding:9px 6px 4px 2px}
.tpl{border:2px solid var(--line);border-radius:10px;padding:6px 4px 6px;background:#fff;cursor:pointer;text-align:center;font:600 12px system-ui,sans-serif;color:var(--ink);position:relative;transition:border-color .12s,box-shadow .12s}
.tpl:hover{border-color:#C9B9A0}
.tpl.on{border-color:var(--maroon);box-shadow:0 0 0 3px #7A1F3D26}
.tpl.on::after{content:"\2713";position:absolute;left:-7px;top:-8px;width:20px;height:20px;border-radius:50%;background:var(--maroon);color:#fff;font:700 12px/20px system-ui,sans-serif}
.tpl canvas,.tpl img{display:block;width:100%;height:auto;border:1px solid #0002;border-radius:4px;margin-bottom:5px}
.emblems{display:flex;flex-wrap:wrap;gap:6px}
.emb{flex:none;border:2px solid var(--line);border-radius:10px;background:#fff;padding:4px 8px;min-height:52px;cursor:pointer;font:600 13px system-ui,sans-serif;color:var(--ink)}
.emb.on{border-color:var(--maroon);box-shadow:0 0 0 3px #7A1F3D26}
.emb img{display:block;height:40px;width:auto}
.emb.dup{opacity:.35}
.tpl em{position:absolute;top:-8px;right:-5px;font-style:normal;color:#fff;font-size:10px;padding:1px 6px;border-radius:9px}
.tpl em.pro{background:var(--gold)}
.tpl em.free{background:#2E7D32}
.tpl em.gold{background:linear-gradient(#F0CF73,#B8860B);color:#3A2A00;font-weight:700}
.more{margin:8px 0 0}
.offer{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.offer.goldoffer{border-color:#C9A227;background:#FFFBEF}
.offer h3{margin:0 0 4px;font:700 16px var(--serif);color:var(--maroon)}
.offer .btn{margin-top:8px;width:100%}
.photo-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.upload{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1.5px dashed #B9A98F;border-radius:12px;background:#FFFCF5;color:var(--maroon);font-weight:700;cursor:pointer}
.upload b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--maroon);color:#fff;font:700 18px/1 system-ui,sans-serif}
.vh:focus-visible+.upload{outline:2px solid var(--gold);outline-offset:2px}
.croprow{display:flex;gap:16px;align-items:center;margin-top:12px}
#crop{width:120px;height:150px;border:1px solid #CFC4B2;border-radius:6px;touch-action:none;cursor:grab;flex:none}
.croprow .field{flex:1}
input[type=range]{width:100%;accent-color:var(--maroon)}
.side{position:sticky;top:12px;min-width:0}
.sidehead{display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px}
.sidehead strong{font:700 17px var(--serif);color:var(--maroon)}
.backbtn{display:none}
.stage{background:#E4DACA;border-radius:14px;padding:14px}
#sheet{display:block;width:100%;height:auto;background:#fff;box-shadow:0 2px 14px #0003}
.actions{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin-top:12px}
.hint{font-size:13px;color:var(--muted);margin:8px 2px 0}
.hint.warn{color:#9C1C1C;font-weight:600}
.hint.ok{color:#1B5E20;font-weight:600}
.hint.saved{margin:0;padding:9px 12px;background:#E9F5EC;border-radius:10px}
.sponsor{font-size:14px;margin:10px 2px 0;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.sponsor small{color:var(--muted);margin-right:6px;text-transform:uppercase;font-size:10px;letter-spacing:.05em}
.mobilebar{display:none}
.pickwrap{display:none}
dialog{border:0;border-radius:16px;padding:22px;max-width:420px;width:calc(100% - 32px);box-shadow:0 20px 60px #0005}
dialog::backdrop{background:#0007}
dialog h2{font:700 21px var(--serif);color:var(--maroon);margin:0 0 8px}
dialog ul{margin:0 0 6px;padding-left:20px}
dialog .price{font:700 34px var(--serif);color:var(--maroon);margin:6px 0 0}

/* sample pictures */
.samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;padding:8px 16px 0}
.samples figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center;box-shadow:var(--shadow)}
.samples img{display:block;width:100%;border:1px solid #0001;border-radius:4px}
.samples figcaption{font-weight:700;margin:8px 0 6px}
.samples figcaption small{display:block;font-weight:400;color:var(--muted)}

/* reading text under the tool, and the trust pages */
.seo{padding:8px 16px 40px;max-width:860px}
.seo h2{font:700 25px/1.25 var(--serif);color:var(--maroon);margin:34px 0 10px}
.seo h3{font-size:17px;margin:18px 0 4px}
.seo p,.seo li{color:#3d3833;font-size:16px}
.seo li{margin:4px 0}
.seo .cta{margin-top:22px}
.related{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.related a{display:block;border:1px solid var(--line);background:#fff;border-radius:18px;padding:6px 14px;text-decoration:none;font-size:14px}
.todo{background:#FFF3CD;border:1px dashed #B8860B;padding:0 4px;border-radius:3px}
footer{background:var(--maroon-d);padding:22px 16px;color:#E9D9C4;font-size:13px;text-align:center;line-height:2}
footer a{color:var(--gold-l);margin:0 8px}

@media (max-width:900px){
  .hero{padding:24px 16px 30px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero h1{font-size:31px}
  .hero.plain h1{font-size:26px}
  .hero p{font-size:16px}
  .cta .btn.big{flex:1 1 100%}
  .fan{max-width:420px;width:100%;margin:0 auto}
  .app{grid-template-columns:minmax(0,1fr);padding-top:14px}
  .grid{grid-template-columns:1fr}
  .card{padding:16px}
  .sec{padding:0;scroll-margin-top:268px}
  .lastnext{display:inline-block}
  /* on a phone the designs and the emblems each sit in one row that scrolls sideways, to save height */
  .templates{display:flex;overflow-x:auto;overflow-y:visible;max-height:none;padding:9px 2px 6px 6px;scroll-snap-type:x proximity}
  .tpl{flex:0 0 29%;scroll-snap-align:start}
  .emblems{flex-wrap:nowrap;overflow-x:auto;padding:3px 3px 6px}
  /* a panel that stays at the top of the tool (owner's design, 14 Nov 2026): a live picture of the biodata on the left half,
     how far along the visitor is, Preview and Send on the right. Tapping the picture opens the preview. It steps aside while the keyboard is up. */
  .mobilebar{display:grid;position:sticky;top:0;grid-template-columns:44% 1fr;grid-template-rows:1fr auto auto 1fr;gap:10px 12px;
    padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 4px 14px #5a14301f;z-index:5}
  .mini{grid-row:1/5;width:100%;padding:0;border:1px solid var(--line);border-radius:5px;background:#fff;box-shadow:0 3px 12px #0003;cursor:pointer}
  .mini canvas{display:block;width:100%;height:auto;border-radius:4px}
  .prog{align-self:end;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.3}
  .prog i{display:block;height:6px;margin-top:6px;border-radius:3px;background:#EFE7D8;overflow:hidden}
  .prog b{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#C9A227,#1E8E5A);transition:width .25s}
  .mobilebar .btn[data-act]{align-self:start}
  body.typing .mobilebar{visibility:hidden}
  /* on a phone the preview is a full-screen sheet opened by the Preview button */
  .side{display:none}
  body.showprev .side{display:block;position:fixed;inset:0;z-index:20;background:var(--cream);overflow:auto;padding:12px 12px 24px}
  body.showprev .mobilebar{display:none}
  body.showprev{overflow:hidden}
  .backbtn{display:inline-block}
  .stage{padding:8px}
  /* the full-screen preview keeps the page short enough that the row of designs shows under it */
  #sheet{width:auto;max-width:100%;max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px);margin:0 auto}
  .pickwrap{display:block;margin-top:8px}
  .pickwrap h3{font:700 15px var(--serif);color:var(--maroon);margin:0 2px}
  .pick{position:relative;padding-top:10px}
  .pick .tpl{flex:0 0 22%}
  .actions{grid-template-columns:1fr 1fr}
  .actions .send{grid-column:1/-1;padding:13px 16px;font-size:17px}
}