/* Dynamic Beyond — single-card coupon page, laid out like discounter2026.com */
:root{
  --backdrop:#8E7A7F;
  --card:#FFFFFF;
  --ink:#16232B;
  --muted:#7A868D;
  --line:#E7EAEC;
  --green:#12805C;
  --green-dk:#0D6B4C;
  --code-bg:#FFFFFF;
  --code-line:#E2E6E9;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 48%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 62%),
    var(--backdrop);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.promo-overlay{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

.promo-modal{
  width:100%;
  max-width:680px;
  background:var(--card);
  border-radius:18px;
  padding:44px 56px 34px;
  text-align:center;
  box-shadow:0 34px 70px -28px rgba(20,14,16,.45), 0 4px 14px rgba(20,14,16,.10);
}

.promo-logo{
  width:74px;
  height:74px;
  border-radius:999px;
  object-fit:contain;
  padding:13px;
  background:#F2FAF8;
  border:1px solid #E3F0EC;
  margin:0 auto 20px;
}

.promo-title{
  margin:0 0 22px;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* code + copy button share one rounded shell, as on the reference */
.promo-code-row{
  display:inline-flex;
  align-items:stretch;
  gap:0;
  background:var(--code-bg);
  border:1px solid var(--code-line);
  border-radius:999px;
  padding:5px;
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(20,14,16,.05);
}
.promo-code{
  display:flex;
  align-items:center;
  padding:9px 26px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  user-select:all;
}
.promo-copy{
  padding:10px 26px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-size:15px;
  font-weight:700;
  transition:background .16s;
}
.promo-copy:hover{background:var(--green-dk)}
.promo-copy:disabled{background:var(--green-dk);cursor:default}
.promo-copy:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.promo-note{
  margin:0 0 26px;
  font-size:14px;
  color:var(--muted);
}

.promo-footer{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  justify-content:center;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.promo-footer a{
  font-size:12px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
}
.promo-footer a:hover{color:var(--ink)}

@media (max-width:560px){
  .promo-modal{padding:34px 24px 26px;border-radius:14px}
  .promo-title{font-size:20px}
  .promo-code-row{width:100%}
  .promo-code{flex:1;justify-content:center;padding:9px 14px}
  .promo-copy{padding:10px 20px}
  .promo-footer{gap:14px}
}