:root {
  --linen: #F3F6E0;
  --lime: #DAFF98;
  --charcoal: #202423;
  --margin: 5.5vw;
  --small: clamp(12px, 0.85vw, 15px);
  --text: clamp(13px, 0.95vw, 16px);
  /* Readability without a box: a soft shadow on the type itself. */
  --lift: 0 0 22px rgb(14 20 16 / 0.55), 0 1px 2px rgb(14 20 16 / 0.35);
  /* One place to change when the licensed Helvetica arrives (@font-face above this rule). */
  --font: Helvetica, Arial, sans-serif; /* brand book Typography page: Helvetica Regular + Bold (not Helvetica Neue) */
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--charcoal); color: var(--linen); }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--linen); outline-offset: 4px; }

/* Background: still image, video on top once it plays, and a natural lens vignette — no band, no edge. */
.background { position: fixed; inset: 0; z-index: 0; }
.background img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.background video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.background video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .background video { display: none; } }
.background::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 85% at 40% 42%, rgb(16 24 18 / 0) 50%, rgb(16 24 18 / 0.5) 100%),
    linear-gradient(to top, rgb(16 24 18 / 0.35), rgb(16 24 18 / 0) 35%);
}

/* One screen, layout 1: label and language on top; logo, line and the call to action together; contact and city at the foot. */
.page {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  padding: 4.2vh var(--margin) 4.5vh;
  text-shadow: var(--lift);
}

.top { display: flex; justify-content: space-between; align-items: baseline; gap: 2em; font-size: var(--small); }
.lang { display: inline-flex; gap: 0.35em; align-items: baseline; }
.lang button { font: inherit; color: inherit; text-shadow: inherit; background: none; border: 0; padding: 0.2em 0.1em; cursor: pointer; opacity: 0.6; }
.lang button[aria-pressed="true"] { opacity: 1; border-bottom: 1px solid currentColor; }

.hero { align-self: center; }
.logo { margin: 0; width: min(40vw, 820px); line-height: 0; filter: drop-shadow(0 0 30px rgb(14 20 16 / 0.3)); }
.logo img { width: 100%; height: auto; display: block; }
.statement { margin: 1.6vw 0 3.2vw 0.3vw; font-size: clamp(20px, 2vw, 34px); line-height: 1.2; max-width: 22em; }

.bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2em; font-size: var(--text); }
.contact { text-decoration: none; border-bottom: 1px solid rgb(243 246 224 / 0.5); }

/* The call to action (Marc's pick, option 1): a see-through Fresh Linen field and, apart from it, a rounded Lime button with an arrow. */
.signup[hidden], .signup form[hidden] { display: none; }
.signup form { display: flex; gap: 10px; width: min(600px, 100%); text-shadow: none; }
.signup input[type="email"] {
  flex: 1; min-width: 0; height: 54px; font: inherit; font-size: 16px; color: var(--linen); border: 0; border-radius: 4px; padding: 0 18px; outline: none;
  background: rgb(243 246 224 / 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgb(243 246 224 / 0.28);
}
.signup input[type="email"]:focus { box-shadow: inset 0 0 0 1px rgb(243 246 224 / 0.7); }
.signup input::placeholder { color: rgb(243 246 224 / 0.8); }
.signup input:-webkit-autofill { -webkit-text-fill-color: var(--linen); caret-color: var(--linen); transition: background-color 9999s; }
.signup button {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--charcoal); background: var(--lime); border: 0; border-radius: 8px;
  cursor: pointer; white-space: nowrap; transition: background-color .25s cubic-bezier(0.16, 1, 0.3, 1), transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.signup button .arrow { display: inline-block; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
.signup button:hover:not([aria-disabled="true"]) { background: #e9ffc4; }
.signup button:hover:not([aria-disabled="true"]) .arrow { transform: translateX(4px); }
.signup button:active:not([aria-disabled="true"]) { transform: translateY(1px) scale(0.985); }
.signup button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.signup button[aria-disabled="true"] { opacity: 0.7; cursor: default; }
.signup-message:empty { display: none; }
.signup-message { margin: 0.9em 0 0; }
.signup-note { margin: 0.9em 0 0; font-size: 13px; opacity: 0.9; }
.contact:hover, .signup-note a:hover, .lang button:hover, .privacy a:hover { opacity: 0.75; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Until the language is set (see the script in <head>), the words stay hidden; the video shows. */
.i18n-pending .page { visibility: hidden; }
.signup button[aria-disabled="true"] .arrow { visibility: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (orientation: portrait) {
  /* On phones the light breaks through right behind the logo: a soft, edgeless shadow there (no band). */
  .background::after {
    background:
      radial-gradient(ellipse 100% 36% at 38% 36%, rgb(16 24 18 / 0.42), rgb(16 24 18 / 0) 100%),
      radial-gradient(ellipse 90% 85% at 40% 42%, rgb(16 24 18 / 0) 50%, rgb(16 24 18 / 0.5) 100%),
      linear-gradient(to top, rgb(16 24 18 / 0.4), rgb(16 24 18 / 0) 40%);
  }
  .page { padding: 3vh 7vw 4vh; }
  .hero { align-self: start; margin-top: 14svh; }
  .logo { width: 78vw; }
  .statement { font-size: 22px; margin: 16px 0 28px; }
  /* Phones: the field full width, the button compact underneath (full width read as too big). */
  .signup form { flex-direction: column; align-items: flex-start; }
  .signup input[type="email"] { flex: none; width: 100%; height: 50px; padding: 0 14px; }
  .signup button { flex: none; height: 46px; padding: 0 20px; font-size: 15px; }
}

/* Privacy and legal notice pages */
.privacy { max-width: 36em; margin: 0 auto; padding: 12vh 8vw; font-size: 16px; line-height: 1.5; }
.privacy-home { margin: 0 0 1.5em; line-height: 0; width: 140px; }
.privacy-home a { display: inline-block; }
.privacy-home img { width: 100%; height: auto; }
.privacy h1 { font-size: 1em; margin: 0 0 1.5em; }
.privacy h2 { font-size: 1em; margin: 3em 0 0.5em; padding-top: 1em; border-top: 1px solid rgb(243 246 224 / 0.25); }
.privacy h3 { font-size: 1em; font-weight: 400; margin: 1.6em 0 0.3em; opacity: 0.85; }
.privacy ul { margin: 0.4em 0 0.8em; padding-left: 1.2em; }
.privacy li { margin: 0.2em 0; }