:root {
  color-scheme: light;
  --ink: #071e18;
  --green: #3f834b;
  --bright: #69c376;
  --paper: #f4f7f3;
  --muted: #65736c;
  --line: #d5ded8;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { min-height: 100dvh; margin: 0; background: radial-gradient(circle at 50% 0, #e3efe5, transparent 48%), var(--paper); }
main { min-height: 100dvh; padding: 32px 18px 22px; display: grid; place-items: center; align-content: center; gap: 24px; }
.access-card { width: min(100%, 650px); padding: clamp(28px, 6vw, 54px); border: 1px solid var(--line); border-radius: 28px; background: rgb(255 255 255 / 93%); box-shadow: 0 28px 80px rgb(7 30 24 / 10%); }
.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 48px; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: var(--ink); color: white; font-size: .8rem; font-weight: 950; letter-spacing: -.05em; }
.brand small, .brand strong { display: block; }
.brand small { color: var(--green); font-size: .62rem; font-weight: 900; letter-spacing: .13em; }
.brand strong { margin-top: 3px; font-size: 1.15rem; }
.brand .coming-soon { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; font-weight: 650; }
.eyebrow { margin: 0 0 13px; color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .15em; }
h1 { max-width: 560px; margin: 0; font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: .96; letter-spacing: -.06em; }
.intro { margin: 24px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.intro b { color: var(--ink); }
.instruction { margin-top: 32px; padding: 20px; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; border: 1px solid #acd2b2; border-radius: 16px; background: #edf7ee; }
.instruction > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-weight: 900; }
.instruction p { margin: 0; color: var(--ink); font-weight: 750; line-height: 1.5; }
.help { margin: 18px 0 0; color: var(--muted); font-size: .8rem; text-align: center; }
.contact { margin: 12px 0 0; color: var(--muted); font-size: .82rem; text-align: center; }
.contact b { color: var(--ink); }
.contact a { color: var(--green); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact a:hover, .contact a:focus-visible { color: var(--ink); }
footer { color: var(--muted); font-size: .72rem; }

@media (max-width: 520px) {
  main { padding-inline: 12px; }
  .access-card { padding: 28px 22px; border-radius: 22px; }
  .brand { margin-bottom: 38px; }
}