@font-face {
  font-family: Inter;
  src: url("/assets/brand/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color: #1d1d1f;
  font-family: Inter, system-ui, sans-serif;
  --muted: #59595f;
  --paper: #f5f5f7;
  --line: #e5e5e8;
  --yellow: #f3d329;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; line-height: 1.5; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid #876800; outline-offset: 4px; }
.skip { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 8px 12px; background: #fff; }
.skip:not(:focus) { clip-path: inset(50%); }
.wrap { width: min(1240px, calc(100% - clamp(32px, 8vw, 112px))); margin-inline: auto; }
.top { border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; min-height: 66px; }
.logo { display: block; width: clamp(134px, 17vw, 172px); height: auto; }
.hero { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); margin-top: clamp(18px, 4vw, 46px); border-radius: 24px; overflow: hidden; background: var(--paper); }
.copy { align-self: center; padding: clamp(26px, 4.5vw, 60px); }
h1 { font-size: clamp(32px, 4.1vw, 52px); line-height: 1.04; letter-spacing: -.065em; margin: 0 0 24px; text-wrap: balance; }
h1 span { display: block; }
.jungle { display: block; width: 100%; height: 100%; object-fit: cover; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 9px 17px; border: 1px solid transparent; border-radius: 50px; background: var(--yellow); color: inherit; text-decoration: none; font: inherit; font-weight: 700; cursor: pointer; }
.button:hover { background: #e9c821; }
.button:disabled { cursor: default; opacity: .6; }
.button.secondary { background: #fff; border-color: var(--line); }
.button.secondary:hover { background: var(--paper); }
.access { width: min(100%, 510px); margin: clamp(28px, 5vw, 66px) auto; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: 20px; scroll-margin-top: 18px; }
h2 { margin: 0; font-size: 29px; letter-spacing: -.045em; }
.access p { margin: 4px 0 18px; color: var(--muted); }
.access .notice { color: #8d291c; }
.access form { display: grid; gap: 13px; }
.access label { display: grid; gap: 5px; font-size: 14px; font-weight: 650; }
.access input:not([type="hidden"]) { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #b6b6ba; border-radius: 9px; color: inherit; font: inherit; font-size: 16px; }
.access .button { justify-self: start; margin-top: 3px; }
.footer { padding-block: 16px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

@media (max-width: 710px) {
  .hero { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  h1 { font-size: clamp(30px, 7.6vw, 50px); }
  .jungle { height: auto; }
}