:root{
  --pine:#0a1c15; --pine2:#050f0b; --moss:#12301f; --moss2:#173d28; --rule:#285a3f;
  --brass:#d6a338; --brass2:#f5d27a; --brassd:#956b14;
  --mint:#3ccf8e; --mint2:#178a57; --cream:#efe2c2; --cream2:#dcc58f; --bark:#3b2810;
  --fg:#e3ede6; --dim:#97b5a5;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px;
  font:400 15px/1.5 "Source Sans 3",system-ui,sans-serif; color:var(--fg);
  background:
    linear-gradient(90deg,rgba(214,163,56,.06) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(rgba(214,163,56,.06) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(160deg,#0f2a1f,var(--pine) 50%,var(--pine2));
}

.wc{
  width:100%; max-width:960px; display:grid; grid-template-columns:1fr;
  background:var(--moss); border:2px solid var(--brassd); border-radius:6px;
  box-shadow:0 0 0 6px rgba(10,28,21,.9),0 0 0 7px var(--rule),0 30px 60px rgba(0,0,0,.55);
  overflow:hidden;
}

/* art panel */
.wc-art{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 18px 10px; background:linear-gradient(180deg,var(--moss2),#0c2418);
  border-bottom:2px solid var(--brassd);
}
.wc-art::before,.wc-art::after{
  content:""; position:absolute; width:34px; height:34px; border:4px solid var(--brass);
}
.wc-art::before{top:10px;left:10px;border-right:0;border-bottom:0}
.wc-art::after{bottom:10px;right:10px;border-left:0;border-top:0}
.wc-fox{width:170px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.wc-tag{
  font:15px/1 Righteous,sans-serif; letter-spacing:3px; text-transform:uppercase; color:var(--brass2);
  margin-top:6px;
}

/* offer panel */
.wc-body{padding:18px 18px 16px}
.wc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wc-logo{font:30px/1 Righteous,sans-serif;letter-spacing:4px;color:var(--brass2);text-shadow:0 0 18px rgba(214,163,56,.35)}
.wc-login{font-size:14px;font-weight:700;color:var(--fg);text-decoration:none;padding:6px 14px;border:1px solid var(--rule);border-radius:6px}
.wc-login:hover{border-color:var(--brass)}

.wc-plaque{
  display:block; text-align:center; font-weight:400; color:var(--bark);
  background:linear-gradient(180deg,var(--cream),var(--cream2));
  border-radius:4px; padding:12px 12px 10px; margin-bottom:12px;
  box-shadow:inset 0 0 0 3px var(--brassd),inset 0 0 0 5px var(--cream),inset 0 0 0 6px var(--brassd),inset 0 0 40px rgba(120,80,20,.3);
}
.wc-plaque small{display:block;font:600 12px/1 "Source Sans 3",sans-serif;letter-spacing:2px;text-transform:uppercase;color:#7a5418}
.wc-plaque b{
  display:block; font:400 66px/1.05 Righteous,sans-serif;
  background:linear-gradient(180deg,#fff0b5,var(--brass) 55%,var(--brassd));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.5px #6c4a0b; filter:drop-shadow(0 3px 0 rgba(90,55,10,.35));
}
.wc-plaque span{display:block;font:26px/1.1 Righteous,sans-serif;color:var(--bark)}

.wc-lead{font-size:14.5px;color:var(--dim);margin-bottom:10px}
.wc-lead a{color:var(--brass2);font-weight:700}

.wc-ticks{list-style:none;display:grid;grid-template-columns:1fr;gap:4px 16px;margin-bottom:14px;font-size:14px;font-weight:600}
.wc-ticks li{padding-left:22px;position:relative}
.wc-ticks li::before{
  content:""; position:absolute; left:2px; top:5px; width:10px; height:6px;
  border-left:3px solid var(--mint); border-bottom:3px solid var(--mint); transform:rotate(-45deg);
}

.wc-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.wc-btn{
  flex:1 1 220px; text-align:center; text-decoration:none; color:#fff;
  font:20px/1 Righteous,sans-serif; letter-spacing:1px; text-transform:uppercase;
  padding:15px 22px; border-radius:999px;
  background:linear-gradient(180deg,#5fe0a5,var(--mint) 45%,var(--mint2));
  border:2px solid var(--brass2); box-shadow:0 0 0 3px var(--brassd),inset 0 -3px 0 rgba(0,0,0,.2),0 10px 20px rgba(0,0,0,.4);
  text-shadow:0 2px 0 rgba(0,60,30,.45); transition:filter .15s;
}
.wc-btn:hover{filter:brightness(1.1)}
.wc-min{font-size:13px;color:var(--dim)}
.wc-tc{font-size:11.5px;color:var(--dim);margin-top:8px}

.wc-foot{
  display:flex; flex-direction:column; gap:2px; padding:10px 18px; font-size:11.5px; color:var(--dim);
  border-top:1px solid var(--rule); background:rgba(0,0,0,.25);
}
.wc-foot a{color:var(--brass2)}

@media (min-width:760px){
  .wc{grid-template-columns:340px 1fr}
  .wc-art{border-bottom:0;border-right:2px solid var(--brassd);padding:28px}
  .wc-fox{width:250px}
  .wc-body{padding:24px 28px 20px}
  .wc-ticks{grid-template-columns:1fr 1fr}
  .wc-foot{grid-column:1/-1;flex-direction:row;justify-content:space-between;padding:10px 28px}
}
@media (max-width:370px){.wc-plaque b{font-size:56px}.wc-plaque span{font-size:22px}}