:root{
  --ink:#1d2a3a;        /* deep slate */
  --bg:#3d5a73;         /* slate blue wall */
  --bg2:#33506a;
  --kraft:#d8b47f;      /* price-tag card */
  --kraft-dark:#b8925c;
  --paper:#f6f3ec;
  --red:#b3261e;
  --ok:#2e6b3f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variation-settings:"wdth" 100;
  color:var(--ink);
  background:
    repeating-linear-gradient(90deg,var(--bg) 0 64px,var(--bg2) 64px 66px);
  min-height:100vh;
  line-height:1.5;
}
.wrap{
  max-width:1040px;margin:0 auto;padding:clamp(2rem,6vw,5rem) 1.25rem;
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1.15fr 1fr;align-items:start;
}
@media (max-width:820px){.wrap{grid-template-columns:1fr}}

/* The price tag */
.tag{
  position:relative;
  background:var(--kraft);
  padding:4.5rem 2.25rem 2.5rem;
  clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);
  box-shadow:inset 0 0 0 2px var(--kraft-dark);
  transform:rotate(-2.5deg);
  transform-origin:50% 0;
  animation:swing 1.6s cubic-bezier(.3,1.6,.5,1) both;
}
.hole{
  position:absolute;top:1.6rem;left:50%;width:22px;height:22px;margin-left:-11px;
  border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px var(--kraft-dark);
}
@keyframes swing{0%{transform:rotate(9deg)}100%{transform:rotate(-2.5deg)}}
@media (prefers-reduced-motion:reduce){.tag{animation:none}}

.kicker{
  margin:0 0 .5rem;font-weight:700;font-size:1.1rem;color:var(--red);
}
.domain{
  margin:0 0 1.25rem;
  font-weight:900;font-variation-settings:"wdth" 70;
  font-size:clamp(2.4rem,7vw,4.6rem);line-height:.95;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.lede{margin:0;max-width:38ch;font-size:1.1rem}

/* Form */
.form-card{
  background:var(--paper);padding:2rem;border-radius:4px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
}
.field{margin-bottom:1.1rem}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.35rem}
input,textarea{
  width:100%;font:inherit;color:var(--ink);
  padding:.7rem .8rem;border:2px solid #c9c2b4;border-radius:3px;background:#fff;
}
textarea{resize:vertical}
input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-color:var(--ink);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button{
  width:100%;font:inherit;font-weight:800;font-size:1.05rem;
  padding:.9rem 1rem;border:0;border-radius:3px;cursor:pointer;
  background:var(--ink);color:var(--paper);
}
button:hover{background:#000}
button[disabled]{opacity:.6;cursor:wait}
.status{min-height:1.5em;margin:.9rem 0 0;font-weight:600}
.status.ok{color:var(--ok)}
.status.err{color:var(--red)}