/* One-screen landing page. The signed-in product keeps its own styles. */
body.landing-page {
  color: #172520;
  background: radial-gradient(ellipse at 72% 43%, #f8f7ef 0%, #efefe6 35%, #dfe5dc 100%);
}

.landing-page .site-header {
  height: 78px;
  background: transparent;
  border-bottom: 1px solid rgba(35, 56, 47, .12);
  position: relative;
  z-index: 5;
}

.landing-page .brand { color: #14231d; letter-spacing: -.06em; }
.landing-page .brand span { color: #697e70; }
.landing-page .site-header nav a { color: #24392f; }
.landing-page .site-header .nav-pill {
  color: #f8faf3;
  background: #1b3529;
  padding: 11px 21px;
}
.landing-page .site-header .nav-pill:hover { background: #315340; text-decoration: none; }
.landing-page .site-footer { background: transparent; border-top: 1px solid rgba(35, 56, 47, .1); }

.landing-main { width: min(1380px, calc(100% - 96px)); }
.landing {
  min-height: min(780px, calc(100svh - 147px));
  display: grid;
  grid-template-columns: 48% 52%;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  position: relative;
  isolation: isolate;
}

.landing-intro { grid-column: 1; grid-row: 1; align-self: end; z-index: 2; padding-bottom: 32px; }
.landing-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 25px;
  color: #50685a;
  font: 700 10px/1.4 Arial, sans-serif;
  letter-spacing: .12em;
  white-space: nowrap;
}
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: #5c8d68; box-shadow: 0 0 0 5px #5c8d6820; flex: none; }
.landing-intro h1 {
  margin: 0;
  color: #172720;
  font: 800 clamp(68px, 7.9vw, 126px)/.92 Arial, Helvetica, sans-serif;
  letter-spacing: -.078em;
}
.landing-intro h1 span { color: #647b68; }

.landing-art {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  height: min(690px, 74svh);
  min-height: 390px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-art::before {
  content: '';
  position: absolute;
  width: 83%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #dce5da 0%, #e4eadd 45%, #e7ebdf00 72%);
  filter: blur(3px);
}
.art-orbit {
  position: absolute;
  border: 1px solid rgba(48, 79, 58, .13);
  border-radius: 50%;
  transform: rotate(-24deg);
  pointer-events: none;
}
.orbit-one { width: 91%; height: 58%; }
.orbit-two { width: 65%; height: 43%; border-color: rgba(48, 79, 58, .08); }
.ring-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 20px #3550412c);
  animation: ring-arrive 900ms ease-out both;
}
.art-label {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #2e4838;
  background: rgba(251, 252, 246, .76);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 20px 60px #526a4a18;
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 13px 16px;
  font: 800 10px/1.35 Arial, sans-serif;
  letter-spacing: .12em;
}
.art-label-top { right: 3%; top: 17%; }
.label-mark { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#729b75 0 78%, #d8e4d6 78% 100%); box-shadow: inset 0 0 0 6px #f5f6ed; }
.art-label-bottom { left: 5%; bottom: 16%; }
.art-label-bottom strong { font: 800 27px/.95 Arial, sans-serif; letter-spacing: -.08em; }

.landing-bottom { grid-column: 1; grid-row: 2; z-index: 3; align-self: start; padding-bottom: 54px; }
.landing-cta {
  width: min(350px, 100%);
  min-height: 66px;
  padding: 9px 11px 9px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 99px;
  background: #19372b;
  color: #f8faf4;
  font: 700 17px Arial, sans-serif;
  box-shadow: 0 15px 30px #1e3a2a2b;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.landing-cta:hover { background: #315741; color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 20px 38px #1e3a2a35; }
.cta-arrow { width: 46px; height: 46px; border-radius: 50%; background: #e5ede1; color: #203a2b; display: grid; place-items: center; font-size: 25px; font-weight: 400; }
.landing-login { display: inline-block; color: #576a5c; margin: 17px 0 0 5px; font: 400 14px Arial, sans-serif; }
.landing-login strong { color: #19372b; text-decoration: underline; text-underline-offset: 3px; }
.landing-assurance { color: #708074; font: 400 13px Arial, sans-serif; margin: 32px 0 0 5px; }
.landing-legal { display: none; }

@keyframes ring-arrive { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ring-art { animation: none; } .landing-cta { transition: none; } }

@media (max-width: 960px) {
  body.landing-page { min-height: 100svh; }
  .landing-page .site-header {
    height: 64px;
    min-height: 64px;
    padding: 0 22px;
    align-items: center;
    border-bottom: none;
  }
  .landing-page .brand { font-size: 22px; }
  .landing-page .site-header nav { gap: 0; font-size: 14px; }
  .landing-page .site-header .nav-pill { display: none; }
  .landing-page .site-footer { display: none; }
  .landing-main { width: 100%; min-height: 0; }
  .landing {
    height: calc(100svh - 64px);
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 12px 24px 15px;
    overflow: hidden;
  }
  .landing-intro { grid-column: 1; grid-row: 1; align-self: start; padding: 0; }
  .landing-kicker { font-size: clamp(7px, 2.2vw, 9px); letter-spacing: .1em; gap: 8px; margin: 0 0 17px; }
  .kicker-dot { width: 6px; height: 6px; box-shadow: 0 0 0 4px #5c8d6820; }
  .landing-intro h1 { font-size: clamp(48px, 8.2svh, 72px); line-height: .93; letter-spacing: -.075em; }
  .landing-art { grid-column: 1; grid-row: 2; align-self: stretch; height: 100%; min-height: 0; width: calc(100% + 24px); margin-left: -24px; }
  .landing-art::before { width: min(75vw, 350px); }
  .orbit-one { width: min(82vw, 370px); height: 59%; }
  .orbit-two { width: min(60vw, 270px); height: 42%; }
  .ring-art { width: min(100vw, 430px); height: 100%; }
  .art-label { border-radius: 12px; padding: 9px 10px; font-size: 8px; gap: 7px; box-shadow: 0 12px 28px #526a4a16; }
  .art-label-top { right: 2%; top: 15%; }
  .art-label-bottom { left: 3%; bottom: 14%; }
  .label-mark { width: 19px; height: 19px; box-shadow: inset 0 0 0 4px #f5f6ed; }
  .art-label-bottom strong { font-size: 21px; }
  .landing-bottom { grid-column: 1; grid-row: 3; padding: 0; text-align: center; }
  .landing-cta { width: 100%; min-height: 54px; padding: 6px 7px 6px 21px; font-size: 16px; }
  .cta-arrow { width: 41px; height: 41px; font-size: 22px; }
  .landing-login { margin: 12px 0 0; font-size: 13px; }
  .landing-assurance { margin: 16px 0 0; font-size: 11px; }
  .landing-legal { display: flex; justify-content: center; gap: 10px; margin-top: 9px; color: #7b8b7d; font: 400 11px Arial, sans-serif; }
  .landing-legal a { color: #64766a; }
}

@media (min-width: 601px) and (max-width: 960px) {
  .landing-intro, .landing-bottom { width: min(100%, 500px); margin-inline: auto; }
  .landing-art { width: min(100%, 500px); margin-inline: auto; }
  .landing-bottom { width: min(100%, 430px); }
}

@media (max-width: 960px) and (max-height: 720px) {
  .landing { padding-top: 6px; padding-bottom: 9px; }
  .landing-kicker { margin-bottom: 11px; }
  .landing-intro h1 { font-size: clamp(43px, 7.5svh, 56px); }
  .art-label { transform: scale(.9); }
  .landing-cta { min-height: 48px; }
  .cta-arrow { width: 37px; height: 37px; }
  .landing-assurance { margin-top: 10px; }
  .landing-legal { margin-top: 6px; }
}