/* content inside the windows: amelia's look (rounded headings, soft cards, folder steps) */
.wpage{font:14px/1.6 var(--nl-body);color:var(--nl-ink)}
.wpage h1{font:700 clamp(24px,4vw,34px)/1.1 var(--nl-display);color:var(--nl-pink);margin:0 0 6px;letter-spacing:-.025em;text-shadow:2px 2px 0 #fff,4px 4px 0 var(--nl-bubble)}
.wpage h1::after{content:" ✦";font-size:.5em;vertical-align:.6em;color:var(--nl-yellow);text-shadow:none}
.wpage h2{font:700 19px/1.2 var(--nl-display);color:var(--nl-ink);margin:18px 0 8px;letter-spacing:-.01em}
.wpage h1.sticker{display:inline-block;background:var(--nl-bubble);color:#e8577f;border-radius:16px;padding:6px 16px 8px;text-shadow:none;letter-spacing:-.03em;line-height:1.05}
.wpage h1.sticker::after{content:none}
.wpage h1.poster{font:900 clamp(26px,4.4vw,38px)/1 var(--nl-arial);text-transform:uppercase;letter-spacing:-.035em;color:#1a1420;text-shadow:none}
.wpage h1.poster::after{content:none}
.wpage h1.poster small{display:block;font-weight:300;font-size:1em;letter-spacing:-.02em}
.wpage h2 .hl{background:var(--nl-yellow);padding:0 6px;border-radius:3px}
.wpage h2 .hl.blue{background:var(--nl-blue)}.wpage h2 .hl.pink{background:var(--nl-bubble)}.wpage h2 .hl.lilac{background:#e2d3ee}.wpage h2 .hl.teal{background:#cdeaea}
.wpage p{margin:0 0 10px;max-width:62ch}
.wpage a{color:var(--nl-pink);font-weight:700;text-underline-offset:3px}
.lead{font-size:16px;margin-bottom:16px}
.muted{color:var(--xp-text-dim);font-size:13px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px;align-items:center}

/* folder steps, like her how_to_order post */
.steps{display:grid;gap:12px;margin:12px 0 4px}
.step{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center}
.step svg{width:70px;height:70px;filter:drop-shadow(0 5px 0 rgba(42,35,48,.1))}
.step .lbl{display:inline-block;font:600 12px var(--xp-font);background:#fff;border:1px solid var(--xp-dark);border-radius:4px;padding:2px 8px;margin-top:-6px;position:relative;left:6px}
.step .bubble{background:#fff;border-radius:22px;padding:14px 18px;color:#e8577f;font:500 15.5px/1.35 var(--nl-round);letter-spacing:-.012em;box-shadow:0 8px 22px rgba(109,79,176,.12)}
.step .bubble.ink{color:var(--nl-ink);font-weight:500}

/* xp-ish info boxes, like her nail prep post */
.box{background:#fff;border:1px solid #f1d9e4;border-radius:14px;padding:12px 16px;margin:0 0 12px;box-shadow:0 8px 20px rgba(109,79,176,.08)}
.box b.tag{display:inline-block;font:700 16px var(--nl-arial);padding:1px 8px;border-radius:3px;background:var(--nl-yellow);margin-bottom:6px}
.box b.tag.blue{background:var(--nl-blue)}.box b.tag.teal{background:#cdeaea}.box b.tag.lilac{background:#e2d3ee}.box b.tag.pink{background:var(--nl-bubble)}.box b.tag.green{background:#cfead6}
.box ul{margin:0;padding:0;list-style:none}
.box li{padding:5px 0;border-top:1px solid #f1e3ea;font:14.5px/1.45 var(--nl-arial)}
.box li:first-child{border-top:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}

/* pricing tiers, like her pricing guide */
.tier{background:#fff;border-radius:18px;padding:14px 18px;margin-bottom:12px;box-shadow:0 8px 20px rgba(109,79,176,.08)}
.tier h3{margin:0 0 6px;font:700 24px/1 var(--nl-display)}
.tier:nth-of-type(1) h3{color:#9fb8e8}.tier:nth-of-type(2) h3{color:#7cc6c6}.tier:nth-of-type(3) h3{color:#e8a9c0}
.tier p{margin:0;font:400 14.5px/1.5 var(--nl-body)}
.effective{display:inline-block;font:700 italic 13px var(--nl-body);color:#e0188c;text-decoration:underline;margin-bottom:10px}

/* sizing photos strip */
.sizing-pics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px}
.sizing-pics figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 10px;border:1px solid #f1d9e4;border-radius:14px;background:linear-gradient(180deg,#fff,var(--nl-blush));box-shadow:0 8px 20px rgba(109,79,176,.08)}
.sizing-pics svg{width:100%;max-width:200px;height:auto;aspect-ratio:4/3}
.sizing-pics figcaption{font:600 12px/1.3 var(--xp-font);color:#6b4257;text-align:center}
.sp-skin{fill:#ffdde6;stroke:#e9aec2;stroke-width:1.5}
.sp-nail{fill:#f7a8c4;stroke:#e58aa9;stroke-width:1}
.sp-shadow{fill:#2a2330;opacity:.08}
.mailbtn[hidden]{display:none}
.check{list-style:none;padding:0;margin:8px 0 14px}
.check li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font:600 15px/1.4 var(--nl-round);color:#55505c;letter-spacing:-.01em}
.check li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border:1px solid #9c5473;border-radius:2px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 4.5' fill='none' stroke='%23fa5b86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* custom order form */
form.order{display:grid;gap:4px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 12px}
.frow label,.fcol label{display:grid;gap:3px;font:600 12px var(--xp-font);color:#6b4257}
.fcol{display:grid;gap:10px}
textarea.xp{min-height:84px;resize:vertical;font-family:var(--nl-body);font-size:14px}
input.xp[type=file]{padding:10px;border:1px dashed #c79fb3;background:#fff7fa;cursor:pointer}
input.xp[type=file]::file-selector-button{font:600 12px var(--xp-font);margin-right:10px;border:1px solid #9c5473;border-radius:3px;background:linear-gradient(180deg,#fff,#fbe6ee);padding:4px 10px;cursor:pointer}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--xp-dark)}
.chk{display:flex;gap:8px;align-items:flex-start;font:13px var(--nl-body);margin:4px 0 10px}
.chk input{accent-color:var(--nl-pink);width:16px;height:16px;margin-top:2px}
.outbox{display:none;border:1px dashed #9c5473;background:#fff;padding:12px;margin-top:12px;border-radius:6px}
.outbox.show{display:block}
.outbox textarea{width:100%;height:150px;margin:8px 0;font:12px/1.4 var(--xp-font);border:1px solid var(--xp-dark);padding:8px}

/* sets grid */
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.set{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;border:1px solid #f1d9e4;border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(109,79,176,.08);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.set:nth-child(odd){transform:rotate(-1.2deg)}.set:nth-child(even){transform:rotate(1deg)}
.set:hover{transform:rotate(0) translateY(-4px) scale(1.03)}
.set img{width:100%;aspect-ratio:1;object-fit:contain;background:radial-gradient(circle at 50% 40%,#fff,var(--nl-blush));border-radius:10px}
.set b{font:600 12px var(--xp-font);color:var(--nl-ink)}
.set small{font:11px var(--xp-font);color:var(--xp-text-dim)}
.empty{padding:30px;text-align:center;color:var(--xp-text-dim)}

/* paint window body */
#win-paint .wbody{padding:0}
#paint-body{flex:1;min-height:0;display:flex;flex-direction:column}

/* about dialog bits */
.about{display:flex;gap:14px;align-items:flex-start}
.about img{width:56px;height:56px;border-radius:50%;background:#fff;flex:none}
.kbd{font:11px var(--xp-font);border:1px solid var(--xp-dark);border-bottom-width:2px;border-radius:3px;padding:0 4px;background:#fff}
@media (max-width:700px){
  .step{grid-template-columns:62px 1fr;gap:10px}
  .step svg{width:56px;height:56px}
  .wpage{font-size:14px}
}

/* window-specific type, mirroring the post each window comes from */
#win-sizing .lead,#win-order .lead{font:600 16px/1.45 var(--nl-round);color:#55505c;letter-spacing:-.01em}
#win-inside .wpage{font-family:var(--nl-arial)}
#win-inside .wpage h2 .hl{font-family:var(--nl-arial);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
#win-pricing .effective{font-family:var(--nl-body)}

/* ios zooms the page into any field under 16px and never zooms back out (after the rules above so it wins) */
@media (pointer:coarse){
  input.xp,select.xp,textarea.xp,.outbox textarea{font-size:16px}
}