:root{
  --ink:#16110F; --ivory:#FAF6F0; --rose:#8C1C2B; --gold:#A9823F; --blush:#F1D8DA;
  --stone:#6D625A; --line:#E4DACB; --paper:#FFFFFF;
  --display:"Bodoni Moda","Didot","Hoefler Text",Georgia,serif;
  --body:"Jost","Futura","Avenir Next",-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.shell{max-width:480px;margin:0 auto;padding:0 22px 44px}

/* ---- header ---- */
.top{padding:22px 0 6px}
.mark{font-family:var(--display);font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:.01em}

/* ---- intro + questions ---- */
.intro{margin-top:18px}
.intro h1{font-family:var(--display);font-weight:500;font-size:33px;line-height:1.12;margin:0 0 10px}
.intro p{margin:0;color:var(--stone);font-size:15.5px}
.q{margin-top:26px}
.progress{display:flex}
.progress span{flex:1 1 0;height:2px;background:var(--line)}
.progress span+span{margin-left:4px}
.progress span.on{background:var(--gold)}
#qt{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.2;margin:6px 0 14px;outline:none}
.stepno{margin:22px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.options{display:grid;gap:9px}
.opt{position:relative;display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);
  padding:14px 40px 14px 16px;min-height:52px;font-family:var(--body);font-size:17px;color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s}
.opt::after{content:"\203A";position:absolute;right:16px;top:50%;transform:translateY(-52%);font-size:26px;line-height:1;color:var(--gold)}
.opt:hover,.opt:active{background:var(--blush);border-color:var(--gold)}
.opt:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;background:var(--blush)}
.back{background:none;border:0;padding:0;margin-top:20px;font-family:var(--body);font-size:14px;color:var(--stone);text-decoration:underline;cursor:pointer}
.back:hover{color:var(--rose)}

/* ---- result ---- */
.result{margin-top:14px}
.result h1{font-family:var(--display);font-weight:500;font-size:33px;line-height:1.12;margin:12px 0 16px;outline:none}
.photo{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#fff;border:1px solid var(--line)}
.photo img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#fff}
.photo .ph{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-family:var(--display);font-style:italic;font-size:22px;color:rgba(255,255,255,.7)}
.c-red{background:radial-gradient(circle at 40% 35%,#B03040,#6E1220)}
.c-pink{background:radial-gradient(circle at 40% 35%,#F6D3D8,#D99AA4)}
.c-lavender{background:radial-gradient(circle at 40% 35%,#D9CBEE,#A58CC8)}
.c-gold{background:radial-gradient(circle at 40% 35%,#F3E3B0,#C9A24A)}
.pick-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}
.pick-head .price{margin-left:14px}
.pick-head h2{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.2;margin:0}
.price{font-family:var(--display);font-size:22px;color:var(--rose);white-space:nowrap}
.detail{margin:6px 0 0;color:var(--stone);font-size:15px}
.why{margin:14px 0 0;font-size:16.5px;line-height:1.55}
.care{margin:10px 0 0;font-size:14px;color:var(--stone)}
.ship{margin:6px 0 0;font-size:13px;color:var(--stone)}
.note{margin:6px 0 0;font-size:13px;color:var(--rose)}
.btn{display:block;text-align:center;padding:16px 18px;font-family:var(--body);font-size:16px;font-weight:500;border:1px solid var(--ink);text-decoration:none;cursor:pointer;margin-top:18px;width:100%}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn.primary{background:var(--rose);border-color:var(--rose);color:var(--ivory)}
.btn.primary:hover{opacity:.93}
.btn.quiet{background:transparent;color:var(--ink)}
.btn.quiet:hover{background:var(--ink);color:var(--ivory)}

.testbar{background:#16110F;color:#FAF6F0;font-size:13px;line-height:1.4;padding:9px 14px;text-align:center}
.codebox{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:12px 14px;background:var(--blush);border-left:3px solid var(--rose)}
.codetext{flex:1 1 auto;min-width:0}
.codelabel{display:block;font-size:12px;color:#8A3B45}
.code{display:block;font-family:var(--display);font-size:21px;letter-spacing:.06em;color:#5C1520;line-height:1.25}
.codeoff{display:block;font-size:12.5px;color:#5C1520}
.copybtn{flex:0 0 auto;min-width:92px;text-align:center;margin-left:12px;background:transparent;border:1px solid #5C1520;color:#5C1520;padding:9px 16px;font-family:var(--body);font-size:14px;cursor:pointer}
.copybtn:hover{background:#5C1520;color:var(--ivory)}
.alts-title+.codebox{margin-top:0;margin-bottom:16px}

.dd-lead{margin:18px 0 0;font-size:14.5px;color:var(--stone)}
.hubs{margin-top:4px}
.btn.hub{background:transparent;color:var(--ink);margin-top:10px}
.btn.hub:hover{background:var(--rose);border-color:var(--rose);color:var(--ivory)}

.alts-title{font-family:var(--display);font-weight:500;font-size:19px;margin:34px 0 14px}
.alts{display:flex}
.alt{flex:1 1 0;min-width:0}
.alt+.alt{margin-left:14px}
.alt h4{font-family:var(--display);font-weight:500;font-size:15.5px;line-height:1.25;margin:10px 0 2px}
.alt-price{margin:0;color:var(--stone);font-size:14px}
.textlink{display:inline-block;margin-top:6px;color:var(--rose);font-size:14.5px;text-decoration:underline}
.textlink.hubtext{display:block;margin-top:8px}   /* one area per line (must come after .textlink) */

.sameday{margin:26px 0 0;font-size:15px;color:var(--stone)}
.sameday a{color:var(--rose)}

.lead{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.lead h3{font-family:var(--display);font-weight:500;font-size:21px;margin:0 0 6px}
.lead p{margin:0 0 16px;color:var(--stone);font-size:14.5px}
.lead label{display:block;margin-bottom:14px;font-size:13px;color:var(--stone)}
.lead input{display:block;width:100%;margin-top:5px;padding:12px;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line)}
.lead input:focus{outline:2px solid var(--gold);outline-offset:1px}
.opt-tag{font-style:italic;color:#A79E93}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formmsg{margin:12px 0 0;font-size:14px;color:var(--stone)}
.formmsg.err{color:var(--rose)}
.formmsg.ok{color:var(--ink);font-family:var(--display);font-size:17px}
.restart{display:block;margin:30px 0 0}

/* ---- footer ---- */
.foot{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--stone)}
.foot p{margin:3px 0}

@media (min-width:720px){
  .shell{padding-top:14px}
  .intro h1,.result h1{font-size:40px}
}