/* i2i Perception: colours taken from the business card */
:root {
  --green: #0b3a33; --green-2: #0f734d;
  --copper: #b97a57; --bronze: #d4ac7a; --sand: #e9cfa6; --red: #d71920;
  --text: #efe4d2; --muted: #b9b09f;
  --line: rgba(212, 172, 122, 0.30);
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text);
  background: linear-gradient(180deg, var(--green) 0%, var(--green) 60%, #0a4a3b 88%, var(--green-2) 100%) fixed;
  font: 17px/1.65 "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
main { padding: 1.5rem 0.9rem 0; }

/* The box: full width on phones, grows on tablets, stops at a comfortable width on big screens */
.box {
  width: 100%; max-width: 560px; margin: 0 auto 1.5rem;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 14px;
}
/* Logo always matches the width of the box */
.logo { display: block; width: 100%; height: auto; margin: 0 0 1.6rem; }

.message p, .zh p { margin: 0 0 1em; }
.thanks { margin-top: 1.4em !important; }
.signoff { color: var(--bronze); }
.signoff strong { letter-spacing: .06em; }
.zh { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); line-height: 1.85; }

h2 { color: var(--bronze); font-weight: 400; letter-spacing: .04em; margin: 0 0 1rem; font-size: 1.5rem;
     font-family: "Century Gothic", Futura, "Avenir Next", Avenir, "Trebuchet MS", sans-serif; }
.zh-label { display: block; font-size: .85em; color: var(--muted); }
h2 .zh-label { display: inline; margin-left: .4em; }

form label { display: block; margin: 0 0 1rem; font-size: .95rem; color: var(--sand); }
input, select, textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem; font: inherit; color: var(--text);
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 8px;
}
select option { color: #000; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bronze); outline-offset: 1px; }
.check { display: flex; gap: .6rem; align-items: flex-start; color: var(--text); }
.check input { width: auto; margin-top: .4rem; flex: none; }
.btn {
  display: inline-block; cursor: pointer; padding: .8rem 2.2rem; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--copper), var(--sand)); color: #2c1d12;
  font: 700 1rem/1.2 "Century Gothic", Futura, "Avenir Next", Avenir, "Trebuchet MS", sans-serif; letter-spacing: .04em;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .6; cursor: wait; }
#form-status { margin: 1rem 0 0; min-height: 1.4em; }
#form-status.ok { color: #9fe0b5; } #form-status.err { color: #ff9b9b; }

footer { text-align: center; padding: .5rem 1rem 2.5rem; color: var(--muted); font-size: .9rem; }