:root {
  --cream: #EEE4DD;
  --cream-2: #F6F0EB;
  --navy: #223D6F;
  --navy-2: #1A2F57;
  --pink: #FE5DA8;
  --ink: #223D6F;
  --muted: #55688C;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.55 "DM Sans", system-ui, sans-serif;
}

h1, h2, h3, .eyebrow, .badge, .tag, button {
  font-family: "Oswald", "DIN Condensed", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Hero */
.hero {
  text-align: center;
  padding: 56px 16px 64px;
  max-width: 760px;
  margin: 0 auto;
}
.eyebrow { margin: 0 0 24px; font-weight: 500; letter-spacing: 0.22em; font-size: 14px; }
.logo { width: min(260px, 64vw); height: auto; display: block; margin: 0 auto 32px; }
h1 { font-size: clamp(34px, 7vw, 60px); line-height: 1.05; margin: 0 0 20px; font-weight: 600; }
.lede { max-width: 540px; margin: 0 auto 28px; color: var(--muted); }
.badge {
  display: inline-block; margin: 0;
  background: var(--pink); color: #fff;
  padding: 8px 18px; border-radius: 999px;
  font-size: 15px; letter-spacing: 0.12em; font-weight: 500;
}

/* Join */
.join { padding: 72px 16px 56px; max-width: 980px; margin: 0 auto; }
.join { max-width: 560px; }
.card { background: var(--navy); color: var(--cream); border-radius: var(--radius); padding: 32px 26px; }
.card h2 { margin: 0 0 8px; font-size: clamp(30px, 6vw, 40px); font-weight: 600; }
.tag { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.16em; color: var(--pink); font-weight: 500; }
.price { margin: 0 0 12px; font: 500 20px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.price span { font-size: 40px; font-weight: 600; margin-right: 6px; }
.opt { font-weight: 400; opacity: 0.7; }
.price span { color: var(--pink); }
.note { margin: 0 0 20px; font-size: 15px; opacity: 0.9; }

form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
input, select {
  font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid currentColor; background: transparent; color: inherit;
}
.card input { border-color: rgba(238, 228, 221, 0.6); }
input::placeholder { color: inherit; opacity: 0.5; }
input:focus, select:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
button {
  margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: 0.08em;
  padding: 14px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--pink); color: #fff;
}
button:hover { filter: brightness(1.06); }
button[disabled] { opacity: 0.6; cursor: wait; }
.status { margin: 0; min-height: 1.4em; font-size: 15px; font-weight: 500; }
.status.ok { color: var(--pink); }
.status.err { color: #FFB4B4; }
.fine { text-align: center; color: var(--muted); font-size: 14px; margin: 26px 0 0; }

footer { text-align: center; padding: 36px 16px 48px; background: var(--navy); color: var(--cream); font-size: 14px; }
footer img { display: block; margin: 0 auto 12px; border-radius: 50%; }
footer p { margin: 4px 0; opacity: 0.85; }

select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.card select { border-color: rgba(238, 228, 221, 0.6); }
select option { color: #223D6F; }

footer a { color: inherit; }

/* Legal notice page */
.legal { max-width: 720px; margin: 0 auto; padding: 40px 16px 64px; }
.legal .back { color: var(--navy); font-weight: 500; text-decoration: none; }
.legal h1 { font-size: clamp(26px, 5vw, 36px); margin: 24px 0 4px; text-transform: none; letter-spacing: 0.02em; }
.legal-sub { color: var(--muted); margin: 0 0 20px; }
.legal-note { background: var(--cream-2); border-left: 4px solid var(--pink); padding: 12px 16px; border-radius: 8px; font-size: 15px; }
.legal dl { margin: 28px 0 0; border-top: 1px solid rgba(34, 61, 111, 0.2); }
.legal dt { font-weight: 700; padding-top: 16px; }
.legal dt span, .legal dd span { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.legal dt span { display: inline; margin-left: 8px; }
.legal dd { margin: 4px 0 0; padding-bottom: 16px; border-bottom: 1px solid rgba(34, 61, 111, 0.2); }
.legal a { color: var(--navy); }