/* Landscape supplies the atmosphere; one quiet sheet holds the whole welcome. */
html[data-design=landscape] .design-home {
  background: #c5c4ad;
}
.funnel-welcome {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--review-height, 0px));
  padding: 40px 24px;
  display: grid;
  place-items: center;
}
.welcome-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #c5c4ad;
}
.welcome-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 65% 60%;
  /* Start partway through the pan so movement is visible immediately. */
  animation: landscape-drift 18s linear -6s infinite alternate;
}
.welcome-scene::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 65% 25%, #fff7dbb3, #f5eed933 35%, transparent 65%);
  animation: landscape-light 14s cubic-bezier(.45, 0, .55, 1) -4s infinite alternate;
}
@keyframes landscape-drift {
  from { transform: scale(1.045) translate3d(-1.2%, .4%, 0); }
  to { transform: scale(1.14) translate3d(1.2%, -1.8%, 0); }
}
@keyframes landscape-light {
  from { transform: translate3d(-8%, -2%, 0); opacity: .18; }
  to { transform: translate3d(8%, 4%, 0); opacity: .58; }
}
html[data-design=landscape] .quiz-page,
html[data-design=landscape] .result-page {
  background: #9ba58b url('/art/zondo-olive-hills-v1.webp') center / cover fixed;
}
html[data-design=landscape] .quiz-welcome .welcome-landscape {
  background-image: url('/art/zondo-olive-hills-v1.webp');
  background-position: center 58%;
}
.welcome-frame {
  width: min(100%, 760px);
  padding: 38px 48px 42px;
  border-radius: 22px;
  background: #f7f4ed;
  color: #303624;
  text-align: center;
}
.welcome-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 42px/1 'Instrument Serif', Georgia, serif;
  letter-spacing: -1.5px;
}
.welcome-brand .design-mark { width: 28px; height: 34px; }
.welcome-message { margin: 48px auto 0; }
.welcome-message h1 {
  font: 400 80px/.98 'Instrument Serif', Georgia, serif;
  letter-spacing: -1.8px;
}
.welcome-message h1 em {
  display: inline-block;
  margin-top: 10px;
  color: #69774b;
  font-size: .67em;
  font-weight: 400;
  letter-spacing: -1px;
}
.welcome-message > p {
  max-width: 370px;
  margin: 26px auto 0;
  color: #626b55;
  font: 400 14px/1.75 'Manrope', sans-serif;
  text-wrap: pretty;
}
.welcome-capabilities {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 29px 0 0;
  list-style: none;
  color: #47533a;
  font: 500 12px/1.6 'Manrope', sans-serif;
}
.welcome-capabilities li + li::before {
  content: '·';
  margin: 0 13px;
  color: #90977d;
}
.welcome-action { width: min(100%, 340px); margin: 31px auto 0; }
.welcome-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 16px 24px;
  border: 1px solid #343f26;
  border-radius: 30px;
  background: #343f26;
  color: #f8f5e9;
  font: 500 14px/1.4 'Manrope', sans-serif;
  transition: background .2s;
}
.welcome-start:hover { background: #4b5935; }
.welcome-start:focus-visible { outline: 2px solid #53673d; outline-offset: 5px; }
.welcome-start svg { width: 20px; height: 20px; }
.welcome-action > p {
  margin-top: 13px;
  color: #727961;
  font: 400 10px/1.6 'Manrope', sans-serif;
}
@media (max-width: 600px) {
  .funnel-welcome { padding: 24px 16px; }
  .welcome-scene img { object-position: 65% center; }
  .welcome-frame { padding: 32px 25px 31px; border-radius: 20px; }
  .welcome-brand { font-size: 36px; }
  .welcome-brand .design-mark { width: 25px; height: 30px; }
  .welcome-message { margin-top: 43px; }
  .welcome-message h1 { font-size: clamp(48px, 13.8vw, 65px); letter-spacing: -1.2px; }
  .welcome-message h1 em { font-size: .67em; letter-spacing: -.5px; margin-top: 11px; white-space: nowrap; }
  .welcome-message > p { font-size: 13px; line-height: 1.8; margin-top: 23px; max-width: 290px; }
  .welcome-capabilities { flex-direction: column; gap: 7px; margin-top: 26px; font-size: 13px; line-height: 1.6; }
  .welcome-capabilities li + li::before { content: none; }
  .welcome-action { margin-top: 29px; }
  .welcome-action > p { max-width: 250px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .funnel-welcome { padding-top: 16px; padding-bottom: 16px; }
  .welcome-frame { padding-top: 26px; padding-bottom: 26px; }
  .welcome-brand { font-size: 32px; }
  .welcome-message { margin-top: 29px; }
  .welcome-message h1 { font-size: 48px; }
  .welcome-message > p { margin-top: 20px; }
  .welcome-capabilities { margin-top: 20px; gap: 4px; }
  .welcome-action { margin-top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-scene img, .welcome-scene::after { animation: none; }
  .welcome-scene::after { opacity: .12; }
  .funnel-welcome { padding-bottom: 24px; }
  .welcome-start { transition: none; }
}