@import url("https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Poppins:wght@400;500;600&display=swap");

:root{
  --rose:#CD7A7C;
  --euca:#5F8575;
  --cream:#F5F5F0;
  --brown:#8B7355;

  --bg: var(--cream);
  --card: #ffffff;
  --border: rgba(139,115,85,.18);
  --shadow: 0 16px 42px rgba(139,115,85,.18);

  --text: #2a2521;
  --muted: rgba(42,37,33,.72);
  --danger: #b54b4d;

  --radius: 18px;

  --font-head: "PT Serif", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--text);
  font-family: var(--font-body);
  background: #F5F5F0;
}

.wrap{
  max-width:540px;
  margin:0 auto;
  padding:20px 16px 44px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.95), #fff);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}

.badge{
  display: flex;
  
  width: max-content;
  margin: 0 auto;
gap:8px;
  align-items:center;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(205,122,124,.35);
  background:rgba(205,122,124,.12);
  color:rgba(42,37,33,.92);
  font-weight:600;

  text-align: center;
}

h1{
  font-family: var(--font-head);
  font-size:30px;
  line-height:1.12;
  margin:12px 0 8px;
  letter-spacing:-.02em;
}

.lead{
  margin:0 0 12px;
  color: var(--muted);
  line-height:1.5;
  font-size:15.5px;
}

.chips{
  justify-content:center;

  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 8px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(95,133,117,.35);
  background: rgba(95,133,117,.10);
  color: rgba(42,37,33,.88);
  font-size:12.5px;
  font-weight:500;
}

label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin:12px 0 6px;
  font-weight:600;
}

input[type="text"],
input[type="email"]{
  width:100%;
  font-size:18px;
  padding:14px 14px;
  border-radius: 14px;
  border:1px solid rgba(139,115,85,.25);
  background:rgba(245,245,240,.70);
  color:var(--text);
  outline:none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder{color:rgba(42,37,33,.45)}

input[type="text"]:focus,
input[type="email"]:focus{
  border-color: rgba(95,133,117,.75);
  box-shadow: 0 0 0 4px rgba(95,133,117,.18);
  background:#fff;
}

.consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.consent input{
  margin-top:2px;
  transform:scale(1.15);
  accent-color: var(--euca);
}

.privacyLink, .privacyFooter{
  display:inline-block;
  margin-left:6px;
  color: rgba(95,133,117,1);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight:600;
}

.privacyLink:hover, .privacyFooter:hover{
  color: rgba(95,133,117,.85);
}

.btn{
  width:100%;
  margin-top:14px;
  padding:14px 16px;
  font-size:18px;
  border-radius: 14px;
  border:0;
  cursor:pointer;
  font-family: var(--font-head);
  font-weight:700;
  background: linear-gradient(180deg, rgba(95,133,117,1), rgba(79,117,102,1));
  color:#fff;
  box-shadow: 0 10px 22px rgba(95,133,117,.22);
}

.btn:disabled{opacity:.6;cursor:not-allowed}

.fine{
  font-size:12px;
  color:rgba(42,37,33,.58);
  margin-top:10px;
}

.error{
  margin-top:12px;
  color:var(--danger);
  font-weight:700;
}

.center{text-align:center}
.muted{color:var(--muted)}

/* --- Forest amulet: minimalist + elegant --- */
.wheel{
  width:190px;height:190px;margin:16px auto 10px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(245,245,240,.95), rgba(245,245,240,.60) 38%, transparent 55%),
    conic-gradient(from 0deg,
      rgba(95,133,117,.95),
      rgba(205,122,124,.85),
      rgba(139,115,85,.85),
      rgba(95,133,117,.95)
    );
  border: 10px solid rgba(245,245,240,.96);
  box-shadow: 0 18px 44px rgba(139,115,85,.18);
  position:relative;
  transform:rotate(0deg);
}

.wheel::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:50%;
  border:1px solid rgba(139,115,85,.22);
  background: rgba(245,245,240,.35);
  box-shadow: inset 0 0 0 6px rgba(245,245,240,.35);
}

.wheel::after{
  content:"🗝️";
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:18px;
  line-height:1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.10));
}

.wheelSpark{
  position:absolute;
  inset:-10px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 35%, rgba(95,133,117,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 28%, rgba(205,122,124,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 70%, rgba(139,115,85,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 78%, rgba(95,133,117,.18) 0 2px, transparent 3px);
}

.spin{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.resultTitle{
  font-family: var(--font-head);
  font-size:22px;
  margin:10px 0 6px;
}

.codeBox{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  flex-wrap:wrap;
}

code{
  font-size:18px;
  background: rgba(245,245,240,.92);
  border:1px solid rgba(139,115,85,.22);
  padding:10px 12px;
  border-radius:12px;
  color: var(--brown);
  font-family: var(--font-head);
  font-weight:700;
  letter-spacing:.02em;
}

.btn2{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(95,133,117,.35);
  background: rgba(95,133,117,.10);
  color: var(--text);
  cursor:pointer;
  font-family: var(--font-body);
  font-weight:600;
}

.cta{
  display:block;
  text-align:center;
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(205,122,124,.35);
  text-decoration:none;
  color: var(--text);
  font-family: var(--font-head);
  font-weight:700;
  background: rgba(205,122,124,.10);
}

.cta:hover{
  background: rgba(205,122,124,.14);
}

.linkBtn{
  margin-top:12px;
  background:transparent;
  border:0;
  color: rgba(42,37,33,.65);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor:pointer;
  font-size:13px;
}

.linkBtn:hover{color: rgba(42,37,33,.85)}

.footnote{
  text-align:center;
  margin-top:14px;
  font-size:12px;
  color: rgba(42,37,33,.55);
}

.footnote a{
  color: rgba(42,37,33,.65);
  text-decoration: none;
}

.footnote a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* hard guarantee: hidden elements are not shown */
[hidden] { display: none !important; }


/* Keep form controls left-aligned while overall card stays centered */
form#form { text-align:left; }
form#form label { text-align:left; }
form#form .consent { justify-content:flex-start; text-align:left; }


.badge, h1, .lead { text-align:center; }